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);

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

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

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

Object.assignメソッド

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

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

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

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' } }

view raw
gistfile1.txt
hosted with ❤ by GitHub

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' } }

view raw
gistfile1.txt
hosted with ❤ by GitHub

ディープコピーできていることが確認できます。但しこれには落とし穴があり、値が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 }

view raw
gistfile1.txt
hosted with ❤ by GitHub

ディープコピーするにはlodashのcloneDeepメソッドを使う

ret = {...src};みたいなデストラクチャリングする書き方もありますが、これもシャローコピーとなります。

lodashモジュールのcloneDeepメソッドを使用すればプロパティが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 }

view raw
gistfile1.txt
hosted with ❤ by GitHub

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA