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

原代码为

for (let tab of tabList.value) {
  const subFormData = subOrderListMap.value[tab.subFormWebUuid];
  debugger
  if (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: "已完成",
    };
  }
}

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