splice()で配列の要素を追加・削除する方法!Javascript初心者の勉強

Javascriptでsplice()を使用して配列に要素を追加・削除、ついでに置換する方法です。

splice()で配列の要素を削除

splice()は配列のデータの追加や削除が行えます。
似たメソッドでpop()、push()、unshift()がありますが、例えばpop()では末尾の要素しか消せず、位置を指定することができませんでした。しかしsplice()は要素を追加する位置を任意できめられるので、配列の中間に要素を追加することも可能です。また削除する際も削除する要素を任意で決めることができます。

構文

変数名.splice(開始位置, 削除する数, 追加する要素, 追加する要素...);

開始位置にはインデックスを指定します。

splice()を使ったサンプルコード

構文だとややこしいので、実際に動きを確認してみましょう。

splice()で要素を追加する

let drinks = ["Coke", "Orange Juice", "Tea"];

drinks.splice(1, 0, "Water", "Coffee");

console.log(drinks);

■結果:
["Coke", "Water", "Coffee", "Orange Juice", "Tea"]

配列drinksの1番目のインデックスへ「 "Water", "Coffee"」の要素を追加しています。
削除する要素は0なので要素は削除されていません。

splice()で要素を削除する

let nums = [1,2,3,8,9,4,5];

nums.splice(3, 2);

console.log( nums );

■結果
[1, 2, 3, 4, 5]

インデックスの3番目から2つ削除しています。追加する項目はないので未記入です。

splice()で要素を置換する

let drinks = ["Coke", "Orange Juice", "Tea"];

drinks.splice(1, 2, "Water", "Coffee");

console.log(drinks);

■結果
["Coke", "Water", "Coffee"]

追加と削除を組み合わせて置換することができます。

おわり

splice()を使って配列の中間に要素を追加したり、削除したり便利ですが、pop()やpush()のように簡単にはいかないですね。

Javascript

Posted by Nakamoto