手写 JS 深拷贝

浅拷贝和深拷贝

浅拷贝，obj1 = obj2，改变 obj2 的值时，obj1 随之改变
深拷贝，obj1 = deepClone(obj2) ，改变 obj2 的值时，obj1 不会改变

const obj1 = {
  age: 20,
  name: 'xxx',
  address: {
    city: 'beijing',
  },
  arr: ['a', 'b', 'c'],
};

深拷贝函数

注意判断值类型和引用类型
注意判断是数组还是对象
递归

/**
 * 深拷贝
 * @param obj
 */
function deepClone(obj = {}) {
  if (typeof obj != 'object' || obj == null) {
    // 不是对象或者null，直接返回
    return obj;
  }
  let result;
  if (obj instanceof Array) {
    result = [];
  } else {
    result = {};
  }
  for (let key in obj) {
    // 保证 key 是自身属性而不是原型的属性
    if (obj.hasOwnProperty(key)) {
      //递归拷贝
      result[key] = deepClone(obj[key]);
    }
  }
  return result;
}

深拷贝通过 JSON 对象的 parse 和 stringify

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

两种拷贝的区别

const obj2 = deepClone(obj1);
obj2.address.city = 'shanghai';
console.log(obj1.address.city); //beijing
const obj3 = obj1;
obj3.address.city = 'shenzhen';
console.log(obj1.address.city); //shenzhen

手写 JS 深拷贝 ​

手写 JS 深拷贝