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

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

ECMA Script6(JavaScript)でObjectをコピーする方法です。

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

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

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

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

Object.assignメソッド

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

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

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

Object.assign()

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

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

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

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

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

lodashモジュールのcloneDeepメソッドを使用すればプロパティがundefinedであっても、ディープコピーすることが可能です。

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

コメントをどうぞ

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

CAPTCHA