JavaScript在map函数内向数组中间指定位置插入元素异常问题求解

问题根因 #

• 你在使用map遍历section.content的过程中调用splice直接修改了原数组，插入元素后原数组长度增加，原本匹配到的report对象会被挤到当前索引的下一位，当map遍历到下一个索引时，会再次匹配到同一个report，触发第二次插入，就会出现重复插入相同元素的问题。
• map的设计初衷是生成新数组，你没有接收map返回的结果，反而用它执行带副作用的修改操作，属于用法不当。

修复方案 #

如果可以直接修改原数组，推荐先找到目标索引后单独执行插入，不要在遍历过程中修改原数组，示例代码如下：

const addItemToLevelTwoArray = (uniqueID, arrayID) => {
  const reportObject = {
    id: arrayID,
    title: '',
  }
  
  data.forEach(section => {
    // 先找到匹配项的索引，再执行插入
    const matchIndex = section.content.findIndex(report => report.id === uniqueID)
    if(matchIndex !== -1) {
      section.content.splice(matchIndex, 0, reportObject)
    }
  })
}

如果需要不修改原数组、返回全新的数组对象，可以使用无副作用的写法：

const addItemToLevelTwoArray = (uniqueID, arrayID, originalData) => {
  const reportObject = {
    id: arrayID,
    title: '',
  }

  return originalData.map(section => {
    const matchIndex = section.content.findIndex(report => report.id === uniqueID)
    if (matchIndex === -1) return {...section}
    // 生成新的content数组，不修改原数组
    const newContent = [
      ...section.content.slice(0, matchIndex),
      reportObject,
      ...section.content.slice(matchIndex)
    ]
    return {
      ...section,
      content: newContent
    }
  })
}

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