JavaScript使い必見！配列に対して値を追加・削除・部分抽出&置換に使える splice() メソッドの使い方

DevelopIntelligence

Managed Learning Solutions including training design and development, program delivery and management.

本記事は、Insert, Remove, Splice and Replace elements with Array.splice()を
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

7,502 views

読了時間 : 約4分12秒

配列がすでに存在していて、これを編集する必要がある場合には、Array.splice()メソッドが便利です。 splice()メソッドを使用すると、JavaScriptの配列の要素の挿入、削除、および置き換えができます。

実際の活用例を見て行く前に、splice()メソッドに渡される引数を確認しましょう。
Array.splice(開始インデックス, 削除する要素数);

・「開始インデックス」は、要素の挿入または削除が開始される配列内の位置を参照します。
・「削除する要素数」は開始インデックスから数え始めて、配列から要素を削除します。
・「削除する要素数」に続くすべての引数は、「開始インデックス」から配列に挿入されます。配列に挿入されるこれらの引数は、文字列、数値、ブール値、オブジェクト、関数、null、未定義な等どを含むあらゆるデータ型をとれます。

Array.prototype.splice()メソッドについての詳細はについては、
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

を参照してください。

まず、array.splice()メソッドを使用して配列に数値を挿入する方法を示す簡単な例を見てみましょう。
次のような配列[1,3,4]があり、このJavaScript配列の1と3の間に2を挿入したいとします。
次のコード例は、1と3の間に2を挿入します。

var my_array = [1,3,4];
var start_index = 1;
var number_of_elements_to_remove = 0;
my_array.splice(start_index, number_of_elements_to_remove, 2);
console.log(my_array);
//[1,2,3,4];

array.splice()メソッドを使用する場合、splice()メソッドは配列に対して破壊的に作用します。したがって、新しい配列を返す代わりに、my_arrayでsplice()メソッドを呼び出すと、my_arrayが更新されます。

次に、配列から要素を削除する例を見てみましょう。

var my_array = ["a","b","c","k","d"];
var start_index = 3
var number_of_elements_to_remove = 1;
var removed_elements = my_array.splice(start_index, number_of_elements_to_remove);
console.log(removed_elements);
//["k"]
console.log(my_array);
//["a","b","c","d"];

array.splice()メソッドを使用して要素を削除すると、削除された要素の配列が返されます

最後に、splice()メソッドを使ってJavaScript配列の要素を置き換えてみましょう。

var my_array = ["baseball", "basketball", "tennis", "golf"];
var start_index = 1
var number_of_elements_to_remove = 2;
var removed_elements = my_array.splice(start_index, number_of_elements_to_remove, "boxing", "bowling", "volleyball");
console.log(removed_elements);
//["tennis", "golf"]
console.log(my_array);
//["baseball", "boxing", "bowling", "volleyball", "golf"];

上記の例では、スポーツ「basketball」と「tennis」を「boxing」、「bowling」、「volleyball」に置き換えています。上記の例は、色々な操作が混ざっているために少し混乱するかもしれません。ステップごとに操作を分解してみましょう。まず、splice()メソッドをmy_array[1]から開始するように指示します。次に、「削除する要素数」が2に設定されているので、my_array [1]とmy_array [2]を削除します。最後に、start_index my_array [1]からそれぞれの引数をmy_arrayに1つずつ挿入しています。

splice()の使用例をもっと見てみたい場合は、https://www.tutorialspoint.com/javascript/array_splice.htm

または

https://www.hacksparrow.com/javascript-array-splice-syntax-and-examples.html
を確認してみてください。

splice()メソッドは、JavaScriptの配列から値を挿入または削除するときにうまく機能します。配列が既にソートされている場合は、splice()メソッドを使用して、配列内で必要な場所に正確に新しい値を配置することができます。 splice()メソッドは、配列からインデックスで値を削除する場合にもうまく機能します。注意すべき点は、splice()メソッドが配列に対して破壊的に作用するということです。返り値は配列から取り除かれた値だけです。

※本記事は、Insert, Remove, Splice and Replace elements with Array.splice()を翻訳・再構成したものです。

▼こちらの記事もおすすめです！