JavaScript splice 練習問題のレベル別セット
レベル1 基礎(削除・追加の基本)
- 問題1: 次の配列から先頭の要素を削除してください。
let arr = ['A', 'B', 'C'];
// ここに記述
JavaScript解答:
arr.splice(0, 1);
JavaScript解説: インデックス0から1つ削除。splice(開始位置, 削除数)は削除のみを行う。
- 問題2: 次の配列の2番目(インデックス1)に’X’を追加してください。
let arr = ['A', 'B', 'C'];
// ここに記述
JavaScript解答:
arr.splice(1, 0, 'X');
JavaScript解説: 削除数を0にすると挿入のみ。インデックス1の位置に’X’が入り、後ろが押し出される。
- 問題3: 次の配列の末尾に’D’を追加してください(spliceを使う)。
let arr = ['A', 'B', 'C'];
// ここに記述
JavaScript解答:
arr.splice(1, 0, 'X');
JavaScript解説: 削除数を0にすると挿入のみ。インデックス1の位置に’X’が入り、後ろが押し出される。
レベル2 応用(置き換え・複数操作)
- 問題4: 次の配列の’C’を’Z’に置き換えてください。
let arr = ['A', 'B', 'C', 'D'];
// ここに記述
JavaScript- 解答:
arr.splice(2, 1, 'Z');
JavaScript解説: インデックス2の要素(’C’)を1つ削除し、同じ場所に’Z’を挿入する。
- 問題5: 次の配列で’B’,’C’を削除して、同じ位置に’X’,’Y’,’Z’を挿入してください。
let arr = ['A', 'B', 'C', 'D', 'E'];
// ここに記述
JavaScript解答:
arr.splice(1, 2, 'X', 'Y', 'Z');
JavaScript解説: インデックス1から2つ削除(’B’,’C’)し、3つ挿入。削除と挿入数が異なると配列長が変わる。
- 問題6: 次の配列で3の前に9を2つ連続で挿入してください。
let nums = [1, 2, 3, 4];
// ここに記述
JavaScript解答:
nums.splice(2, 0, 9, 9);
JavaScript解説: 値3の位置はインデックス2。削除0で9を2つ挿入して前に並べる。
レベル3 テクニック(負のインデックス・末尾操作)
- 問題7: 次の配列の「最後のひとつ前」の要素を’X’に置き換えてください。
let arr = ['A', 'B', 'C', 'D', 'E'];
// ここに記述
JavaScript解答:
arr.splice(-2, 1, 'X');
JavaScript解説: 負の開始位置は末尾から数える。-2は最後から2番目(’D’)。1つ削除して’X’を挿入。
- 問題8: 次の配列の末尾から2つの要素を削除してください。
let arr = ['a', 'b', 'c', 'd', 'e'];
// ここに記述
JavaScript解答:
arr.splice(-2, 2);
JavaScript解説: 末尾から2番目の位置(’d’)から2つ削除すると’d’,’e’が消える。
- 問題9: 次の配列で「最後の要素」を’END’に差し替えてください。
let arr = ['start', 'mid', 'last'];
// ここに記述
JavaScript解答:
arr.splice(-1, 1, 'END');
JavaScript解説: -1は最後の要素。1つ削除して同じ場所に’END’を挿入する。
レベル4 実戦的課題(複合操作・安全なコピー)
- 問題10: 元の配列を変えずに、インデックス1から2つ削除した「新しい配列」を作ってください。
const original = ['A', 'B', 'C', 'D'];
// originalは変更しない
// ここに記述
JavaScript解答:
const arr = [...original];
arr.splice(1, 2);
// original はそのまま、arr は ['A', 'D']
JavaScript解説: spliceは破壊的なので、まずスプレッドでコピーを作ってから編集すると元の配列を保てる。
- 問題11: 次の配列から’green’を’yellow’に置き換え、さらに末尾に’pink’を追加してください(1行でなくてもOK)。
let colors = ['red', 'green', 'blue'];
// ここに記述
JavaScript解答:
colors.splice(1, 1, 'yellow');
colors.splice(colors.length, 0, 'pink');
JavaScript解説: まず置き換えで’green’→’yellow’。次にlength位置へ挿入で末尾追加。
- 問題12: 次の配列で、インデックス1から3つ削除し、削除した要素を別の配列
removedに受け取りながら、同じ位置に’X’だけ挿入してください。
let arr = ['p', 'q', 'r', 's', 't'];
// ここに記述
JavaScript解答:
const removed = arr.splice(1, 3, 'X');
// arr は ['p', 'X', 't']
// removed は ['q', 'r', 's']
JavaScript解説: spliceの戻り値は「削除された要素の配列」。同じ位置に’X’を挿入して配列を短く保つ。
仕上げのチェックポイント
- 削除だけ:
splice(開始位置, 削除数) - 追加だけ:
splice(開始位置, 0, 挿入要素...) - 置き換え:
splice(開始位置, 削除数, 挿入要素...) - 負の開始位置:
-1は最後、-2は最後のひとつ前
