修改 JavaScript 对象的副本会导致原始对象发生更改
P粉765684602
P粉765684602 2023-08-27 18:32:45
0
2
377
<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学习者快速成长!