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()等是常見的淺拷貝方法，但它們只能複製對象的引用，因此需要注意對源對象和目標對象共享屬性值時的影響。對於深層次的對象或嵌套對象，需要考慮使用深拷貝或第三方庫。