ES2023で導入された非破壊的メソッドを紹介します
- toReversedメソッド
- toSortedメソッド
- toSplicedメソッド
- withメソッド
toReversedメソッド
- reverseメソッドは破壊的に配列の要素を逆順にする
- toReversedメソッドは非破壊的に配列の要素を逆順にする
sample1.js
// reverse
const a = [1, 2, 3];
const b = a.reverse();
console.log(a); // [3, 2, 1]
console.log(b); // [3, 2, 1]
// toReversed 👍
const c = [1, 2, 3];
const d = c.toReversed();
console.log(c); // [1, 2, 3]
console.log(d); // [3, 2, 1]
toSortedメソッド
- sortメソッドは破壊的に配列の要素をソートする。
- toSortedメソッドは非破壊的に配列の要素をソートする。
sample2.js
// sort
const a = [3, 1, 2];
const b = a.sort();
console.log(a); // [1, 2, 3]
console.log(b); // [1, 2, 3]
// toSorted 👍
const c = [3, 1, 2];
const d = c.toSorted();
console.log(c); // [3, 1, 2]
console.log(d); // [1, 2, 3]
toSplicedメソッド
- spliceメソッドは破壊的に配列の要素を取り除いたり、置き換えたり、新しい要素を追加できる
- toSplicedメソッドは非破壊的に配列の要素を取り除いたり、置き換えたり、新しい要素を追加できる
ただspliceとtoSplicedの戻り値に下記違いがあるので、扱う際には注意が必要そうです。
- spliceの戻り値・・・削除された値が配列化されたもの
- toSplicedの戻り値・・・配列から要素を削除したコピーを返す
sample3.js
// splice
const a = [1, 2, 3, 4];
const b = a.splice(1,2);
console.log(a); // [1,4]
console.log(b); // [2,3] 戻り値は削除された値が配列化されたもの
// toSpliced 👍
const c = [1, 2, 3, 4];
const d = c.toSpliced(1,2);
console.log(c); // [1,2,3,4]
console.log(d); // [1,4] 配列から要素を削除したコピーを返す
withメソッド
第一引数に配列のindex番号を指定して、その要素を第二引数の値で置換します。
既にJSでは、非推奨ですが別でwith文があるので、今回追加された配列操作のwithメソッドと命名が被ってるので、ややこしいですね。
非推奨のwith文
sample4.js
// with 👍
const c = [1, 2, 3, 4];
const d = c.with(1,'👍');
console.log(c); // [1, 2, 3, 4]
console.log(d); // [1, '👍', 3, 4]
まとめ
いちいちシャローコピーしなくも良いので、コードがすっきりしそうですね。
参考にさせていただいた記事