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”」の要素を追加しています。
削除する要素は０なので要素は削除されていません。
splice()で要素を削除する
let nums = [1,2,3,8,9,4,5];
nums.splice(3, 2);
console.log( nums );
■結果
[1, 2, 3, 4, 5]
インデックスの3番目から２つ削除しています。追加する項目はないので未記入です。
splice()で要素を置換する
let drinks = [“Coke”, “Orange Juice”, “Tea”];
drinks.splice(1, 2, “Water”, “Coffee”);
console.log(drinks);
■結果
[“Coke”, “Water”, “Coffee”]
追加と削除を組み合わせて置換することができます。
おわり
splice()を使って配列の中間に要素を追加したり、削除したり便利ですが、pop()やpush()のように簡単にはいかないですね。
