Angular中For循环无法传递ID问题求助

问题现状 #

需要将 res 数组中每个元素的 id 按顺序赋值给 varName 数组对应元素的 ArrayListID 字段，但最终仅前两个元素赋值成功，后两个元素的 ArrayListID 仍为0。

现有数据情况：

• varName 数组最终结果：

  0: {id: 0, ArrayListID: 809, VarName: "TEST001A"}
  1: {id: 0, ArrayListID: 806, VarName: "TEST002A"}
  2: {id: 0, ArrayListID: 0, VarName: "TEST001B"}
  3: {id: 0, ArrayListID: 0, VarName: "TEST002B"}
  

• res 数组输出的 id 值：809、809、806、806

核心原因分析 #

1. 循环变量作用域问题：使用 var 声明循环变量 i，var 是函数级作用域，虽此处循环为同步执行，但存在潜在变量污染风险，可能导致索引匹配异常。
2. 数组长度不匹配或结构不符：若 res 实际长度小于 varName，或 res 元素并非预期的带 id 属性对象，会导致后续索引赋值失败。

解决方案 #

方案1：修正循环变量作用域 #

将循环中的 var i 改为 let i，利用块级作用域确保索引正确匹配：

for(let i = 0; i < res.length; i++){
  this.varName[i].ArrayListID = res[i].id;
}

方案2：校验数组长度并兼容赋值 #

添加长度校验，确保覆盖所有 varName 元素，同时处理 res 索引不存在的情况：

// 先打印数组长度，确认是否匹配
console.log('res长度:', res.length, 'varName长度:', this.varName.length);

for(let i = 0; i < this.varName.length; i++){
  // 存在对应res元素则赋值，否则保留原数值
  this.varName[i].ArrayListID = res[i]?.id ?? this.varName[i].ArrayListID;
}

方案3：确认res结构并调整赋值逻辑 #

若 res 元素直接是数值（而非带 id 属性的对象），修改赋值逻辑：

for(let i = 0; i < this.varName.length; i++){
  this.varName[i].ArrayListID = res[i] ?? 0;
}

方案4：使用数组映射简化代码 #

用 map 方法替代循环，代码更简洁且不易出错：

this.varName = this.varName.map((item, index) => ({
  ...item,
  ArrayListID: res[index]?.id ?? item.ArrayListID
}));

内容的提问来源于stack exchange，提问作者Mitch