JavaScript | 配列の中身を 削除・置き換え・追加(splice メソッド)

JavaScript JavaScript
スポンサーリンク

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は最後のひとつ前

タイトルとURLをコピーしました