javascript - 具有属性的深层复制 Javascript 数组

Question

使用 .slice()，我可以深度复制原始类型的 Javascript 数组，例如:

var arr = [1,2,3,4];
var newArr = arr.slice();
newArr.push(5);
console.log(arr); // [1,2,3,4]
console.log(newArr); // [1,2,3,4,5]

但是，如果我像这样向 arr 添加一个属性:

arr.prop1 = 5;

并做同样的事情:

var arr = [1,2,3,4];
arr.prop1 = 8;
arr.prop2 = 9;
var newArr = arr.slice();
newArr.push(5);
console.log(arr); // [1, 2, 3, 4, prop1: 9, prop2: 8]
console.log(newArr); //  [1, 2, 3, 4, 5]

属性值不会转移到 newArr

我考虑过不使用 .slice() 而是遍历 arr 的属性值，而是将它们分配给 newArr，使用:

for (var key in arr) {
  if (arr.hasOwnProperty(key)) {
    newArr[key] = arr[key];
  }
}
console.log(arr); // [1, 2, 3, 4, prop1: 9, prop2: 8]
console.log(newArr); //  [1, 2, 3, 4, 5, prop1: 9, prop2: 8]

这将是深度复制这些具有属性的数组的最快方法吗？我可以使用 .slice() 或其他数组方法以更简单或更简洁的方式执行此操作吗？我正在执行此操作数万次，并希望它尽可能干净高效

Answer 1

您正在尝试混合数组和对象(以使数组的行为像对象)。
JavaScript 数组 具有数字 索引项。
JavaScript 对象 具有字符串 索引项。

数组有一个 length 属性，它告诉数组中有多少项，并在您向数组添加或删除项时自动更新。
但是 ...

var arr = [1,2,3,4], newArr = arr.slice();
arr.prop1 = 7;

console.log(arr.length);

输出是 4，尽管您希望它是 5。
但是 arr.prop1 = 7 不是实际上添加到数组。
设置一个字符串参数添加到底层对象。
length 属性仅在您将项目添加到数组时被修改，而不是底层对象。
表达式 newArr = arr.slice() 分配一个新的array 到 newArr，所以它仍然是一个数组并且表现得像一个纯数组。

The property values do not carry over to newArr

如果您仍想继续使用混合数字/字符串索引序列，克隆它们，请尝试使用 Object.assign() 函数。对于您的情况，这应该是最简单的方法:

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object.

console.log(Object.assign(newArr, arr));

输出:

[1, 2, 3, 4, prop1: 7]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign