前端浅拷贝和深拷贝

浅拷贝和深拷贝的区别：

• 浅拷贝只复制对象或数组的引用，不会创建一个新的对象或数组，因此原对象和拷贝后的对象会指向同一块内存空间。当原对象发生改变时，拷贝后的对象也会随之改变。

• 深拷贝则会创建一个全新的对象或数组，并将原对象或数组中的所有子对象或子数组递归复制到新对象或数组中。因此，当原对象或数组发生改变时，拷贝后的对象或数组不会受到影响。

浅拷贝的常见方法：

• 1，Object.assign()方法

const obj = { a: 1, b: { c: 2 } };
const newObj = Object.assign({}, obj);
console.log(obj === newObj) // false
console.log(obj == newObj) // false
console.log(newObj) 
// {
//    "a": 1,
//    "b": {
//       "c": 2
//   }
//}
// 修改obj的普通字符串
obj.a = 2
console.log(newObj)
// {
//    "a": 1,  // 因为是直接赋值，不会改变
//    "b": {
//       "c": 2
//   }
//}
// 修改obj的对象
obj.b.c = 3
console.log(newObj)
// {
//    "a": 1,
//    "b": {
//       "c": 3 // 因为引用的是地址，所以原数据改变，浅拷贝引用对象地址对应的数据也改变
//   }
//}

• 2，扩展语法

const obj = { a: 1, b: { c: 2 } };
const newObj = {...obj};

• 3, 数组的slice()方法、concat()方法

const arr = [1,2,[3,4]];
const newArr = arr.slice();
const newArr2 = arr.concat();

深拷贝的常见方法：

• 1,JSON.parse(JSON.stringify(obj))方法

const obj = { a: 1, b: { c: 2 } };
const newObj = JSON.parse(JSON.stringify(obj));
console.log(obj === newObj) // false
console.log(obj == newObj) // false
console.log(newObj) 
// {
//    "a": 1,
//    "b": {
//       "c": 2
//   }
//}
// 修改obj的普通字符串
obj.a = 2
console.log(newObj)
// {
//    "a": 1, // 因为是直接赋值，不会改变
//    "b": {
//       "c": 2
//   }
//}
// 修改obj的对象
obj.b.c = 3
console.log(newObj)
// {
//    "a": 1,
//    "b": {
//       "c": 2 // 深拷贝这里不是引用地址，所以原数据发生改变不会受到影响
//   }
//}

注意：该方法虽然方便，但是会有一些限制，比如不能复制函数、RegExp对象等等，同时还会忽略undefined、Symbol类型的属性，不适用于所有场景。

• 2，递归复制

function deepClone(obj) {
  let newObj = Array.isArray(obj) ? [] : {};
  if (obj && typeof obj === "object") {
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        newObj[key] = typeof obj[key] === "object" ? deepClone(obj[key]) : obj[key];
      }
    }
  }
  return newObj;
}

const obj = { a: 1, b: { c: 2 } };
const newObj = deepClone(obj);

推荐使用方法：

浅拷贝：推荐使用扩展语法, {…obj}。

深拷贝：如果拷贝的对象比较简单，可以使用JSON.parse(JSON.stringify(obj))方法。如果需要处理复杂的对象，推荐使用递归复制的方式。