如何用单条语句实现两个数组映射？代码优化求助

规范问题表述： #

我需要优化两段存在冗余的代码，它们的核心逻辑都是调用buildCard(e)处理数组元素，但会根据e.featured的布尔值将结果分别存入featuredProjects和openSourceProjects。当前写法需要遍历数组两次，且逻辑重复，希望能通过单条语句完成相同功能。原代码如下：

const featuredProjects = allProjects.map((e) => {
  if (e.featured == true) {
    return (
      buildCard(e)
    );
  }
});

const openSourceProjects = allProjects.map((e) => {
  if (e.featured == false) {
    return (
      buildCard(e)
    );
  }
});

优化方案 #

可以使用Array.reduce()方法，仅遍历一次数组即可同时构建两个目标数组，彻底消除冗余：

const { featuredProjects, openSourceProjects } = allProjects.reduce((acc, e) => {
  const card = buildCard(e);
  e.featured ? acc.featuredProjects.push(card) : acc.openSourceProjects.push(card);
  return acc;
}, { featuredProjects: [], openSourceProjects: [] });

优化细节说明 #

• 仅遍历数组一次，对比原方案的两次遍历，性能更优
• 每个元素仅调用一次buildCard(e)，避免重复执行相同处理逻辑
• 直接判断e.featured本身（布尔类型无需和true/false显式比较），代码更简洁
• 通过对象解构直接获取结果数组，保持变量声明的清晰性
• 原代码使用map会生成包含undefined的数组（不满足条件时无返回值），而reduce方案只会收集有效结果，避免无效元素

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