粗浅的深浅拷贝

120 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第2天,点击查看活动详情

javaScript对象的深拷贝与浅拷贝

前言

我们都知道数据类型有基本类型和引用类型,引用类型在直接进行赋值时,实际上是将指向当前的指针指向了新的变量,也就是说,改变其中一个变量的值时,另外一个变量的值也会变化

const a = {
    name: "张三",
    age: "15",
    obj: {
        class: "三年级二班"
    }
}
const b = a;

console.log(`a对象的值=`,a)
console.log(`b对象的值=`,b)

// 将a的name改为李四
a.name= '李四'
console.log(`修改后a对象的值=`,a)
console.log(`修改后b对象的值=`,b)

** 结果如下 **

image-20220706092212351

可以看到结果就是name都为李四了

深拷贝与浅拷贝

深拷贝

深拷贝指的是对于有嵌套的引用类型,使用递归的形式继续拷贝,确保返回的都是全新的引用

function deepClone1(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空,并且是对象或者是
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone1(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

浅拷贝

**浅拷贝只是拷贝了顶层的属性,如果里面还含有引用类型,还是直接复制引用不会返回新的引用。

讨论对象的扩展运算符是深拷贝还是浅拷贝?

继续刚才我们的例子,将对象里面的obj引用的class改为二年级三班

const a = {
    name: "张三",
    age: "15",
    obj: {
        class: "三年级二班"
    }
}
const b = {...a};

console.log(`a对象的值=`,a)
console.log(`b对象的值=`,b)

// 将a的obj的class改为二年级三班
a.name="李四"
a.obj.class= '二年级三班'
console.log(`修改后a对象的值=`,a)
console.log(`修改后b对象的值=`,b)

结果如下

image-20220706093456196

得出结论:扩展运算符是浅拷贝