深度復制具有屬性的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

使用Object.create(proto)怎么樣

var arr = [1,2,3,4];
arr.prop1 = 8;
arr.prop2 = 9;
var newArr = Object.create(arr);

newArr.prop1 = 12;
console.log(arr.prop1) // 8
console.log(newArr.prop1) // 12

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

Answer 2

您正在嘗試混合數組和對象（使數組的行為類似於對象）。
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()分配一個新的數組newArr ，因此它仍然是一個陣列，並且表現得像一個純陣列。

屬性值不會轉移到newArr

如果您仍想繼續使用混合數字/字符串索引序列，克隆它們，請嘗試使用Object.assign()函數。 對於您的情況，這應該是最簡單的方法：

Object.assign（）方法用於將所有可枚舉自身屬性的值從一個或多個源對象復制到目標對象。

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