使用展开运算符克隆带有数组的对象

Question

如何使用新的展开运算符克隆一个包含数组的对象？

示例对象：

vehicles: { 
  cars:  [1, 2],
  boats: [3, 4]
}

我想要一个包含数组的新对象。在那个新对象中，我希望能够在不引用和影响车辆对象的情况下更改或添加到数组。

Answer 1

Object.assign 和传播运算符创建浅克隆，只有一层深，超出它们被引用的深度。我找到的最好方法（感谢 MDN）是使用 JSON 函数来创建一个真正的克隆。

let vehicles = { 
  cars:  [1, 2],
  boats: [3, 4],
};

let test = JSON.parse(JSON.stringify(vehicles));

console.log(vehicles, test);

test.cars[0] = 5;
vehicles.cars[0] = 7;

console.log(vehicles, test);

Answer 2

如果您追求性能，使用 JSON.parse(JSON.stringify(object)) 进行深拷贝和对象并不是最好的方法，而是使用像这样的深拷贝：

let x1 = {
  numbers: {
    number: 1
  }
}
let y1 = copy(x1)
x1.numbers.number++
  console.log(x1)
console.log(y1)

function copy(aObject) { // Deep Clone Object from 
  if (!aObject) {
    return aObject;
  }

  let v;
  let bObject = Array.isArray(aObject) ? [] : {};
  for (const k in aObject) {
    v = aObject[k];
    bObject[k] = (typeof v === "object") ? copy(v) : v;
  }

  return bObject;
}

使用展开运算符克隆带有数组的对象

Clone Object with arrays using spread operator

javascript

spread-syntax