【splice】JavaScript 配列の要素に対する操作

この記事の対象

配列の基礎を知っていて、ES6に触れたことがある人
Webエンジニアに転職して1ヶ月経ち、覚えたことをアウトプット

spliceとは？

配列のある要素からある要素までを切り取ってくれるメソッドです。

基本的な使い方

6つの要素を含む配列を準備します。
配列には各要素(value)に0からのキー(key)が振られているので、そのキーを使ってどこから(第1引数)どこまで(第2引数)を切り取るかを記述できます。

下の例だとspliceメソッドの第1引数がarr[3]で第2引数がarr[5]になるので、13から15までを切り取ることができます。

let arr = [10, 11, 12, 13, 14, 15];

console.log(arr); //[ 10, 11, 12, 13, 14, 15 ]
console.log(arr.splice(3, 5)); //[ 13, 14, 15 ]

ちなみに引数を一つにすると、それ以降すべての要素を切り取ることができます。

let arr = [10, 11, 12, 13, 14, 15];

console.log(arr.splice(1)); //[ 11, 12, 13, 14, 15 ]

引数に負の数値を与えると後ろから数えて切り取る事もできます。

let arr = [10, 11, 12, 13, 14, 15];

console.log(arr.splice(-3)); //[ 13, 14, 15 ]

let arr = [10, 11, 12, 13, 14, 15];

console.log(arr.splice(-5, 4)); //[ 11, 12, 13, 14 ]

途中の要素の削除や途中への要素の追加

arr1で用意した配列に対し、spliceメソッドの引数を見るとarr1[1]からarr2[2]までを切り取り、新しい配列がarr2になります。
今回の場合ように第3引数以降も存在する場合は、arr1に配列を返します。

let arr1 = [10, 11, 12];
let arr2 = arr1.splice(1, 2, 9, 15, 24);

console.log(arr1); //[ 10, 9, 15, 24 ]
console.log(arr2); //[ 11, 12 ]