JavaScriptのtoSplicedの使い方！【配列】

JavaScriptで配列の要素を削除・置換・追加して、新しい配列を返すtoSplicedメソッドについて書いています。

toSplicedメソッドを使うと、元の配列を変更せずに、配列要素を削除・置換・追加などして、新しい配列を作成できます。
実際に動くサンプルを使って、以下について解説しています。

toSplicedメソッドの基本的な使い方

toSplicedメソッドは、配列の要素を削除・置換・追加した新しい配列を返します。
元の配列は変更されません。

基本的な構文は以下のとおりです。

array.toSpliced(start, deleteCount, item1, ..., itemN)

• start: 変更を開始するインデックス。
• deleteCount: 削除する要素の数。
• item1, ..., itemN: 追加する要素（省略可能）。

配列要素を削除した新しい配列を作成する

指定した配列の要素を削除して、新しい配列を作成します。

const fruits = ['apple', 'banana', 'orange', 'grape'];
const newFruits = fruits.toSpliced(1, 2);

console.log(fruits); // 結果：['apple', 'banana', 'orange', 'grape'] (元の配列は変わらない)
console.log(newFruits); // 結果：['apple', 'grape'] (新しい配列)

fruits配列を作成して、次の行でtoSplicedメソッドを使っています。

配列の要素番号「1」から2つの要素（’banana’と’orange’）が削除された新しい配列newFruitsを作成しています。
console.logで出力すると、元のfruits配列は変更されていないことが確認できます。

要素を置換した新しい配列を作成する

配列の要素を置換して、新しい配列を作成します。

const fruits = ['apple', 'banana', 'orange', 'grape'];
const newFruits = fruits.toSpliced(1, 2, 'kiwi', 'mango');

console.log(fruits); // 結果：['apple', 'banana', 'orange', 'grape'] (元の配列は変わらない)
console.log(newFruits); // 結果：['apple', 'kiwi', 'mango', 'grape'] (新しい配列)

fruits配列の要素番号「1」から2つの要素（’banana’と’orange’）を削除しています。
そして、代わりに第3引数以降に指定した、’kiwi’と’mango’が追加された新しい配列newFruitsが作成されています。

要素を追加した新しい配列を作成する

配列に要素を追加して、新しい配列を作成します。

const fruits = ['apple', 'banana', 'orange', 'grape'];
const newFruits = fruits.toSpliced(2, 0, 'kiwi', 'mango');

console.log(fruits); // 結果：['apple', 'banana', 'orange', 'grape'] (元の配列は変わらない)
console.log(newFruits); // 結果：['apple', 'banana', 'kiwi', 'mango', 'orange', 'grape'] (新しい配列)

fruits配列の要素番号「2」の位置を指定して、削除する要素数は「0」なので、追加だけされます。
そして、配列の要素の’kiwi’と’mango’が追加された新しい配列newFruitsが作成されます。

toSplicedメソッドの引数の詳細

toSplicedメソッドの引数start、deleteCount、item1, ..., itemNについて、さらに詳しく解説します。

• start: 変更を開始するインデックス。
  • 0以上の整数値を指定します。
  • 負の値を指定すると、配列の末尾からのインデックスとして扱われます。
• deleteCount: 削除する要素の数。
  • 削除する要素数を指定します。
  • 0を指定すると、要素は削除されません。
• item1, ..., itemN: 追加する要素（省略可能）。
  • 削除した位置に新しい要素を追加します。
  • 複数の要素を追加できます。

toSplicedメソッドを使うメリット

toSplicedメソッドを使う主なメリットは以下のとおりです。

• 元の配列を変更せずに操作できる: 元の配列を変更せずに、要素の削除・置換・追加を行った新しい配列を作成できます。
• 可読性の向上: toSplicedメソッドを使うことで、配列操作の結果を新しい配列として取得する処理がより明確になり、コードの可読性が向上します。

spliceメソッドとの違い

配列の要素を削除・置換・追加するメソッドとしては、spliceメソッドも存在します。
spliceメソッドは、元の配列を直接変更するのに対し、toSplicedメソッドは元の配列を変更せずに新しい配列を返す点が異なります。

どちらのメソッドを使うかは、元の配列を変更したいかどうかによって選択する必要があります。

JavaScriptのtoSplicedメソッドの使い方まとめ

今回はJavaScriptのtoSplicedメソッドの使い方について解説しました。
記事の内容をまとめます。