JavaScript オブジェクトのコピーを変更すると、元のオブジェクトが変更されます
P粉765684602
2023-08-27 18:32:45
<p><code>objA</code> を <code>objB</code></p> にコピーします。
<pre class="brush:php;toolbar:false;">const objA = { prop: 1 },
const objB = objA;
objB.prop = 2;
console.log(objA.prop); // 1 の代わりに 2 をログに記録します</pre>
<p>配列にも同じ問題があります</p>
<pre class="brush:php;toolbar:false;">const arrA = [1, 2, 3],
const arrB = arrA;
arrB.push(4);
console.log(arrA.length); // `arrA` には 3 つの要素ではなく 4 つの要素があります。
<p><br /></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
明確にするために要約すると、JS オブジェクトをコピーするには 4 つの方法があります。
-
通常のコピー。元のオブジェクトのプロパティを変更すると、コピーされたオブジェクトのプロパティも変更されます (逆も同様)。
リーリー-
浅いコピー。元のオブジェクトとコピーされたオブジェクトのトップレベルのプロパティは一意になります。ただし、ネストされたプロパティは 2 つのオブジェクト間で共有されます。スプレッド演算子
リーリー...{}またはObject.assign()を使用します。-
詳細コピー。すべてのプロパティは、ネストされたプロパティも含め、元のオブジェクトとコピーされたオブジェクトに固有です。ディープ コピーの場合は、オブジェクトを JSON にシリアル化し、解析して JS オブジェクトに戻します。
リーリー-
完全なディープコピー。上記の手法を使用すると、JSON 内の無効なプロパティ値 (関数など) が破棄されます。関数を含むネストされたプロパティをディープ コピーして保存する必要がある場合は、
リーリーlodashのようなユーティリティ ライブラリを参照するとよいでしょう。を使用すると、実際に新しいオブジェクトが作成されます。これらのプロパティはオブジェクト間で共有されます (一方を変更すると、もう一方も変更されます)。通常のコピーとの違いは、プロパティが新しいオブジェクトのプロトタイプ__proto__に追加されることです。これは、元のオブジェクトを決して 変更しない場合の浅いコピーとしても使用できますが、特にこの動作が必要でない限り、上記の方法のいずれかを使用することをお勧めします。明らかに、ステートメント
var tempMyObj = myObj;の内容について誤解があります。JavaScript では、オブジェクトは参照 (より正確には参照の値) によって渡され、割り当てられるため、
tempMyObjとmyObjは両方とも同じオブジェクトへの参照になります。これは、何が起こっているかを視覚化するために簡略化された図です
リーリー代入後からわかるように、両方の参照が同じオブジェクトを指しています。
一方を変更する必要があり、他方は変更しない場合は、コピーを作成する必要があります。
リーリー古い回答:
オブジェクトのコピーを作成する他の方法をいくつか紹介します
すでに jQuery を使用しているため:
リーリープレーンな JavaScript を使用する
リーリーこことここを参照してください。