寻求更高效的数组扁平化与目标对象提取实现方案

需求背景 #

需要从嵌套结构的数组中提取目标对象到新数组，当前实现方式为三次链式操作：先通过map获取courseEnrolled数组，再用flat(1)扁平化，最后再次map提取course对象。现寻求更高效、简洁的实现方案。

原始实现代码 #

filter1 = myArray.map(a => a.courseEnrolled);
filter2 = filter1.flat(1);
filter3 = filter2.map(a => a.course);

相关数组结构 #

const myArray = [
    {
      name: "john",
      courseEnrolled: [
        {
          course: {
            name: "react",
          },
        },
        {
          course: {
            name: "java",
          },
        },
      ],
    },
    {
      name: "Doe",
      courseEnrolled: [
        {
          course: {
            name: "java",
          },
        },
        {
          course: {
            name: "angular",
          },
        },
      ],
    },
  ];

预期输出 #

// 提取所有course对象
const expectedArray = [
    { name: "react" },
    { name: "java" },
    { name: "java" },
    { name: "angular" }, // 注：原示例此处笔误为react，修正为对应结构中的angular
  ];

// 去重后的结果
const uniqueExpectedArray = [
    { name: "react" },
    { name: "java" },
    { name: "angular" },
  ];

优化方案 #

1. 用flatMap简化提取流程 #

flatMap可同时完成映射和扁平化操作，一步生成目标数组，避免创建多个中间数组，提升效率和代码简洁度：

const expectedArray = myArray.flatMap(user => 
  user.courseEnrolled.map(enrollment => enrollment.course)
);

优势：

• 仅创建一次结果数组，减少内存占用
• 代码逻辑连贯紧凑，可读性更强
• 避免多次数组遍历，性能优于原方案

2. 提取并去重的实现 #

如果需要得到去重后的数组，可结合以下两种方式实现：

方法一：利用Map的键唯一性

const uniqueExpectedArray = Array.from(
  new Map(
    myArray.flatMap(user => user.courseEnrolled.map(e => e.course))
           .map(course => [course.name, course])
  ).values()
);

方法二：用reduce过滤重复项

const uniqueExpectedArray = myArray.flatMap(user => 
  user.courseEnrolled.map(enrollment => enrollment.course)
).reduce((acc, curr) => {
  if (!acc.some(item => item.name === curr.name)) {
    acc.push(curr);
  }
  return acc;
}, []);

说明：两种方法均以course.name作为去重依据，可根据实际需求调整判断条件。

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