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

JavaScript

 

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

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

spliceメソッドとは?

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

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

・削除する

・置き換える

・追加する

 

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

配列名.splice(開始インデックス, 削除する要素数, 追加要素1, 追加要素2, …)

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

それでは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メソッドでした。

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