在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)