JavaScriptでのディープコピー

JavaScriptでオブジェクトの値を完全にコピーしたいことがある。例えば,Web API経由で取得した値を階層丸ごと変数に格納したい。

インターネットで軽く調べて「Javascript オブジェクトの浅い/深いコピー – Qiita」が詳しかったので,備忘録として整理する。

Object.assign()というのがよく使われているようだが,こちらは浅いコピー (shallow copy) であり,配列やオブジェクトなどは参照までしかコピーできない。つまり,実体は同じメモリーを指しており,変更するとどちらにも反映されてしまう。intやstringなどプリミティブ型しかコピーできない。

階層を丸ごと確実にコピーする深いコピー (deep copy) はJSON.stringify()JSON.parse()を使うらしい。

const monster = {
  name: "スライム",
  color: "青", 
  weapons:[
    {name:"剣", damage:100}
  ]
}
// 深いコピー
const darkMonster = JSON.parse(JSON.stringify(monster));

上記のコードで,darkMonstermonsterのプロパティが全て入っている。

JSONオブジェクトはJavaScript標準機能であり,こちらのJSON.parse(JSON.stringify(variable))は頻出処理となりそうなので,覚えておきたい。

コメントを残す

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