Slide 1
Slide 1 text
非破壊的な配列メソッド
Slide 2
Slide 2 text
破壊的メソッド、非破壊的メソッド
● 破壊的メソッド（変更メソッド）
○ 元の配列を変更する
● 非破壊的メソッド（コピーメソッド）
○ 元の配列を変更しない
○ コピーは常にシャローコピーで行われる
Slide 3
Slide 3 text
破壊的メソッド
fill()：指定した範囲を、指定した値で埋める
push()：配列の末尾に一つ以上の要素を追加
pop()：配列の末尾から要素を削除
reverse()：配列の順序を逆にする
sort()：配列の並べ替え
splice()：要素の除去・置換・追加など
Slide 4
Slide 4 text
非破壊的メソッド
concat()：2 つ以上の配列を結合。
slice()：配列の一部を範囲指定で抽出し新しい配列を生成
toReversed()：配列の要素の順序を逆にし、新しい配列を生成
toSorted()：配列の並べ替えて、新しい配列を生成
toSpliced()：要素の除去・置換・追加して、新しい配列を生成
with()：指定された位置の要素を指定された値で置き換えて、新しい配列を生成
Slide 5
Slide 5 text
破壊的メソッドの代替メソッド
破壊的メソッド 破壊的メソッドの代替メソッド（非破壊的メソッド）
fill() 代替メソッドなし
pop() slice(0, -1)
push(v1, v2) concat([v1, v2])
reverse() toReversed()
splice() toSpliced()
sort() toReversed()
Slide 6
Slide 6 text
破壊的メソッドの代替メソッド
破壊的メソッド 破壊的メソッドの代替メソッド（非破壊的メソッド）
fill() 代替メソッドなし
pop() slice(0, -1)
push(v1, v2) concat([v1, v2])
reverse() toReversed()
splice() toSpliced()
sort() toSorted()
Slide 7
Slide 7 text
ES2023 ( 2023 / 06 )
Slide 8
Slide 8 text
ES2023でリリースされた配列メソッド
● toReversed()
● toSpliced()
● toSorted()
● findLast()
● findLastIndex()
● with()
Slide 9
Slide 9 text
ES2023でリリースされた配列メソッド
● toSorted()
● toReversed()
● toSpliced()
● findLast()
● findLastIndex()
● with()
紹介済み
時間の関係上省略
紹介
Slide 10
Slide 10 text
with()
Slide 11
Slide 11 text
with()
指定された位置の要素を指定された値で置き換えた新しい配列を返す。
const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]
array.with(index, value)
構文
サンプルコード
Slide 12
Slide 12 text
with()
指定された位置の要素を指定された値で置き換えた新しい配列を返す。
const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]
arr.toSpliced(2, 1, 6)
🤔
Slide 13
Slide 13 text
デモ
demo link
Slide 14
Slide 14 text
with()：まとめ
配列操作のreplaceメソッドのようなものと思ってください。(時間あまって
たら話す)
参考
：https://tc39.es/proposal-temporal/#sec-temporal.plaindate.prototype.wit
h
https://github.com/tc39/proposal-change-array-by-copy/issues/103