Help us understand the problem. What is going on with this article?

[JS] spliceメソッドの戻り値が、削除された値のみを返すという謎仕様だった件

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月"]

謎仕様ですが、戻り値が真逆用途に使えそうなので、これはこれで便利かも。

以上です。
最後までありがとうございました。

pon_maeda
僕が学んだことや困ったことを共有して、誰かの役に立てれば嬉しいです。 わずかでも、世の中を便利にしたいと思ってます。 ペーペーですが、よろしくお願いします。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away