JavaScript オブジェクトのコピーを変更すると、元のオブジェクトが変更されます

Question

objA を objB

にコピーします。

const objA = { prop: 1 },
const objB = objA;
objB.prop = 2;
console.log(objA.prop); // 1 の代わりに 2 をログに記録します

配列にも同じ問題があります

const arrA = [1, 2, 3],
const arrB = arrA;
arrB.push(4);
console.log(arrA.length); // `arrA` には 3 つの要素ではなく 4 つの要素があります。

            

Answer 1

明確にするために要約すると、JS オブジェクトをコピーするには 4 つの方法があります。

1. 通常のコピー。元のオブジェクトのプロパティを変更すると、コピーされたオブジェクトのプロパティも変更されます (逆も同様)。

リーリー

2. 浅いコピー。元のオブジェクトとコピーされたオブジェクトのトップレベルのプロパティは一意になります。ただし、ネストされたプロパティは 2 つのオブジェクト間で共有されます。スプレッド演算子 ...{} または Object.assign() を使用します。

リーリー

3. 詳細コピー。すべてのプロパティは、ネストされたプロパティも含め、元のオブジェクトとコピーされたオブジェクトに固有です。ディープ コピーの場合は、オブジェクトを JSON にシリアル化し、解析して JS オブジェクトに戻します。

リーリー

4. 完全なディープコピー。上記の手法を使用すると、JSON 内の無効なプロパティ値 (関数など) が破棄されます。関数を含むネストされたプロパティをディープ コピーして保存する必要がある場合は、lodash のようなユーティリティ ライブラリを参照するとよいでしょう。

リーリー

5. #Object.create() を使用すると、実際に新しいオブジェクトが作成されます。これらのプロパティはオブジェクト間で共有されます (一方を変更すると、もう一方も変更されます)。通常のコピーとの違いは、プロパティが新しいオブジェクトのプロトタイプ __proto__ に追加されることです。これは、元のオブジェクトを 決して 変更しない場合の浅いコピーとしても使用できますが、特にこの動作が必要でない限り、上記の方法のいずれかを使用することをお勧めします。

Answer 2

明らかに、ステートメント var tempMyObj = myObj; の内容について誤解があります。

JavaScript では、オブジェクトは参照 (より正確には参照の値) によって渡され、割り当てられるため、tempMyObj と myObj は両方とも同じオブジェクトへの参照になります。

これは、何が起こっているかを視覚化するために簡略化された図です

リーリー

代入後からわかるように、両方の参照が同じオブジェクトを指しています。

一方を変更する必要があり、他方は変更しない場合は、コピーを作成する必要があります。

リーリー

古い回答:

オブジェクトのコピーを作成する他の方法をいくつか紹介します

すでに jQuery を使用しているため:

リーリー

プレーンな JavaScript を使用する

リーリー

こことここを参照してください。