【JavaScriptメソッド】.splice()メソッドの使い方について簡単に解説！

今回はJavaScriptのメソッドである「.splice()メソッド」の使い方について簡単に解説したいと思います。配列の内容を変更する際によく使われるメソッドです。

この記事の内容

.splice()メソッドとは
.splice()メソッドの使い方
まとめ

.splice()メソッドとは

.splice()メソッドとは、古い要素の削除しながら新しい要素を追加することで配列の内容を変更できるメソッドです。

.splice()メソッドの記述方法は、以下の通りです。

array.splice(index , howMany[, element1[, ...[, elementN]]])

indexで配列の変更を開始するインデックスを指定
howManyで削除する古い配列要素の数を指定
elementで追加する配列を指定

.splice()メソッドの使い方

では実際に「.splice()メソッド」の使い方を見ていきましょう。

var vegetables = ["carrot", "onion", "greenpepper", "eggplant"];

// インデックス2番目から、0個の要素を削除し、"cabbage"を挿入
var removed = vegetables.splice(2, 0, "cabbage")
// ["carrot", "onion", "cabbage", "greenpepper", "eggplant"]

// インデックス3番目から、1つの要素を削除
removed = vegetables.splice(3, 1);
// ["carrot", "onion", "cabbage", "eggplant"]

// インデックス2番目から1つの要素を削除し、"tomato"を挿入
removed = vegetables.splice(2, 1, "tomato");
// ["carrot", "onion", "tomato", "eggplant"]

// インデックス0番目から2つの要素を削除し、"cucumber","radish","spinach"を挿入
removed = vegetables.splice(0, 2, "cucumber", "radish", "spinach");
// ["cucumber", "radish", "spinach", "tomato", "eggplant"]

// インデックス3番目から、2つの要素を削除
removed = vegetables.splice(3, Number.MAX_VALUE);
// ["cucumber", "radish", "spinach"]