JavaScript浅拷贝

一、什么是浅拷贝

在JavaScript中，浅拷贝是一种将源对象的属性复制到目标对象中的方法。浅拷贝的实现方式有多种，包括直接赋值、Object.assign()、展开运算符、concat()等。浅拷贝会复制对象的引用，而不是对象本身，因此如果源对象和目标对象共享一个属性值，该属性值的更改将会影响到源对象和目标对象。

二、直接赋值

直接赋值是最简单的浅拷贝方法，它将源对象的属性值直接复制到目标对象中。但是，它只适用于简单的对象和数组，并会复制对象的引用。

  const sourceObj = {name: 'Alice', age: 30};
  const targetObj = sourceObj;
  console.log(targetObj); // {name: 'Alice', age: 30}
  targetObj.name = 'Bob';
  console.log(sourceObj); // {name: 'Bob', age: 30}

三、Object.assign()

Object.assign() 方法用于将一个或多个源对象的属性值复制到目标对象中，并返回目标对象。该方法也只能复制对象的引用。

  const sourceObj = {name: 'Alice', age: 30};
  const targetObj = Object.assign({}, sourceObj);
  console.log(targetObj); // {name: 'Alice', age: 30}
  targetObj.name = 'Bob';
  console.log(sourceObj); // {name: 'Alice', age: 30}

四、展开运算符

展开运算符可以用于将对象或数组中的属性值复制到一个新对象或数组中。但是，它只能复制对象的引用。

  const sourceObj = {name: 'Alice', age: 30};
  const targetObj = {...sourceObj};
  console.log(targetObj); // {name: 'Alice', age: 30}
  targetObj.name = 'Bob';
  console.log(sourceObj); // {name: 'Alice', age: 30}

五、concat()

对于数组，可以使用concat()将一个数组的所有元素复制到一个新数组中。但是，它只能复制数组中的元素，而不能复制对象。

  const sourceArr = [1, 2, 3];
  const targetArr = sourceArr.concat();
  console.log(targetArr); // [1, 2, 3]
  targetArr[0] = 4;
  console.log(sourceArr); // [1, 2, 3]

六、浅拷贝的局限性

由于浅拷贝只复制了对象的引用，因此在处理复杂对象或嵌套对象时，需要考虑其他方法，例如深拷贝或使用一些第三方库。

七、深拷贝

深拷贝是一种将源对象的所有属性及其值复制到新对象中的方法，它不会复制对象的引用。但是，由于深拷贝涉及到递归，因此可能会对性能造成影响。

  function deepClone(obj) {
    if (typeof obj !== 'object' || obj === null) return obj;
    const newObj = obj instanceof Array ? [] : {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        newObj[key] = deepClone(obj[key]);
      }
    }
    return newObj;
  }

  const sourceObj = {name: 'Alice', age: 30};
  const targetObj = deepClone(sourceObj);
  console.log(targetObj); // {name: 'Alice', age: 30}
  targetObj.name = 'Bob';
  console.log(sourceObj); // {name: 'Alice', age: 30}

八、第三方库

第三方库可以提供更强大的浅拷贝和深拷贝功能，例如lodash的clone()、cloneDeep()和merge()方法。

  const sourceObj = {name: 'Alice', age: 30};
  const targetObj = _.clone(sourceObj);
  console.log(targetObj); // {name: 'Alice', age: 30}
  targetObj.name = 'Bob';
  console.log(sourceObj); // {name: 'Alice', age: 30}

  const sourceObj = {name: 'Alice', age: 30, address: {city: 'Shanghai', zipcode: 200000}};
  const targetObj = _.cloneDeep(sourceObj);
  console.log(targetObj); // {name: 'Alice', age: 30, address: {city: 'Shanghai', zipcode: 200000}}
  targetObj.address.city = 'Beijing';
  console.log(sourceObj); // {name: 'Alice', age: 30, address: {city: 'Shanghai', zipcode: 200000}}

  const sourceObj = {name: 'Alice', age: 30, phone: ['13812345678', '13987654321']};
  const targetObj = _.merge({}, sourceObj, {phone: ['13600000000']});
  console.log(targetObj); // {name: 'Alice', age: 30, phone: ['13600000000', '13987654321']}
  console.log(sourceObj); // {name: 'Alice', age: 30, phone: ['13812345678', '13987654321']}

九、总结

JavaScript中的浅拷贝是一种将源对象的属性复制到目标对象中的方法。直接赋值、Object.assign()、展开运算符、concat()等是常见的浅拷贝方法，但它们只能复制对象的引用，因此需要注意对源对象和目标对象共享属性值时的影响。对于深层次的对象或嵌套对象，需要考虑使用深拷贝或第三方库。