JavaScript手动封装一个深拷贝函数(递归实现)

本文介绍了JavaScript中深拷贝和浅拷贝的概念,并通过示例代码展示了如何实现深拷贝。深拷贝创建了一个与原对象完全独立的新实例,修改拷贝后的对象不会影响原始对象,避免了重复释放问题。文章还提供了一段JavaScript深拷贝函数的实现,有助于读者理解这一重要概念。

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

  • 浅拷贝: 简单的赋值拷贝操作,产生重复释放问题
  • 深拷贝: 在堆区重新申请空间,进行拷贝操作,防止重复释放问题
<script>
    const people = {
        name: '一只不太聪明的燕子',
        age: 18,
        address: {
            city: 'Nanjing'
        },
        hobby: ["吃饭", "睡觉", "写bug", { play: ["排球", "羽毛球"] }]
    }

    /**
     * 深拷贝
     * @param {Object} obj  要拷贝的对象
     */

    function deepClone(obj) {
        if (typeof obj !== 'object' || obj === undefined) {
            // 如果obj不是object类型或者为undefined,不做处理直接返回
            return obj;
        }

        let result;  // 声明一个返回结果
        if (obj instanceof Array) {  // 判断obj是数组还是对象
            result = [];
        } else {
            result = {};
        }

        for (let key in obj) {
            // 确保key 不是原型上的属性
            if (obj.hasOwnProperty(key)) {
                // 递归调用,一直往下挖,最终完成深拷贝
                result[key] = deepClone(obj[key]);
            }
        }
        return result;  // 返回一份完全独立的拷贝
    }

    let people1 = deepClone(people);
    people1.name = "李荣浩";
    // 这里体现出深拷贝的意义
    people1.hobby[2] = "写歌";
    people1.hobby[3].play[0] = "唱歌";

    console.log(people1);
    console.log(people);

</script>

打印结果:

在这里插入图片描述
当然,实现深拷贝的方式有很多,想了解的话可以自行查阅资料,这里只是其中一种,如有错误欢迎指出!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值