ES6(スプレッド構文)

はじめに

 スプレッド構文(...)とは反復可能や列挙可能オブジェクトの展開を行うことです。主なユースケースは配列を展開する際です。

let a = [...array];
//展開された配列を新しい配列として、変数などに代入する。

 以下コードで確認しましょう。

const array1 = [0, 1, 2, 3]
const array2 = [...array1]; //array2にも[0,1,2,3]が格納される。

array1とarray2は配列の入れ物が違うため等価性を確認するとfalseが返ります。

console.log(array1 == array2); //false

採用祝い金がもらえる求人サイトは"マッハバイト"

レストパラメータ(残余引数)

 関数の仮引数に3点ドットを使用すると特別に残余引数と呼ばれます。実引数に渡された可変長の引数を配列にまとめてくれます。

function fn(...args) {
  console.log(args);
}
fn(1,2,3,4,5) //[1, 2, 3, 4, 5]

分割代入との利用

 前々回の記事(ES6(分割代入) - 駆け足エンジニアの記録)でも分割代入とスプレッド構文とのユースケースは書いていますので是非読んでください。その記事ではオブジェクトとしてスプレッド構文を使っていましたが、もちろん配列としても利用可能です。

const [number1, number2, ...number3] = [1, 2, 3, 4, 5, 6, 7]
console.log(number1);  //1
console.log(number2); //2
console.log(number3); //[3,4,5,6,7]

終わりに

スプレッド構文もまた従来の構文よりも直感的でわかりやすいです。最後に、この記事を読んでおられる方はスプレッド演算子間違って読んでいませんか?(数日前の僕…)javascriptの仕様書には全く演算子と呼ばれていないようです。    こちらの記事
JavaScriptの「演算子」を全種類言えますか? ~演算子とは何かを完全に理解する~ - Qiita
で勉強させてもらいました!