未分類

jsでディープコピーをとる方法

Nuxtでアプリを作成していたとき、jsでディープコピーをとったつもりが、実はシャローコピーであったという失敗をしたので、備忘録としてまとめておく。

まず、以下のようにslice()はシャローコピーを返すので注意。

続いて、Object.assignはプロパティの値がプリミティブ値であればディープコピーをとることができる。

が、以下のようにプロパティの値がオブジェクトになっている場合はシャローコピーとなる。

そこで、完全なディープコピーを作成する方法としては、lodashを使うのが簡単。

jsでは配列メソッドでシャローコピーしかとれないものが多いので、配列やオブジェクトのコピーをつくる際には特に注意が必要。