概要
splice()は Array インスタンスのメソッドで、
配列の 任意の位置にある要素を削除・追加・置換 するために使用します。
つまり、
-
spliceは「配列の途中を編集（追加・削除・置換）」する破壊的（元の配列を変更する）メソッドです。
| 目的 | メソッド名 | 引数 | 返り値 |
|---|---|---|---|
| 任意の位置で要素を削除・追加・置換 | splice() |
開始位置, 削除数, (追加要素...) |
削除された要素を含む新しい配列 |
目次
基本構文
JavaScript
// splice: 任意の位置から要素を削除・追加・置換
array.splice(start, deleteCount, item1, item2, ...);
| 引数 | 説明 |
|---|---|
start |
操作を開始するインデックス（0から始まる） |
deleteCount |
削除する要素の数（0を指定すると削除しない） |
item1, item2, ... |
（任意）追加する要素 |
- 対象: 配列
- 返り値: 削除された要素を格納した新しい配列
- 用途: 配列の途中に要素を挿入、削除、または置き換えたいとき
spliceの特徴
- 元の配列を直接変更する「破壊的メソッド」
- 削除・追加・置換の3つの用途を1つで担う
- 引数の組み合わせで挙動が大きく変わる
活用例
1. 要素を削除する
JavaScript
const colors = ["red", "green", "blue", "yellow"];
// インデックス1から2つ削除（green, blue）
const removed = colors.splice(1, 2);
console.log(colors); // ["red", "yellow"]
console.log(removed); // ["green", "blue"]
ポイント
削除した要素が返り値として返る。
2. 要素を追加する
JavaScript
const colors = ["red", "yellow"];
// インデックス1の位置に "green" と "blue" を追加
colors.splice(1, 0, "green", "blue");
console.log(colors); // ["red", "green", "blue", "yellow"]
ポイント
deleteCount に 0 を指定すると削除は行わず、要素を挿入できる。
3. 要素を置換する
JavaScript
const fruits = ["apple", "banana", "cherry"];
// インデックス1の要素 "banana" を "grape" に置き換える
const removed = fruits.splice(1, 1, "grape");
console.log(fruits); // ["apple", "grape", "cherry"]
console.log(removed); // ["banana"]
ポイント
削除と追加を同時に行うことで、置換が実現できる。
4. 末尾または先頭に応用する
JavaScript
const numbers = [1, 2, 3, 4];
// 末尾の削除
numbers.splice(-1, 1);
console.log(numbers); // [1, 2, 3]
// 先頭に追加
numbers.splice(0, 0, 0);
console.log(numbers); // [0, 1, 2, 3]
ポイント
負のインデックスを指定すると末尾から数えた位置で操作できる。
5. 実務での利用例（IDリスト編集など）
JavaScript
let ids = [101, 102, 103, 104];
// ID 102 を削除して新しいID 999 を同じ場所に追加
ids.splice(1, 1, 999);
console.log(ids); // [101, 999, 103, 104]