js深拷贝与浅拷贝

2020-07-23

字数统计: 680字 | 阅读时长: 2分

js 深拷贝与浅拷贝

深拷贝与浅拷贝的区别，实现深拷贝的几种方法是面试必问考点
区分两者很容易,简单的来说,假设 b 复制了 a,当修改 a 的值时,b 的值也发生变化,这就是浅拷贝
如果 b 没有发生改变就是深拷贝
浅拷贝例子

let A = [0, 1, 2, 3];
let B = A;
A[0] = 4;
console.log(A, B);

基本数据类型与引用数据类型

1 基本类型–名值存储在栈内存中 let a =1

当 b=a 复制时,栈内存会重新开辟一个内存

所以此时修改 a=2，对 b 并不会造成影响

2 引用数据类型–名存在栈内存中，值存在于堆内存中

当 b=a 进行拷贝时，其实复制的是 a 的引用地址，而并非堆里面的值。

当我们 a[0]=1 时进行数组修改时，由于 a 与 b 指向的是同一个地址，所以自然 b 也受了影响，这就是所谓的浅拷贝了。

要是在堆内存中也开辟一个新的内存专门为 b 存放值，就像基本类型那样就达到深拷贝效果

深拷贝方法

使用递归的方式实现深拷贝

function deepClone(obj) {
  //根据传入参数定义为数组还是镀锡
  let objClone = Array.isArray(obj) ? [] : {};
  if (obj && typeof obj === "object") {
    //for in以任意顺序遍历一个对象的除Symbol以外的可枚举属性。
    for (key in obj) {
      //返回一个布尔值，用来判断某个对象是否含有指定的属性
      if (obj.hasOwnProperty(key)) {
        ////判断ojb子元素是否为对象，如果是，递归复制
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}
let a = [
  {
    name: "张三",
    age: 18,
  },
  2,
  3,
  4,
];
let b = deepClone(a);
a[0] = 2;
console.log(a, b);

跟预想的一样，现在 b 脱离了 a 的控制，不再受 a 影响了

通过 JSON 对象实现深拷贝

缺点:
JSON 对象实现深拷贝的一些问题.无法实现对对象中方法的深拷贝

function deepClone2(obj) {
  var _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
  return objClone;
}

通过 Object.assign()拷贝

缺点:
当对象只有一级属性为深拷贝；
当对象中有多级属性时，二级属性后就是浅拷贝

let obj = {
  name: "张三",
  info: {
    age: 18,
    sex: "男",
  },
};
// 将所有可枚举属性的值从一个或多个源对象复制到目标对象。 它将返回目标对象。
let resobj = Object.assign({}, obj);
obj["name"] = "李四";
obj["info"]["sex"] = "女";
obj["info"]["age"] = "30";
console.log(obj, resobj);