修改 JavaScript 物件的副本會導致原始物件發生更改
P粉765684602
P粉765684602 2023-08-27 18:32:45
0
2
378
<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); // logs 2 instead of 1</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` has 4 elements instead of 3.</pre> <p><br /></p>
P粉765684602
P粉765684602

全部回覆(2)
P粉394812277

總而言之,為了澄清起見,有四種複製 JS 物件的方法。

  1. 普通副本。當您變更原始物件的屬性時,複製的物件的屬性也會變更(反之亦然)。
const a = { x: 0}
const b = a;
b.x = 1; // also updates a.x
  1. 淺拷貝。原始物件和複製物件的頂級屬性將是唯一的。不過,嵌套屬性將在兩個物件之間共用。使用展開運算子 ...{}Object.assign()
const a = { x: 0, y: { z: 0 } };
const b = {...a}; // or const b = Object.assign({}, a);

b.x = 1; // doesn't update a.x
b.y.z = 1; // also updates a.y.z
  1. 深層副本。所有屬性對於原始物件和複製物件都是唯一的,甚至是嵌套屬性。對於深拷貝,請將物件序列化為 JSON 並將其解析回 JS 物件。
const a = { x: 0, y: { z: 0 } };
const b = JSON.parse(JSON.stringify(a)); 

b.y.z = 1; // doesn't update a.y.z
  1. 完整深拷貝。使用上述技術,JSON 中無效的屬性值(如函數)將被丟棄。如果您需要深層複製並保留包含函數的巢狀屬性,您可能需要查看像 lodash 這樣的實用程式庫。
import { cloneDeep } from "lodash"; 
const a = { x: 0, y: { z: (a, b) => a + b } };
const b = cloneDeep(a);

console.log(b.y.z(1, 2)); // returns 3
  1. 使用Object.create()確實建立了一個新物件。這些屬性在物件之間共用(更改其中一個也會更改另一個)。與普通副本的區別在於,屬性被加入到新物件的原型 __proto__ 下。當您從不更改原始物件時,這也可以用作淺拷貝,但我建議使用上述方法之一,除非您特別需要這種行為。
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!