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: 追加する要素（省略可能）。
  • 削除した位置に新しい要素を追加します。
  • 複数の要素を追加できます。