【JavaScript】splice()で配列の要素を操作する方法

JavaScriptのsplice()メソッドとは

splice()はJavaScriptの配列型のメソッドであり、以下のことができます。

それぞれ具体的にコードを交えて解説します。

splice()で配列内の要素を削除する

配列の要素を削除する場合、splice()メソッドには次のように2つの引数を渡します。

配列.splice(スタート位置, 削除する要素数)

第1引数は削除する最初の項目の位置を指定し、第2引数は削除する要素の数となります。

splice()メソッドは、削除された要素で構成された配列を返します。この時、元の配列は変更されます。

具体的なコード例

例えば、以下のように5つの数値を含む配列があるとします。

let numbers = [10, 20, 30, 40, 50];

上記のnumbers配列において、最初の要素から2つ目までを削除するとしたら以下のように書きます。

let deletedNumbers = numbers.splice(0, 2)

console.log(numbers)        // [30, 40, 50]
console.log(deletedNumbers) // [10, 20]

処理の結果としては、deletedNumbersには削除された要素で構成された配列が格納され、元の配列であるnumbersには3つの要素のみが残りました。

splice()で配列に要素を挿入する

splice()メソッドに3つ以上の引数を渡し、第2引数を0とすると、配列に要素を挿入することができます。

配列.splice(スタートの位置, 0 要素1, 要素2, ...)

この方法だと、splice()メソッドは要素を削除しないので、処理結果の戻り値には空の配列が返されます。

具体的なコード例

namesという配列に3つの文字列があるとします。

配列のインデックス番号が2である位置に1つの要素を挿入する場合、以下のように書きます。

let names = ['田中', '斎藤', '木村'];
let responseArray = names.splice(2, 0, '松本');

console.log(names);        // ['田中', '斎藤', '松本', '木村']
console.log(responseArray) // []

元のnames配列は4つの要素を持つようになり、splice()メソッドの戻り値には空の配列が返ってきます。

ちなみに、複数の要素を挿入したい場合は、次のように記述します。

let names = ['田中', '斎藤', '木村'];
let responseArray = names.splice(2, 0, '松本', '大島', '森本');

console.log(names);        // ['田中', '斎藤', '松本', '大島', '森本', '木村']
console.log(responseArray) // []

splice()メソッドで配列内の要素を置き換える

splice()メソッドを使用すると、配列に新しい要素を挿入すると同時に、既存の要素を削除することができます。

具体的な方法としては、3つ以上の引数を渡し、2番目の引数で削除する要素数を指定し、3番目の引数で挿入する要素を指定します。

なお、削除する要素の数は、挿入する要素の数と同じである必要はありません。

具体的なコード例

例えば、3つのスポーツの名前が格納された配列があるとします。

2番目の要素（soccer）を swimming に置き換える場合、次のように書きます。

let sports = ['baseball', 'soccer', 'tennis'];
sports.splice(1, 1, 'swimming');

console.log(sports) // ['baseball', 'swimming', 'tennis']

複数の要素を置き換える場合は、以下のように記述します。

let sports = ['baseball', 'soccer', 'tennis'];
sports.splice(1, 2, 'swimming', 'basketball');

console.log(sports) // ['baseball', 'swimming', 'basketball']