spliceメソッドの使い方について【JavaScript】

今回は、spliceメソッドについて。

JavaScriptで配列要素を取り除いたり、追加したりする際に使います。

spliceメソッドとは？

spliceとは、配列の要素を取得して操作することができるメソッドのこと。

具体的には以下のような操作をすることが出来ます。

Spliceメソッドの書き方は以下になります。

サンプルプログラムを書いてみよう

それではspliceメソッドを使ったサンプルプログラムを見ていきましょう。

削除する

配列の要素を削除したい場合は、追加する要素を指定しなければOKです。

let num = ['1', '2', '3', '4', '5'];

num.splice(1,2);
console.log(num);
// →['1', '4', '5'];

まずは、1〜5の配列numを用意します。

そして、numのインデックス1（つまり2）から2つの要素（2,3）を削除してconsoleに表示。

すると、consoleに[‘1’, ‘4’, ‘5’];が表示されました。

置き換える

配列の要素を置き換えたい場合は、指定したインデックスの後に、置き換えたい配列の要素を記入します。

例えば、以下のように書きます。

let num = ['1', '2', '3', '4', '5'];

num.splice(1,2,'A','B','C');
console.log(num);
 //    → ["1", "A", "B", "C", "4", "5"]

まずは、1〜5の要素を持った配列numを作成。

そして、numのインデックス1（つまり2）から2つの要素（2と3）を「’A’,’B’,’C’」に置き換えます。

最後consoleに表示すると、[“1”, “A”, “B”, “C”, “4”, “5”]と表示されました。

追加する

最後に配列に要素を追加する方法について。

spliceメソッドで追加をしたいなら、削除する要素数を0にしたらOK。

例えば、以下のように書きます。

let num = ['1', '2', '3', '4', '5'];

num.splice(1,0,'A','B','C');
console.log(num);
  // →["1", "A", "B", "C", "2", "3", "4", "5"]

まずは、1〜5の数値を入れた配列numを用意。

そして、numのインデックス1（つまり2）の後ろに「”A”, “B”, “C”」を追加します。

すると、[“1”, “A”, “B”, “C”, “2”, “3”, “4”, “5”]とconsoleに表示されました。

まとめ

以上が、spliceメソッドでした。

是非理解していきましょう。

関連記事:

プログラミングでよく使う変数とは？【JavaScript】 setTimeoutとsetIntervalの違いについて【JavaScript】 substringメソッドについて【JavaScript】 Math.randomの使い方【JavaScript】