こんにちは。KOUKIです。
JavaScriptのオブジェクトのコピー方法について記述します。
通常のオブジェクトコピー
JavaScriptのオブジェクトは、別の変数に格納しプロパティを変更してしまうと、元のオブジェクトまで変更されてしまいます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// obj1を作成 var obj1 = { name: 'obj1' } // obj1を元にobj2を作成 var obj2 = obj1 {name: "obj1"} // obj2のnameを変更 obj2.name = "obj2" "obj2" // obj2の変更内容がobj1に反映される obj1 {name: "obj2"} |
オブジェクトをそのまま代入すると参照情報が渡されるようですね。
スプレッド構文を使用したオブジェクトのコピー
スプレッド構文を使用すると参照元の情報を変えずにオブジェクトをコピーすることが可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// obj1を作成 var obj1 = { name: 'obj1' } // obj1を元にobj2を作成 var obj2 = {...obj1} // {...}を付与する {name: "obj1"} // obj2のnameを変更 obj2.name = "obj2" 14 // obj2の変更内容がobj1に反映されない obj1 {name: "obj1"} |
おわりに
スプレッド構文を使用すると参照元のオブジェクトに影響を受けない新しいオブジェクトを作成することができます。
意外と知らないですよね？
JavaScriptも日々進化しているので、常にブラッシュアップが必要ですね^^;
それでは、また！
にほんブログ村
最近のコメント