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' } }
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 }
ディープコピーするにはlodashのcloneDeepメソッドを使う
ret = {...src};
みたいなデストラクチャリングする書き方もありますが、これもシャローコピーとなります。
lodashモジュールのcloneDeepメソッドを使用すればプロパティがundefinedであっても、ディープコピーすることが可能です。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント