【JavaScript入門】複数のオブジェクトをマージするObject.assign()の使い方

オブジェクトの結合
ディープコピーにはならないので注意が必要
ディープコピーする方法

オブジェクトの結合

Object.assign()を使うことにより、複数のオブジェクトをマージすることが出来ます。

書式

Object.assign(マージ先obj,マージ元obj1,マージ元obj2...);
第一引数にマージ先のオブジェクトを指定し、第ニ引数以降にマージ元となるオブジェクトを好きなだけ指定することができます。

//元となるオブジェクトを生成
let obj1 = {
    name:`tamanegi`,
    price:100
};

let obj2 = {
    group:'vegetable',
    from: 'japan'
};

let obj3 = {
    market:'seiyu'
}

//オブジェクトをマージ
Object.assign(obj1,obj2,obj3);

//結果を出力
console.log(obj1);

実行結果

{ name: 'tamanegi',
  price: 100,
  group: 'vegetable',
  from: 'japan',
  market: 'seiyu' }

ただし、上記の例ではobj1の元々の内容が失われてしまっています。
obj1の元々の内容を保持しつつ、すべてをマージした別オブジェクトを生成するには以下のように記述します。

書式

let merged = Object.assign({},obj1,obj2,obj3);
第一引数に空のオブジェクトを指定し、第ニ引数以降にマージ元となるオブジェクトを指定します。
結果はmergedに格納されます。

//元となるオブジェクトを生成
let obj1 = {
    name:`tamanegi`,
    price:100
};

let obj2 = {
    group:'vegetable',
    from: 'japan'
};

let obj3 = {
    market:'seiyu'
}

//オブジェクトをマージ
let merged = Object.assign({},obj1,obj2,obj3);

//結果を出力
console.log(obj1);
console.log(merged);

下記1行目がconsole.log(obj1)の結果。3行目以降がconsole.log(merged)の結果です。

実行結果

{ name: 'tamanegi', price: 100 }

{ name: 'tamanegi',
  price: 100,
  group: 'vegetable',
  from: 'japan',
  market: 'seiyu' }

これでobj1の内容を保持しつつ、obj1+obj2+obj3の内容をmergedというオブジェクトにマージすることができました。

ディープコピーにはならないので注意が必要

//元となるオブジェクトを生成
let obj1 = {
    name:`tamanegi`,
    price:{num:100}
};

//オブジェクトをコピー
let newObj = Object.assign({},obj1);

//元のオブジェクトの値を書き換える。
obj1.name = 'hakusai';
obj1.price.num = 300;

//結果を出力
console.log(obj1);//{ name: 'hakusai', price: { num: 300 } }
console.log(newObj);//{ name: 'tamanegi', price: { num: 300 } }

解説

newObjというオブジェクトにコピーした後に、obj1の値を書き換えると、priceは参照型なのでnewObjにも影響してしまうのです！

ディープコピーする方法

コピー元のオブジェクトをJSON文字列に変換後、再度オブジェクトに戻すことで別オブジェクトになります。この別オブジェクトを用いることでディープコピーが可能になります。

書式

let newObj = Object.assign({}, JSON.parse(JSON.stringify(obj1)));

//元となるオブジェクトを生成
let obj1 = {
    name:`tamanegi`,
    price:{num:100}
};

//オブジェクトをコピー
let newObj = Object.assign({}, JSON.parse(JSON.stringify(obj1)));

//元のオブジェクトの値を書き換える。
obj1.name = 'hakusai';
obj1.price.num = 300;

//結果を出力
console.log(obj1);//{ name: 'hakusai', price: { num: 300 } }
console.log(newObj);//{ name: 'tamanegi', price: { num: 100 } }

これでnewObjに影響しないことを確認できました。

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！

【Udemy厳選】2023年HTML、CSS、JavaScriptで人気のオススメ動画コース13選

issiki_wp