js深拷贝浅拷贝

#每日学习前端#

浅拷贝

只拷贝当前对象的属性 两个对象指向同一个地址 修改一个对象的属性，另一个对象会跟着一起改变

- Object.assign

- Array.prototype.slice

- Array.prototype.concat

- 扩展运算符

// 浅拷贝案例
let a = { name: "张三" };
let b = { age: 18 };
let c = Object.assign(a, b);
console.log("c1", c); //{ name: '张三', age: 18 }

// 修改a的属性 c的属性也会跟着改变
a.name = "李四";
a.age = 19;
console.log("c2", c); //{ name: '李四', age: 19 }

 

深拷贝

开辟新的栈 两个对象完全相同 对应不同的地址 修改一个对象的属性，另一个对象不会跟着一起改变

- _cloneDeep() lodash 深拷贝函数

- jQuery.extend()

- JSON.stringify()存在弊端 undefined symbol 函数

- 手写循环递归

 

// 深拷贝案例
let d = {
  name: "Jack",
  like: "apple",
  eat: undefined,
  fn: function () {},
  nn: null,
  test: Symbol("test"),
};
let e = JSON.parse(JSON.stringify(d)); 
console.log("e1", e);// { name: 'Jack', like: 'apple', aa: null }
// 说明undefined 函数 null Symbol类型无法被拷贝

d.name = "popop";
console.log("e2", e); // { name: 'Jack', like: 'apple', aa: null }

// 手写深拷贝函数
let f = {
    name: "Jack",
    like: "apple",
    eat: undefined,
    fn: function () {},
    nn: null,
    test: Symbol("test"),
};
function deepCopy(data) {
   // 判断当前参数是否是复杂数据Object类型
  if (data instanceof Object) {
    let copy = {};
    if (data instanceof Array) {
      copy = [];
    }
    for (const key in data) {
        // 如果属性中有复杂数据Object类型 进行递归循环
      if (data[key] instanceof Object) {
        copy[key] = deepCopy(data[key]);
      } else {
        copy[key] = data[key];
      }
    }
    return copy;
  } else {
    // 基本类型直接赋值
    return data;
  }
}

console.log(deepCopy(f));

不积跬步，无以至千里；不积小流，无以成江海。奥利给~