【JavaScript】ES2023で導入された非破壊的メソッド

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]

まとめ

いちいちシャローコピーしなくも良いので、コードがすっきりしそうですね。

参考にさせていただいた記事