slice() と splice() は名前が似ているので混乱しやすいですが、性質はまったく違います。初心者向けに整理するとこうなります。
slice() と splice() の違い
| 項目 | slice() | splice() |
|---|---|---|
| 元の配列 | 変わらない（非破壊的） | 変わる（破壊的） |
| 戻り値 | 切り出した部分を「新しい配列」として返す | 削除された要素を「新しい配列」として返す |
| 用途 | 部分配列を作る、コピーを作る | 要素の削除・追加・置換 |
| 引数 | (開始位置, 終了位置)<br>終了位置は含まれない | (開始位置, 削除数, 追加する要素...) |
具体例
1. slice の例（非破壊）
const arr = [1, 2, 3, 4, 5];
const part = arr.slice(1, 3);
console.log(part); // [2, 3]
console.log(arr); // [1, 2, 3, 4, 5] ← 元はそのまま
2. splice の例（破壊）
const arr = [1, 2, 3, 4, 5];
// インデックス1から2個削除
const removed = arr.splice(1, 2);
console.log(removed); // [2, 3]
console.log(arr); // [1, 4, 5] ← 元が変わった！
3. splice で追加もできる
const arr = [1, 2, 3];
// インデックス1から0個削除して、'a','b'を挿入
arr.splice(1, 0, 'a', 'b');
console.log(arr); // [1, 'a', 'b', 2, 3]
まとめ
- slice → 「コピー用のハサミ✂️」
→ 元を壊さずに一部を取り出す - splice → 「編集用のカッター🔧」
→ 元を直接切ったり貼ったりして編集する
初心者が最初に混乱しやすいのは「どっちが元を壊すのか」です。
👉 覚え方のコツ：「splice はスパッと切って元を変える」「slice はスライスして取り分けるだけ」