非破壊的な配列メソッド

Transcript

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