Javascript - 在 map 函数内的数组中间添加项目

Question

我正在尝试在 map 函数内的数组内的特定索引中添加一个项目，但它的行为一直异常。这是它的代码

const addItemToLevelTwoArray= (uniqueID, arrayID )=> {
  const reportObject = {
    id:arrayID,
    title:'',
  }
  
  data.map(section=>{
    section.content.map((report, reportIndex)=>{
      if(report.id===uniqueID){
        section.content.splice(reportIndex, 0, reportObject);
      }
      return report;
    })
   return section;
  })
}

这是一支工作笔 - https://codepen.io/raufabr/pen/vYZYgOV?editors=0011

预期的行为是它会在特定索引中插入一个对象，就在 ID 匹配的对象之上。

但是，它的行为很奇怪，有时我会添加 2 个项目而不是一个。

任何有关我正在做的事情的提示都将不胜感激!我知道我很接近，但我已经坚持了一段时间，无法弄清楚我做错了什么!

Answer 1

前言:您错误地使用了 map。如果您不使用 map 构建并返回的数组，则没有理由使用它；只需使用循环或 forEach。更多在我的帖子中 here .使用老式 for 循环的一个原因是您可以控制迭代，这很重要，因为...

However, it's acting weirdly and sometimes I'm getting 2 items being added instead of one.

那是因为您要插入由 map 循环的数组，所以在下一次传递时，它会选取您要添加的条目。

如果你做一个简单的循环，你可以很容易地避免这种情况，方法是在插入时增加索引，或者通过向后循环；这是循环向后的方法:

const addItemToLevelTwoArray = (uniqueID, arrayID) => {
    const reportObject = {
        id: arrayID,
        title: "",
    };
  
    for (const section of data) {
        for (let reportIndex = section.content.length - 1; reportIndex >= 0; --reportIndex) {
            const report = section.content[reportIndex];
            if (report.id === uniqueID) {
                 section.content.splice(reportIndex, 0, reportObject);
            }
        }
    }
};

因为我们正在向后循环，所以我们不会在下一次传递中选取刚刚添加的条目。

因为外循环没有那个问题，所以我使用了更方便的for-of。

---

既然你询问了map，如果你做使用map返回的数组，你可以通过返回一个包含两个数组的数组来做到这一点条目，然后调用 flat 数组 map 构建。 (这仅在数组不包含数组的情况下有效，因为它们会被展平。)这是很常见的，它被组合在一个函数中:flatMap。这不是我会做的(我会做一个循环)，但它肯定是可行的。坚持使用 forEach 和 flatMap 而不是使用 for-of 和 for:

const addItemToLevelTwoArray = (uniqueID, arrayID) => {
    const reportObject = {
        id: arrayID,
        title: "",
    }
  
    data.forEach(section => {
        section.content = section.content.flatMap(report => {
            if (report.id === uniqueID) {
                // Return the new one and the old one
                return [reportObject, report];
            }
            // Return just the old one
            return report;
        });
    });
};

假设可以修改 section 对象。如果不是，Alberto Sinigaglia's answer显示创建一个新的替换对象，这在某些情况下很方便。