当前位置：首页 > news >正文

浅谈js中的深拷贝和浅拷贝

news 来源：原创 2024/4/29 21:26:28

深拷贝和浅拷贝是什么？

浅拷贝的堆内存地址指的是同一个，即只拷贝第一层，深层的引用值只拷贝地址，

而深拷贝则会拷贝所有内容

通俗的来讲就是浅拷贝只会拷贝原对象的属性，但是不会根据原对象属性的变化而变化，

而深拷贝拷贝的数据则是会根据原对象改变而改变

实现案例

浅拷贝实现思路

1.首先判断拷贝的参数是否为对象；

2.生成新的变量，新变量是数组还是对象取决于传的参数是数组还是对象；

3.遍历它，然后通过hasOwnProperty判断是不是他自己的属性，是就将其赋值给要return的数组；

具体代码

可以看出浅拷贝并没有拷贝出d的属性

      let obj = { a: 1, b: 2, c: 3 }; //测试对象
      function copy(obj) {
        // 判断拷贝的参数是否为对象
        if (typeof obj !== "object" || obj === null) {
          console.log("该数据不是一个对象");
          return false;
        }
        // 生成新的变量,生成新变量是数组还是对象取决于obj是数组还是对象
        let newObj = obj instanceof Array ? [] : {};
        for (let key in obj) {
          if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key];
          }
        }
        return newObj;
      }
      let newobj = copy(obj);
      obj.d = 4;
      console.log(newobj);//{a: 1, b: 2, c: 3}

深拷贝实现思路

1.首先判断拷贝的参数是否为对象；

2.生成新的变量，新变量是数组还是对象取决于传的参数是数组还是对象；

3.遍历它，然后通过hasOwnProperty判断是不是他自己的属性，是就将其赋值给要return的数组；

4.使用递归实现深拷贝

具体代码

使用深拷贝可以看出原对象的d属性也被拷贝了出来

    let obj = { a: 1, b: 2, c: 3 }; //测试对象      
    function deepCopy(obj) {
         // 判断拷贝的参数是否为对象
        if (typeof obj !== "object" || obj === null) {
          console.log("该数据不是一个对象");
          return obj;
        }
        // 生成新的变量,生成新变量是数组还是对象取决于obj是数组还是对象
        let newObj = obj instanceof Array ? [] : {};
        for (let key in obj) {
          if (obj.hasOwnProperty(key)) {
            newObj[key] = deepCopy(obj[key]);
          }
        }
        return newObj;
      }
      let deepObj = deepCopy(obj);
      console.log(deepObj); //{a: 1, b: 2, c: 3, d: 4}

不过这个代码有bug就是不能识别Date等特殊对象（目前还未修复）

csdn文章推荐受影响解决办法10个字10行