前端js深浅拷贝的区别和实现

JavaScript 中的深拷贝和浅拷贝是对于对象和数组这类引用数据类型而言的。

浅拷贝：只复制对象或数组的引用，而不复制其内部的数据。因此，当原始数据发生变化时，引用指向的值也会发生变化。

深拷贝：在内存中创建一个新的数据，将原始数据的所有属性都复制到新的数据中。因此，当原始数据发生变化时，不会影响深拷贝后的数据。

实现浅拷贝：

1. 使用 Object.assign() 方法

let obj1 = {a: 1, b: 2};
let obj2 = Object.assign({}, obj1);
console.log(obj2); // {a: 1, b: 2}

2. 使用展开运算符（Spread Operator）

let obj1 = {a: 1, b: 2};
let obj2 = {...obj1};
console.log(obj2); // {a: 1, b: 2}

实现深拷贝：

1. 手写递归函数

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

2. 使用 JSON.parse() 和 JSON.stringify()

let obj1 = {a: 1, b: [1, 2, 3], c: {d: 'hello', e: 'world'}};
let obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj2); // {a: 1, b: [1, 2, 3], c: {d: 'hello', e: 'world'}}