恥ずかしながらJavaScriptのArray.prototype.spliceメソッドについて勘違いしていたのでちゃんと使い方を理解しておく。
勘違いしていたこと
spliceの語感がsliceやsplitと似ているし、こういう使い方↓をするので**"切り取る"**ためのメソッドだと思っていた。
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2); // [1, 4, 5]
しかしspliceはそれ以上の使い方ができるメソッドだし、調べてみるとそもそもspliceという言葉は"切り取る"とはまるで逆の意味を持っていた。この意味を知っていたらこんな勘違いをすることもなかった気がする。
splice
解いて組み継ぎする、より継ぎする、継ぎ合わせる
https://ejje.weblio.jp/content/splice
要素を削除してつなぎ合わせる
まずは基本的な使い方。インデックスと個数を指定して配列から要素を切り取る。
let arr = ['a', 'b', 'c', 'd', 'e'];
arr.splice(
1, // インデックス1（'b'）からスタートして
2 // 2個の要素を切り取る（'b', 'c'）
);
console.log(arr); // ['a', 'd', 'e']
ちなみにspliceの戻り値で切り取った要素を受け取ることができる。
let cut = arr.splice(1, 2); // ['b', 'c']
要素を差し込んでつなぎ合わせる
配列の指定した位置に要素を差し込むことができる。
let arr = ['a', 'b', 'c'];
arr.splice(
1, // インデックス1に
0, // 切り取る数は0で
'x' // 'x'を差し込む
);
console.log(arr); // ['a', 'x', 'b', 'c']
spliceの言葉の意味を汲むと、
- 配列arrをインデックス1で切り離して、 ['a'] ['b', 'c']
- 'x' を接ぎにして ['a'] 'x' ['b', 'c']
- つなぎ合わせる ['a', 'x', 'b', 'c']
といったほうがあっているかもしれない。
差し込む要素は複数あってもいい。
let arr = ['a', 'b', 'c'];
let cut = arr.splice(1, 0, 'x', 'y', 'z'); // ['a', 'x', 'y', 'z', 'b', 'c']
ES6のスプレッド演算子を使うとスマートな感じになる。
let arr = ['a', 'b', 'c'];
let cut = arr.splice(1, 0, ...['x', 'y', 'z']);
要素を入れ替える
ということで以上２つを組み合わせて要素を入れ替えることができる。
let arr = ['a', 'b', 'c', 'd', 'e'];
arr.splice(1, 3, ...['x', 'y', 'z']); // ['a', 'x', 'y', 'z', 'e']
配列を分割する
第2引数がなければ指定したインデックスで配列を分割する操作になる。
let arr = ['a', 'b', 'c', 'd', 'e'];
let arr2 = arr.splice(2);
console.log(arr); // ['a', 'b']
console.log(arr2); // ['c', 'd', 'e']