JS之使用for...of赋值失败的原因分析

原代码为

for (let tab of tabList.value) {const subFormData = subOrderListMap.value[tab.subFormWebUuid];debuggerif (subFormData) {tab.formStatus = "已完成";tab = { ...subFormData, ...tab };}
}

这段代码是在遍历 tabList.value 数组，并尝试根据 tab.subFormWebUuid 从 subOrderListMap.value 中获取对应的数据 subFormData。如果获取到了数据，就会：

1. 将 tab.formStatus 设置为 "已完成"

2. 使用对象扩展运算符将 subFormData 的属性合并到 tab 上

不过这里有一个潜在的问题：在 for...of 循环中直接修改循环变量 tab 并不会改变原数组中的元素。因为 tab 只是原数组元素的一个引用副本，重新赋值 tab 只会改变这个副本，而不会影响原数组。

可以修改为

for (let i = 0; i < tabList.value.length; i++) {const tab = tabList.value[i];const subFormData = subOrderListMap.value[tab.subFormWebUuid];if (subFormData) {// 直接更新原数组中的元素tabList.value[i] = {...subFormData,...tab,formStatus: "已完成",};}
}

这样修改后，原数组中的元素才会被真正更新。