Javascript（Typescript）嵌套的for循环更新所有元素，而不仅仅是内部循环

Question

在 Typescript 中使用 for 循环时，由于某种原因，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）一起正常工作。 这段代码的作用如下：

如果选择， 将innerTabs 从引用的outerTab[0] 复制到outerTab[1]。没关系。 然后， 它将 ...innerTabs[j].OuterTabId 从 outerTabs[1] 和 outerTabs[0] 设置为 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)