JS forEach遍历数组仅执行2次 id匹配异常delete标记错误
问题根因
核心问题是bin_tierings和data_tierings指向了同一个数组引用(大概率是之前赋值时直接写了bin_tierings = data_tierings,没有做拷贝,两个变量指向同一块内存地址)。
你在遍历data_tierings的过程中调用splice修改bin_tierings,本质是在修改正在被forEach遍历的原数组:
- forEach是按照索引递增的顺序遍历元素,遍历过程中如果原数组被splice删除元素,后续元素会往前移位,导致索引错位
- 遍历到第2次之后,下一个要访问的索引已经超过了被删短后的数组长度,遍历直接提前终止,这就是你看到循环只执行2次的原因
- 没被遍历到的2个元素残留在数组中,最后被第二个逻辑标记为
delete:1,和你得到的异常结果完全吻合。
修复方案
不要在遍历过程中修改原数组,遍历前先对bin_tierings做浅拷贝,所有匹配、删除操作都在拷贝出来的临时数组上进行即可:
// 先做浅拷贝,避免修改原数组影响遍历 const binToProcess = bin_tierings ? [...bin_tierings] : []; if (data_tierings) { data_tierings.forEach((dt) => { let idxMissionTier = -1; if (binToProcess.length) { idxMissionTier = binToProcess.findIndex((bin) => bin.id === dt.id); } payload.tierings.push({ id: idxMissionTier !== -1 ? binToProcess[idxMissionTier].id : 0, delete: 0, target_amount: dt.target_amount, reward_amount: dt.reward_amount }); if (idxMissionTier !== -1) { // 操作拷贝后的数组,不会影响原数组遍历 binToProcess.splice(idxMissionTier, 1); } }); } // 最后处理拷贝数组中剩下的需要删除的元素 binToProcess.forEach((dt) => { payload.tierings.push({ id: dt.id, delete: 1, target_amount: dt.target_amount, reward_amount: dt.reward_amount }); });
可选优化方案
如果数组数据量较大,还可以用Map做id映射,避免多次findIndex遍历,性能更好,也完全不会涉及原数组修改问题:
const binMap = new Map(); if (bin_tierings) { bin_tierings.forEach(item => binMap.set(item.id, item)); } if (data_tierings) { data_tierings.forEach(dt => { const exist = binMap.get(dt.id); payload.tierings.push({ id: exist ? exist.id : 0, delete: 0, target_amount: dt.target_amount, reward_amount: dt.reward_amount }); if (exist) binMap.delete(dt.id); }); } // 剩下的map项就是需要删除的 binMap.forEach(dt => { payload.tierings.push({ id: dt.id, delete: 1, target_amount: dt.target_amount, reward_amount: dt.reward_amount }); });
补充:如果确认两个数组不是同一个引用,那要额外检查id的类型是否一致,比如一个是数字
189一个是字符串"189",会导致===严格匹配失败,不过这种情况不会出现forEach只执行2次的现象,你的异常100%是遍历过程中修改原数组导致的。
内容的提问来源于stack exchange,提问作者hutp3a
相关产品推荐
相关产品推荐

