スプレッド構文

5785 ワード
基礎 JavaScript JavaScript テキストリンク

スプレッド構文

「...」の形で記述され、配列やオブジェクトの要素を展開する構文です。

const test1 = { a: 1 };
const test2 = { b: 2 };

// test1とtest2が平らな状態でオブジェクトに入れることができます！
const test3 = { ...test1, ...test2};

// スプレッド構文を使わない場合
const test4 = {test1, test2};

// ネストしてい場合
const test_Oj1 = {a: {test: 1}, b: {test: 2}};
const test_Oj2 = {c: {test: 3}, d: {test: 4}};
const test_Oj = {...test_Oj1, ...test_Oj2};

// スプレッド構文を使わない場合
const test_Oj3 = {test_Oj1, test_Oj2};

結果

ネストしてい場合はこんな感じになります↓

スプレッド構文は配列でも使えます！

const test1 = [1,2];
const test2 = [3,4];

// こちらもtest1とtest2が平らな状態で配列に入れることができます！
const test3 = [...test1, ...test2];

結果

Object.assign

同じようにコピーすることができるObject.assignというメソットもあります.
コピー元オブジェクトから列挙可能enumerableかつ直接所有ownのプロパティだけをコピー先オブジェクトにコピーします。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

const test1 = { a: 1 };
const test2 = { b: 2 };

// { ...test1, ...test2}　と同じ結果になります
const test3 = Object.assign({}, test1, test2);

結果