ES6のObject.assign()でつまった話
背景
仕事でReact製のアプリケーションの改修を行ってる際に、Object.assign()を用いてstateオブジェクトをコピーしようとした時に少しハマったので備忘録として書きます
やったこと
下記フォーマットのstateオブジェクトをコピーして、値を成形したものを新規オブジェクトとして用いる
// stateの中身 { a: { b: 'hoge' } }
コード
const copyState = Object.assign({}, this.state); copyState.b = 'piyo'; // 出力結果: piyo console.log(copyState.b) // 出力結果: piyo console.log(this.state.b)
参照までコピーされてstateが書き換わってる...
Object.assign()で値だけコピーしているはずなので、参照がコピーされるのはおかしい
こたえ
どうやらObject.assign()はshallow copyであってdeep copyではないらしい
思考停止で使ってたので気づかなかった...
JavaScriptにおけるDeep Copy
JSON.stringifyしたものにJSON.parseをかける
const obj = { a: { b: 'hoge' } }; const copyObj = JSON.parse(JSON.stringify(obj));
簡単にオブジェクトをコピー(実際は新しいオブジェクトを生成)できる
便利な反面プロパティにfunctionやundifinedがあるとなくなってしまったり、date型の値の形式が変わってしまったりすることがあるので思考停止で使うのは危なそう
Deep Copyの関数を自作する
確実っちゃ確実な方法
気が向いたら実装してみようと思う
ライブラリを使う
このあたりが良さそう?