js 遍历实现深拷贝

最新推荐文章于 2024-07-19 20:27:38 发布

bubbleSweet

最新推荐文章于 2024-07-19 20:27:38 发布

阅读量551

点赞数

分类专栏：笔记本文章标签： JavaScript 深拷贝遍历对象复制数组复制

本文链接：https://blog.youkuaiyun.com/bubbleSweet/article/details/119186510

版权

笔记本专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何使用JavaScript的for循环和递归实现深拷贝，通过实例演示了如何处理复杂对象和数组，确保数据独立性。

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

js 遍历实现深拷贝

之前写过利用 JSON.stringify 和 JSON.parse 来实现深拷贝
这篇笔记利用遍历迭代的方式实现深拷贝

遍历实现深拷贝

        function deepCopy(obj) {
          var newobj = null;  //创建一个新对象，置为null
          if(typeof obj == 'object' && obj != null){  //判断传入的被拷贝obj是否为一个对象，是否为null
            newobj = obj instanceof Array ? [] : {};  //obj是不为null的对象，那么是数组的话，让newobj为一个[]数组对象，否则开辟空间为一个{}对象
            for ( key in  obj) {  //遍历这个obj，并赋值给newobj对象
              newobj[key] = deepCopy(obj[key]);
            }
          } else {
            newobj = obj;  //如果obj为基本类型值，就直接赋值给newobj
          }
          return newobj;  //返回这个新对象
        }

暂时看不懂上面的内容没有关系，我们先调用试一下：
创建一个对象

        let obj = {
            name: 'hjc',
            mian: [18, 18],
            fn: function () {
                console.log('我是fn');
            },
            old: {
                one: 1,
                two: 2
            }
        }

        console.log(obj);  //先打印上面这个对象，往上看这个对象包含了很多东西
        var obj1 = deepCopy(obj);  //利用前面我们定义的深拷贝函数（往上看粘贴的第一块代码）得到新对象obj1
        obj1.name = 'ccc'; //改变obj1的name属性
        obj1.mian[0] = 0;  //改变obj1中数组属性的第一个值
        console.log(obj1);  //打印这个新对象obj1

得到的结果：
在这里插入图片描述
当我们把 obj 对象传入进去之后：
1、会先对 obj 对象进行判断，它是一个非空的object，所以进入 for 循环
2、这时候遍历 obj 的属性，把属性再传入进去
3、如果属性为 name ，那么是基本类型值，直接赋值就好
4、如果是类似于 mian, old 这种非空对象，就要对这些 mian, old 非空对象遍历
5、将mian，old 的属性元素传入，进行判断，例如 mian 的属性元素第一个为 18，那么把 18 传给第二个对象的 mian 属性的元素的第一个（在obj1改变之前）