JS循环遍历数组时满足条件如何在指定位置插入新元素

问题原因 #

你用forEach遍历原数组同时调用splice插入元素的写法失效，是因为forEach在遍历启动时就确定了要遍历的元素索引范围，后续数组长度变化不会更新遍历逻辑，会出现元素跳过、重复遍历的问题，而且直接修改原数组的行为在大多数业务场景下也不推荐，容易引发其他副作用。

最优实现方案 #

推荐直接构建新结果数组的方式，不需要修改原数组，时间复杂度为O(n)，逻辑清晰无副作用：

const exampleArray = [
  {item: 1, count: 5},
  {item: 2, count: 20},
  {item: 3, count: 10},
  {item: 6, count: 9},
  {item: 4, count: 5}
]

let totalCount = 0
let newItemIndex = 1
const resultArray = []

for (const item of exampleArray) {
  // 先将当前元素加入结果数组
  resultArray.push(item)
  totalCount += item.count

  if (totalCount >= 10) {
    // 按需求生成插入项的文本内容
    let newItemText
    if (newItemIndex === 1) {
      newItemText = 'new item 1 as count is over 10'
    } else if (newItemIndex === 2) {
      newItemText = 'new item 2 as count is equal to 10'
    } else {
      newItemText = 'new item 3 as count is > 10, previous two counts (9 + 5 )'
    }
    // 插入新元素
    resultArray.push({
      item: newItemText,
      count: 0
    })
    // 重置累计值，新元素序号自增
    totalCount = 0
    newItemIndex++
  }
}

如果确实有修改原数组的需求，可以改用手动控制索引的普通for循环，避免索引错乱：

// 原地修改原数组的方案
let count = 0
for (let i = 0; i < exampleArray.length; i++) {
  const item = exampleArray[i]
  count += item.count
  if (count >= 10) {
    exampleArray.splice(i + 1, 0, {item: 'item to be added', count: 0})
    count = 0
    // 插入新元素后跳过该插入项，避免重复遍历
    i++
  }
}

优先选择构建新数组的方案，原地修改方案仅在有特殊要求时使用。

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