赋值、浅拷贝和深拷贝

最新推荐文章于 2022-08-25 11:37:57 发布

zhu_hangfeng

最新推荐文章于 2022-08-25 11:37:57 发布

阅读量137

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/zhu_hangfeng/article/details/124383798

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细探讨了JavaScript中的对象赋值、浅拷贝和深拷贝的概念及实现方式。通过实例展示了如何改变对象属性以及数组内的引用类型元素，揭示了不同拷贝方式下对象内存和引用的影响。深入理解这些概念对于优化JavaScript代码和避免意外修改至关重要。

摘要由CSDN通过智能技术生成

详细内容请查看原文出自【浪里行舟】

赋值

和原数据指向同一对象，指向的是同一个存储地址，无论哪个改变，都会发生改变

浅拷贝

重新再堆中创建内存，基本数据类型互不影响，对象的引用类型因共享一块内存，会相互影响

深拷贝

从堆内存中开辟一个新的区域存放新对象，跟原对象不会相互影响

// 对象赋值
let obj1 = {
    name : '张三',
    arr : [1,[2,3],4],
};
let obj2 = obj1;
obj2.name = "李四";
obj2.arr[1] =[5,6,7] ;
console.log('obj1',obj1) // obj1 { name: '李四', arr: [ 1, [ 5, 6, 7 ], 4 ] }
console.log('obj2',obj2) // obj2 { name: '李四', arr: [ 1, [ 5, 6, 7 ], 4 ] }

// 浅拷贝
let obj1 = {
    name : '张三',
    arr : [1,[2,3],4],
};
let obj3=shallowClone(obj1)
obj3.name = "李四";
obj3.arr[1] = [5,6,7] ; // 新旧对象还是共享同一块内存
// 这是个浅拷贝的方法
function shallowClone(source) {
    var target = {};
    for(var i in source) {
        if (source.hasOwnProperty(i)) {
            target[i] = source[i];
        }
    }
    return target;
}
console.log('obj1',obj1) // obj1 { name: '张三', arr: [ 1, [ 5, 6, 7 ], 4 ] }
console.log('obj3',obj3) // obj3 { name: '李四', arr: [ 1, [ 5, 6, 7 ], 4 ] }

// 深拷贝
let obj1 = {
    name : '张三',
    arr : [1,[2,3],4],
};
let obj4=deepClone(obj1)
obj4.name = "李四";
obj4.arr[1] = [5,6,7] ; // 新对象跟原对象不共享内存
// 这是个深拷贝的方法
function deepClone(obj) {
    if (obj === null) return obj; 
    if (obj instanceof Date) return new Date(obj);
    if (obj instanceof RegExp) return new RegExp(obj);
    if (typeof obj !== "object") return obj;
    let cloneObj = new obj.constructor();
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        // 实现一个递归拷贝
        cloneObj[key] = deepClone(obj[key]);
      }
    }
    return cloneObj;
}
console.log('obj1',obj1) // obj1 { name: '张三', arr: [ 1, [ 2, 3 ], 4 ] }
console.log('obj4',obj4) // obj4 { name: '李四', arr: [ 1, [ 5, 6, 7 ], 4 ] }