spliceメソッドとは
古い要素を取り除きつつ、新しい要素を追加することで、配列内容を変更するメソッドだそうな。
引用：こちら
とりあえずサンプルコード
実行結果は、コメントアウトの「=>」の先に書いてあるものです。
とりあえずサンプルコード
let months = ['1月', '3月', '4月', '6月'];
months.splice(1, 0, '2月'); // 配列1番目に「2月」を追加、削除する要素は0個
console.log(months); // => ["1月", "2月", "3月", "4月", "6月"]
months.splice(4, 1, '5月'); // 配列4番目に「5月」を追加、削除する要素は1個
console.log(months); // => ["1月", "2月", "3月", "4月", "5月"]
構文
構文
配列.splice(数字①,数字②,値①);
配列：このメソッドを適応させる（対象の）配列
数字①：配列の開始位置をインデックスで指定する。
数字②：配列から削除する要素の数を指定する。
本題：戻り値にクセがある
これ、実は破壊的メソッド
このメソッドは、破壊的メソッドと呼ばれるものです。例として、以下のコードを見てください。
破壊的メソッドの例
let array = ['hoge', 'fuga']
array.splice(2, 0, 'poon');
console.log(array) // => ["hoge", "fuga", "poon"] （元のarray配列は無くなり、hogeが追加された後の新しい配列が表示される）
このコードでは、「array」という配列の2番目に「poon」を追加。削除する要素は0個という意味になっている。
この場合、spliceが破壊的メソッドなので、元の「array」配列は文字通り破壊されていて、「hoge」が追加された後の形に変形されています。
じゃあ、戻り値は？
お察しの通り、元の配列が直接変形されるので、それと同じ配列を返すわけではありません。
具体的にどうなるか、見てみましょう。
戻り値の例
const array2 = array.splice(3, 0, 'hoge');
console.log(array); // => (「hoge」が追加された後の配列)
console.log(array2); // => [] (まさかの空配列が出力されます…)
元のarray配列は、整形後の「hoge」が入った配列が出力されますが、戻り値が代入されたarray2メソッドは、空配列が入ってます。
戻り値は、削除された値が配列化したものが返る
以下に、戻り値に着目したサンプルコードをあげるので、確認してみて下さい。
戻り値に着目したサンプルコード
let months = ['1月', '2月', '3月', '4月', '6月'];
let afterMonths = months.splice(4, 1, '5月'); // 配列4番目に「5月」を追加、削除する要素は1個
console.log(months); // => ["1月", "2月", "3月", "4月", "5月"]
console.log(afterMonths); // => ["6月"]
afterMonths = months.splice(5, 0, '6月'); // 配列5番目に「6月」を追加、削除する要素は0個
console.log(months); // => ["1月", "2月", "3月", "4月", "5月", "6月"]
console.log(afterMonths); // => []
afterMonths = months.splice(0, 3, 'ほげ月'); // 配列0番目に「ほげ月」を追加、削除する要素はそこから3個
console.log(months); // => ["ほげ月", "4月", "5月", "6月"]
console.log(afterMonths); // => ["1月", "2月", "3月"]
謎仕様ですが、戻り値が真逆用途に使えそうなので、これはこれで便利かも。
以上です。
最後までありがとうございました。