spliceとは何か
spliceとは、配列に対して 要素の追加・削除・置換 を行うメソッドです。
元の配列自体を直接変更する点が特徴です。
spliceの基本構文
array.splice(開始位置, 削除数, 挿入する値1, 挿入する値2, ...)
- 開始位置：変更を開始するインデックス（0から始まる）
- 削除数：削除する要素数（0の場合は削除なし）
- 挿入する値1, 挿入する値2, ...：追加する要素（省略可）
これに実際の値を入れてみると、下のようになります。
const array = ['a', 'b', 'c', 'd', 'e'];
// インデックス2から2つ削除し、'X', 'Y' を挿入
array.splice(2, 2, 'X', 'Y');
console.log(array);
// 結果: ['a', 'b', 'X', 'Y', 'e']
こんな感じで配列の中身を変えることができるのがspliceの役割ですね。
使用例
1. 要素の削除
const array = [1, 2, 3, 4];
array.splice(1, 2);
console.log(array); // [1, 4]（インデックス1から2つ削除）
2. 要素の追加
const array = [1, 4];
array.splice(1, 0, 2, 3);
console.log(array); // [1, 2, 3, 4]（インデックス1の位置に2と3を追加）
3. 要素の置換
const array = ['a', 'b', 'c', 'd'];
array.splice(1, 2, 'x', 'y');
console.log(array); // ['a', 'x', 'y', 'd']（'b'と'c'を'x'と'y'に置換）
4. 配列末尾の削除
const array = [10, 20, 30];
array.splice(-1, 1);
console.log(array); // [10, 20]（最後の1要素を削除）
特徴と注意点
- 元の配列が直接変更される（破壊的メソッド）
- 削除要素は配列として返される
- 負のインデックスを指定すると末尾からの位置として扱われる
spliceは元の配列を直接変更しますが、これの対応として、「toSpliced」があります。
toSpliced は 元の配列を変更せず、要素を削除・置換した新しい配列を返します。
「破壊的なsplice」に対して、「安全なコピー配列を返すtoSpliced」と覚えるとわかりやすいです。
const array = [1, 2, 3, 4, 5];
// 2番目の要素から2つ削除
const newArray = array.toSpliced(1, 2);
console.log(newArray); // [1, 4, 5]
console.log(array); // [1, 2, 3, 4, 5] ← 元の配列はそのまま