JS常见坑:对象赋值会影响原对象

5次阅读

共计 865 个字符,预计需要花费 3 分钟才能阅读完成。

一、现象:直接用 = 的方式把一个对象赋值给另一个对象,会导致修改新对象时,原对象也发生变化
var obj1 = {‘name’: ‘1111’};
var obj2 = obj1;
obj2.name = ‘2222’;
console.log(obj1.name); //’2222′
二、原因:JavaScript 中对象的赋值是默认引用赋值的(两个对象指向相同的内存地址)
三、解决方法: JSON.parse(JSON.stringify(obj))

通过 Object.assign() 赋值
// 使用 Object.assign() 方法复制对象
let obj1 = {a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // {a: 0, b: { c: 0}}

obj2.a = 2;
console.log(JSON.stringify(obj1)); // {a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // {a: 2, b: { c: 0}}

obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // {a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)); // {a: 2, b: { c: 3}}

此方法也有不足之处:当修改 obj2.b.c 的值时,原对象 obj1.b.c 也跟着发生了变化,Object.assign() 只是让对象里第一层的数据没有了关联性,但是对象内的对象则跟被复制的对象有着关联性的。
终极解决方案:JSON.parse(JSON.stringify(obj))

var function cloneObjectFn (obj){// 对象复制
return JSON.parse(JSON.stringify(obj))
}

var obj1={a:2,b{c:0}}
var obj2=cloneObjectFn(obj1)
console.log(obj2) // {a:2,b{c:0}}

正文完
 0