スプレッド構文使用メモ

ES6あたりからスプレッド構文という文法が使えるようになり、配列の操作が柔軟にできるようになりましたね！

自分が使っていた時に知ったことをメモ書きで残しておきます。

同一要素のコピー

指定した数要素が入ったObject Arrayを取得

デフォルトのオブジェクトデータが入った配列が欲しい時に使いました。

[...Array(3)].map(() => {
    return {hoge: "default", fuga: "value"}
});

/*
 * [ { hoge: 'default', fuga: 'value' },
 *   { hoge: 'default', fuga: 'value' },
 *   { hoge: 'default', fuga: 'value' } ]
 */

配列とオブジェクトの合成

二つの異なるレスポンスを一つにmergeして扱いたい時に使用しました。

const hoge = {
  a: "aaaaa",
  b: "bbbbb"
}

const fuga = [
  {
    c: "ccccc"
  },
  {
    d: "ddddd"
  }
]

[hoge, ...fuga];

/*
 * [ { a: 'aaaaa', b: 'bbbbb' }, { c: 'ccccc' }, { d: 'ddddd' } ]
 */

Object Arrayからhashを生成する

Hashでアクセスしやすい形に整形したい時に使えます。

const samples = [     {         hoge: "ABC",         fuga: "aaaaa",         piyo: "11111"     },     {         hoge: "DEF",         fuga: "bbbbb",         piyo: "22222"     } ]  const sampleHash = samples     .map(sample => ({
        [sample.hoge]: { ...sample }
    }))
    .reduce((acc, cur) => ({ ...acc, ...cur }), {});

/**
{
    ABC: {
        hoge: "ABC",
        fuga: "aaaaa",
        piyo: "11111"
    },
    DEF: {
        hoge: "DEF",
        fuga: "bbbbb",
        piyo: "22222"
    }
}
*/