Javascript（Typescript）嵌套for循環更新所有元素，而不僅僅是內部循環

Question

在Typescript中使用for-loop時，出於某種原因for循環會更新整個數組。下面是代碼：

UpdatesToAllSelectedTabs() { 

    if (this.selectedOuterTabs[1]) { 
     this.outerTabs[1].InnerTabs = this.outerTabs[this.referencedOuterTab].InnerTabs; 
     for (let j = 0; j < this.outerTabs[1].InnerTabs.length; j++) { 
      this.outerTabs[1].InnerTabs[j].OuterTabId = this.outerTabs[1].Id; 
     } 
    } 
} 

代碼的第一個版本還具有外環，但它也不會與固定外指數工作正確（上面的例子中= 1）。 這段代碼的作用如下：

如果選中， 將引用的outerTab [0]中的innerTab複製到outerTab [1]。沒關係。 然後， 它將來自outerTabs [1]和outerTabs [0]的... innerTabs [j] .OuterTabId設置爲this.outerTabs [1] .Id。

有人能解釋一下這裏發生了什麼嗎？爲什麼outerTab [0]也更新了？

Answer 1

從這一行：

this.outerTabs[1].InnerTabs = this.outerTabs[this.referencedOuterTab].InnerTabs; 

似乎this.outerTabs[1]被引用相同的對象this.outerTabs[this.referencedOuterTab]，所以如果你改變一個更改另一個爲好。

問題的一個簡單的例子：

let arr1 = [{ key: "value1" }, { key: "value2" }, { key: "value3" }]; 
let arr2 = new Array(...arr1); 

console.log(arr1[1]); // {key: "value2"} 
console.log(arr2[1]); // {key: "value2"} 

arr2[1].key = "value2.2" 

console.log(arr1[1]); // {key: "value2.2"} 
console.log(arr2[1]); // {key: "value2.2"} 

（code in playground）

爲了解決這個問題，你需要使用Object.assign分配不同的實例，例如：

this.outerTabs[1].InnerTabs = Object.assign({}, this.outerTabs[this.referencedOuterTab].InnerTabs); 

在我的例子：

let arr1 = [{ key: "value1" }, { key: "value2" }, { key: "value3" }]; 
let arr2 = new Array(Object.assign({}, arr1[0]), Object.assign({}, arr1[1]), Object.assign({}, arr1[2])); 

console.log(arr1[1]); // {key: "value2"} 
console.log(arr2[1]); // {key: "value2"} 

arr2[1].key = "value2.2" 

console.log(arr1[1]); // {key: "value2"} 
console.log(arr2[1]); // {key: "value2.2"} 

（code in playground）