JavaScript中的深浅拷贝问题详解

最新推荐文章于 2025-09-03 16:51:19 发布

JackieDYH

最新推荐文章于 2025-09-03 16:51:19 发布

阅读量416

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 深拷贝浅拷贝

本文链接：https://blog.csdn.net/JackieDYH/article/details/105970424

JavaScript 专栏收录该内容

400 篇文章

订阅专栏

本文深入探讨了JavaScript中数据类型的拷贝问题，包括基础数据类型与引用数据类型的浅拷贝和深拷贝的区别，以及如何实现多层深拷贝。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据类型

基础数据类型: 数值, 布尔, 字符串等
引用数据类型: 数组 / 对象
只有引用数据类型才有拷贝的问题

浅拷贝

var arr = [1, 2, 3, 4];
var brr = arr;
arr.push(5);
console.log(brr); // 结果: [1, 2, 3, 4, 5]
// 思考: 为什么往arr数组末尾插入元素5, brr数组也跟着改变了呢?

arr 和 brr变量中装载的是数组的内存地址&7x0099(编的地址), 改变数组内容都是在改变这个连续地址中的&7x0099内的值, 所以他俩都收到影响

深拷贝

var arr = [1, 2, 3, 4];
var brr = new Array();
arr.map(item => {
    brr.push(item);
})
arr.push(5);
console.log(brr); // 结果: [1, 2, 3, 4]
// 思考: 为什么这次arr没有影响brr呢?

brr的值, 保存了一个new Array()新开辟的地址空间, 所以brr和arr不在指向同一个数组了

多层深拷贝

项目中数组/对象常用深克隆方式(可拷贝多层)

// 方式1:
function deepClone(obj){
    // 判断参数是数组还是对象, 准备一个空的
    let objClone = Array.isArray(obj) ? [] : {};
    // 非空, 并且是对象  (array或者object的typeof都是object)
    if(obj && typeof obj === "object"){
        // 遍历数组/对象
        for(key in obj){
        // 判断是否是当前对象的属性(防止复制原型链上的对象)
            if(obj.hasOwnProperty(key)){
            //判断obj子元素是否为对象，如果是，递归复制
                if(obj[key] && typeof obj[key] === "object"){
                    objClone[key] = deepClone(obj[key]);
                } else {
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}
// 方式2:
JSON.parse(JSON.stringify(obj));