js中使用forEach所遇到的坑

记录一下项目中使用forEach时所踩到的坑。

情景：在使用forEach处理数组时，如果动态的往中间添加一条数据，此时只会处理原数组长度所对应的数据，被挤到后面的那条数据不会进行处理。

例如：

const arr = [{ id: 1 }, { id: 2 }]

arr.forEach((item, index, arr) => {
   console.log('index:', index)

   item.name = "王" + item.id
   console.log('arr:', arr)
   if (item.id === 1) {
   arr.splice(index + 1,0, {id: 9})
   }
})

console.log(arr)

//运行结果如下：
// "index": 0
// "arr:" [{ id: 1, name: "王1" }, { id: 2 }]
// "index": 1
// "arr:" [{ id: 1, name: "王1" }, { id: 9, name: "王9" }, { id: 2 }]
// [{ id: 1, name: "王1" }, { id: 9, name: "王9" }, { id: 2 }]

总结：根据打印结果可以看出，forEach执行中数组的长度发生了变化，但是执行时依旧是按照数组原来长度在执行。

解决办法：使用for循环 

const arr = [{ id: 1 }, { id: 2 }];

for (let index = 0; index < arr.length; index++) {
  console.log('index:', index);

  arr[index].name = '王' + arr[index].id;

  if (arr[index].id === 1) {
    arr.splice(index + 1, 0, { id: 9 });
  }
}

console.log("arr:",arr)

// 结果如下：
// "index:" 0
// "index:" 1
// "index:" 2
// "arr:" [{ id: 1, name: "王1" }, { id: 9, name: "王9" }, { id: 2, name: "王2" }]