【JavaScript】「スプレッド構文」と「レスト構文」について #JavaScript

はじめに

どちらも同じ演算子「...」を利用する為
混乱するかもしれないので初めに簡単に違いを説明すると。

スプレッド構文	レスト構文
展開	集約

だと個人的には考えていますです。

これを踏まえた上で詳しく見ていきましょう。

スプレッド構文を使うと、関数呼び出しでは 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します。

ようするに関数呼び出しの引数, 配列リテラル, オブジェクトリテラルに対してオブジェクトを展開出来るって事ですね。
実際にコードを書いていきます。

例配列の中から最大値を取得したい場合


const nums = [3, 1, 4, 1, 5, 9, 2, 6];

console.log(Math.max(...nums));
// 出力 9

また、何番目の引数でも利用することができます。


const nums = [3, 1, 4, 1, 5, 9, 2, 6];

console.log(Math.max(0, ...nums, 20, 8));
// 出力 20

new演算子の引数にも使用できます。

const dateFields = [1970, 0, 1];
const d = new Date(...dateFields);

console.log(d);
//出力 Thu Jan 01 1970 00:00:00 GMT+0900 (日本標準時)

例配列を複製したい場合


let arr    = [1, 2, 3];
let newArr = [...arr];

console.log(newArr);
// 出力　[1, 2, 3]

例配列を結合したい場合


let arr1   = [1, 2, 3];
let arr2   = [4, 5, 6];
let newArr = [...arr1, ...arr2];

console.log(newArr);
// 出力　[1, 2, 3, 4, 5, 6]

例オブジェクトを複製したい場合


const obj = {
  name: 'kamijo',
  age: 22
}
const newObj = {...obj};

console.log(newObj);
// 出力 {name: 'kamijo', age: 22}

スプレッド構文とは逆で
複数の要素を集約して 1 つのオブジェクトにまとめることが出来ます。
関数の引数や分割代入での不特定多数の値を配列として受け取る際に利用します。


function outputArgs(...args) {
  for(const a of args){
    console.log(a);
  }
}
outputArgs('a', 'b', 'c', 'd');
// 出力 a  b  c  d


const arr = [1, 2, 3, 4, 5];
const [a, b, ...c] = arr;

console.log(a, b, c);
// 出力 1  2  [3, 4, 5]

const obj = { a: 1, b: 2, c: 3, x:10 };
const { x, ...props } = obj;

console.log(x);
// 出力 10
console.log(props);
// 出力 {a: 1, b: 2, c: 3}

文字列にも使えます。


const [a, b, ...c] = 'aiueo';
console.log(a, b, c);
// 出力 a i ['u', 'e', 'o']