修改 JavaScript 对象的副本会导致原始对象发生更改
<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>
总而言之,为了澄清起见,有四种复制 JS 对象的方法。
const a = { x: 0} const b = a; b.x = 1; // also updates a.x...{}或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.zconst a = { x: 0, y: { z: 0 } }; const b = JSON.parse(JSON.stringify(a)); b.y.z = 1; // doesn't update a.y.zlodash这样的实用程序库。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 3Object.create()确实创建了一个新对象。这些属性在对象之间共享(更改其中一个也会更改另一个)。与普通副本的区别在于,属性被添加到新对象的原型__proto__下。当您从不更改原始对象时,这也可以用作浅拷贝,但我建议使用上述方法之一,除非您特别需要这种行为。很明显,您对语句
var tempMyObj = myObj;的作用存在一些误解。在 JavaScript 中,对象是通过引用(更准确地说是引用的值)传递和分配的,因此
tempMyObj和myObj都是对同一对象的引用。这是一个简化的插图,可以帮助您直观地了解正在发生的事情
正如您在赋值后所看到的,两个引用都指向同一个对象。
如果您需要修改其中一个而不是另一个,则需要创建副本。
// [Object1]<--------- myObj const tempMyObj = Object.assign({}, myObj); // [Object1]<--------- myObj // [Object2]<--------- tempMyObj旧答案:
这里有几种创建对象副本的其他方法
由于您已经在使用 jQuery:
var newObject = jQuery.extend(true, {}, myObj);使用普通 JavaScript
function clone(obj) { if (null == obj || "object" != typeof obj) return obj; var copy = obj.constructor(); for (var attr in obj) { if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr]; } return copy; } var newObject = clone(myObj);请参阅此处和此处