2017.10.12
2020.1.7

オブジェクトのマージ(上書き)

JavaScriptで2つのオブジェクトをマージする方法です。

これまではjQueryを利用してやっていましたが、改めて調べたらJavaScriptのみで可能なんですね。知りませんでした。

コード

ES6からObject.assign()が実装されたようで、マージにはこのメソッドを利用します。


var a = {name:"data1", a1:"a"};
var b = {name:"data2", b1:"b"};
var r = Object.assign(a, b);

console.log(a);    // {name: "data2", a1: "a", b1: "b"}
console.log(b);    // {name: "data2", b1: "b"}
console.log(r);    // {name: "data2", a1: "a", b1: "b"}

最初に指定したオブジェクトに対して以降のオブジェクトがマージされていくようです。

元々のオブジェクトを変更したくない場合は以下のようにします。


var a = {name:"data1", a1:"a"};
var b = {name:"data2", b1:"b"};
var c = {name:"data3", c1:"c", c2: "cc"};
var r = Object.assign({}, a, b, c);

console.log(a);    // {name: "data1", a1: "a"}
console.log(b);    // {name: "data2", b1: "b"}
console.log(c);    // {name: "data3", c1: "c", c2: "cc"}
console.log(r);    // {name: "data3", a1: "a", b1: "b", c1: "c", c2: "cc"}

マージだけでなく単純な複製も可能です。


var a = {name:"data1", a1:"a"};
var r = Object.assign({}, a);

console.log(a);    // {name: "data1", a1: "a"}
console.log(r);    // {name: "data1", a1: "a"}

大変便利なメソッドですがIEでは利用できないのでその点だけ注意(Edgeは利用可能)。

参考リンク

JavaScript】関連記事