【JavaScript】splice()を使って配列の中の要素を編集・削除する方法

「splice()」はJavaScriptの配列を編集・削除する便利なメソッドで、要素の追加や削除に使用されます。注意点として、元の配列が変更されることと、返り値に変更された要素の配列が含まれることが挙げられます。

3行で要約すると

splice()は配列の要素を編集・削除するためのメソッド
引数によって、要素の追加や削除の動作を制御できる
類似のメソッドとしてslice()があり、使い方や使い分けを理解することが大切

「splice()」の基本的な使い方

「splice()」とは？

splice()メソッドは、配列の中の要素を編集・削除するためのものです。具体的には、配列の特定の位置から複数の要素を削除し、必要に応じて新しい要素を追加します。

let fruits = ["apple", "banana", "cherry"];
fruits.splice(1, 1, "grape");
console.log(fruits);  // ["apple", "grape", "cherry"]

この例では、"banana"を"grape"に変更しています。

「splice()」の引数について

splice()メソッドを使用する際には、いくつかの引数を指定することで、どのように配列を変更するのかを制御します。

第一引数: この引数は、操作を開始する要素のインデックスを指定します。もし負の値が指定された場合、配列の末尾からの位置として解釈されます。
第二引数: この引数は、削除する要素の数を指定します。0を指定した場合、要素は削除されません。
第三引数以降: 削除した位置に追加する新しい要素を指定します。指定しない場合、要素は追加されません。

let animals = ["dog", "cat", "elephant"];
animals.splice(2, 0, "rabbit");
console.log(animals);  // ["dog", "cat", "rabbit", "elephant"]

この例では、"elephant"の前に"rabbit"を追加しています。

「splice()」の使用例4パターン

要素を削除する

let numbers = [1, 2, 3, 4, 5];
numbers.splice(1, 3);
console.log(numbers);  // [1, 5]

この例では、インデックス1から3つの要素を削除しています。

要素を置き換える

let colors = ["red", "green", "blue"];
colors.splice(1, 1, "yellow");
console.log(colors);  // ["red", "yellow", "blue"]

"green"を"yellow"に置き換えています。

要素を追加する

let animals = ["dog", "cat"];
animals.splice(1, 0, "rabbit");
console.log(animals);  // ["dog", "rabbit", "cat"]

"cat"の前に"rabbit"を追加しています。

複数の要素を追加する

let cities = ["Tokyo", "Osaka"];
cities.splice(1, 0, "Kyoto", "Hiroshima");
console.log(cities);  // ["Tokyo", "Kyoto", "Hiroshima", "Osaka"]

"Osaka"の前に"Kyoto"と"Hiroshima"を追加しています。

「splice()」と「slice()」

「slice()」とは？

slice()メソッドは、配列の部分配列や文字列の部分文字列を取得するためのものです。

let items = ["a", "b", "c", "d", "e"];
let subItems = items.slice(1, 4);
console.log(subItems);  // ["b", "c", "d"]

「splice()」と「slice()」の違い

主な違いは、splice()は元の配列を変更するのに対して、slice()は元の配列に影響を与えません。また、splice()は要素の追加も可能ですが、slice()はそれができません。

let items1 = ["a", "b", "c"];
items1.splice(1, 1);
console.log(items1);  // ["a", "c"]

let items2 = ["a", "b", "c"];
let result = items2.slice(1, 2);
console.log(items2);  // ["a", "b", "c"]
console.log(result);  // ["b"]

「splice()」を使用する際の注意点

元の配列が変更される

splice()は元の配列を直接変更するメソッドです。そのため、元の配列のデータを維持したい場合、予めコピーしておく必要があります。

let originalArray = [1, 2, 3, 4];
let copiedArray = [...originalArray];
copiedArray.splice(1, 2);
console.log(originalArray);  // [1, 2, 3, 4]
console.log(copiedArray);    // [1, 4]

splice()の返り値に注意

splice()メソッドを使用すると、削除された要素が返り値として返されます。この挙動を知らずに使うと、意図しない動作が発生する可能性があるので注意が必要です。

let fruits = ["apple", "banana", "cherry"];
let removed = fruits.splice(1, 1);
console.log(fruits);   // ["apple", "cherry"]
console.log(removed);  // ["banana"]