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

JavaScriptで配列の要素を削除・置換・追加するspliceメソッドについて解説します。

spliceメソッドを使うと、配列の指定した範囲の要素を削除したり、新しい要素で置換したり、要素を追加したりすることができます。
実際に動くサンプルを使って、以下の操作を解説します。

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

spliceメソッドは、配列の要素を削除・置換・追加します。

元の配列が変更されることに注意してください。
基本的な構文は以下のとおりです。

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

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

配列から要素を削除する

配列の一部の要素を削除してみます。

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

console.log(fruits); // 結果：['apple', 'grape']

fruits配列を作成して、次の行でspliceメソッドを呼び出しています。

spliceメソッドに「1, 2」と引数を渡しています。
これで配列要素の1番目から2つの要素（’banana’と’orange’）がspliceメソッドによって削除されています。

要素を置換する

配列の要素を削除して、削除した位置から要素を追加します。

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

console.log(fruits); // 結果：['apple', 'kiwi', 'mango', 'grape']

fruits配列の番号「1」から2つの要素（’banana’と’orange’）が削除されます。
そして、３番目の引数以降に指定した要素が追加されます。(‘kiwi’と’mango’)
このように、配列の一部を置換することができます。

要素を追加する

削除する要素の数を指定しない場合には、配列の位置を指定して要素を追加できます。

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

console.log(fruits); // 結果：['apple', 'banana', 'kiwi', 'mango', 'orange', 'grape']

fruits配列の要素番号の「2」番目の位置を指定しています。
削除する要素数は「0」なので、要素は削除されません。
そして、3番目以降に要素を指定することで、今回は「2」番目の位置に’kiwi’と’mango’が追加されています。

spliceメソッドの戻り値

spliceメソッドは、削除された要素を格納した配列を返します。
要素が削除されなかった場合は、空の配列を返します。

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

console.log(removedFruits); // 結果：['banana', 'orange']

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

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

• 配列要素の削除・置換・追加を自由に行える: 配列の要素を柔軟に操作できます。
• 元の配列を直接変更できる: 新しい配列を作成せずに、元の配列を直接変更できます。
• 削除した要素を取得できる: 削除した要素を戻り値として取得できます。

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

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