ECMA Script6（JavaScript）でObjectをコピーするObject.assignメソッド

ECMA Script6（JavaScript）でObjectをコピーするObject.assignメソッド

ECMA Script6（JavaScript）でObjectをコピーするObject.assignメソッド

ECMA Script6（JavaScript）でObjectをコピーする方法です。

単に変数に代入するだけです。

let obj1 = {'a':'1'};
let obj2 = obj1;
obj1.b = '2';
console.log(obj2);

結果は以下のようになります。

{ a: '1', b: '2' }

コピーした後に、コピー元のプロパティ値を変更したら、コピー先のプロパティ値も変更されています。JavaScriptのオブジェクトは参照渡しだからです。

プリミティブ型については値渡しになります。

Object.assignメソッド

Object.assignメソッドを使用しても同様のことが可能です。第一引数にコピー先変数、第二引数にコピーしたいオブジェクトを指定します。

let obj1 = {'a':'1'};
let obj2 = Object.assign({}, obj1);
obj1.b = '2';
console.log(obj2);

結果は以下のようになります。

{ a: '1' }

Object.assignメソッドはシャローコピーです。以下、サンプルです。

let ret = {};
let src = {
  a: {
    b: 1
  }
};
Object.assign(ret, src);
src.a.b = 'test';
console.log(ret); // { a: { b: 'test' } }
console.log(src); // { a: { b: 'test' } }

Object.assign()

JSON.parse(JSON.stringify(コピー元オブジェクト));

ディープコピーするには、JSON.parse(JSON.stringify(src));でディープコピーします。

let ret = {};
let src = {
  a: {
    b: 1
  }
};

ret = JSON.parse(JSON.stringify(src));
src.a.b = 'test';
console.log(ret); // { a: { b: 1 } }
console.log(src); // { a: { b: 'test' } }

ディープコピーできていることが確認できます。但しこれには落とし穴があり、値がundefinedだったり、関数だったりするとプロパティが消えてしまいます。

let ret = {};
let src = {
  a: {
    b: 1
  },
  run: () => {},
  c: undefined
};

ret = JSON.parse(JSON.stringify(src)); // undefindの場合プロパティ消える
src.a.b = 'test';
console.log(ret); // { a: { b: 1 } }
console.log(src); // { a: { b: 'test' }, run: [Function: run], c: undefined }