JS罕见坑：对象赋值会影响原对象

2024年5月30日 286次阅读 来源: dugujiujian

一、征象：直接用=的体式格局把一个对象赋值给另一个对象，会致使修正新对象时，原对象也发生变化

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}}
    原文作者：dugujiujian
    原文地址: https://segmentfault.com/a/1190000018347348
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞