在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从引用的externalTab [0]复制到externalTab [1]。没关系
然后,
它将... innerTabs [j] .OuterTabId从externalTabs [1]和externalTabs [0]都设置为this.outerTabs [1] .Id。

有人可以解释一下这里发生了什么吗?为什么outerTab [0]也要更新?

最佳答案

从这一行:

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

09-10 00:04
查看更多