では slice() と splice() の違いをしっかり理解できるように、初心者向けの練習問題を用意しました。解答と解説もセットでまとめますね。
練習問題
問題1：slice の基本
次のコードの出力を答えてください。
const arr = [10, 20, 30, 40, 50];
const result = arr.slice(1, 4);
console.log(result);
console.log(arr);
問題2：splice の削除
次のコードの出力を答えてください。
const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(2, 2);
console.log(removed);
console.log(arr);
問題3：splice の追加
次のコードの出力を答えてください。
const arr = ['a', 'b', 'c'];
arr.splice(1, 0, 'x', 'y');
console.log(arr);
問題4：slice と splice の違い
次のコードの出力を答えてください。
const arr1 = [100, 200, 300];
const arr2 = arr1.slice(1);
const arr3 = arr1.splice(1);
console.log(arr1);
console.log(arr2);
console.log(arr3);
解答と解説
問題1
出力：
[20, 30, 40]
[10, 20, 30, 40, 50]
slice(1, 4)→ インデックス1から3までをコピー（終了位置は含まれない）。- 元の配列は変わらない。
問題2
出力：
[3, 4]
[1, 2, 5]
splice(2, 2)→ インデックス2から2個削除。- 削除された
[3, 4]が返り値。 - 元の配列は
[1, 2, 5]に変化。
問題3
出力：
['a', 'x', 'y', 'b', 'c']
splice(1, 0, 'x', 'y')→ インデックス1から0個削除し、代わりに'x','y'を挿入。- 元の配列が直接書き換わる。
問題4
出力：
[100]
[200, 300]
[200, 300]
arr1.slice(1)→[200, 300]をコピー。元の配列はそのまま。arr1.splice(1)→ インデックス1以降を全部削除して返す。結果[200, 300]が返り値、元の配列は[100]に変化。
まとめ
- slice → 元を壊さず「コピー」
- splice → 元を直接「編集」