使用Array.map()函数返回null的问题排查

尝试用Array.map()从嵌套JavaScript对象中提取所有讲座名称，结果输出null，预期是得到指定课程下所有章节的讲座名称列表。

目标对象 #

export const Course = [
  {
    course_id: "001-TTE-ADIT",
    course_description:"XXXX",
    course_title: "XXXX",
    course_faculty: "XXXX",
    course_duration: "XXXX",
    course_lectures_count: "XXXX",
    course_fees: XXXX,
    course_section: [
      {
        section_id: "001-TTE-ADIT-S01",
        section_name: "XXXX",
        section_description:
          "TXXXX.",
        section_duration: 3,
        section_lecture_count: 3,
        section_lectures: [
          {
            lecture_id: "001-TTE-ADIT-S01-LE01",
            lecture_name: "XXXX",
            lecture_description:
              "XXXX.",
            lecture_faculty: "XXXX",
            lecture_duration: 1,
            lecture_link: "#",
            lecture_notes: [
              {
                note_title: "XXXX",
                note_link: "#",
              },
              {
                note_title: "XXXX",
                note_link: "#",
              },
              {
                note_title: "XXXX",
                note_link: "#",
              },
              {
                note_title: "XXXX",
                note_link: "#",
              },
            ],
          },
          {
            lecture_id: "001-TTE-ADIT-S01-LE02",
            lecture_name: "XXXX",
            lecture_description:
              "XXXX.",
            lecture_faculty: "XXXX",
            lecture_duration: 0.5,
            lecture_link: "#",
            lecture_notes: [
              {
                note_title: "XXXX",
                note_link: "#",
              },
            ],
          },
        ],
      },
      {
        section_id: "001-TTE-ADIT-S02",
        section_name: "XXXX",
        section_description:
          "XXXX",
        section_duration: 5,
        section_lecture_count: 5,
        section_lectures: [
          {
            lecture_id: "001-TTE-ADIT-S00-LE03",
            lecture_name: "XXXX",
            lecture_description:
              "XXXX",
            lecture_faculty: "XXXX",
            lecture_duration: 1,
            lecture_link: "#",
            lecture_notes: [
              {
                note_title: "XXXX",
                note_link: "#",
              },
              {
                note_title: "XXXX",
                note_link: "#",
              },
              {
                note_title: "XXXX",
                note_link: "#",
              },
              {
                note_title: "XXXX",
                note_link: "#",
              },
            ],
          },
          {
            lecture_id: "001-TTE-ADIT-S00-LE04",
            lecture_name: "XXXX",
            lecture_description:
              "XXXX",
            lecture_faculty: "XXXX",
            lecture_duration: 1,
            lecture_link: "#",
            lecture_notes: [
              {
                note_title: "XXXX",
                note_link: "#",
              },
            ],
          },
          {
            lecture_id: "001-TTE-ADIT-S00-LE05",
            lecture_name: "XXXX",
            lecture_description:
              "XXXX",
            lecture_faculty: "XXXX",
            lecture_duration: 1,
            lecture_link: "#",
            lecture_notes: [
              {
                note_title: "XXXX",
                note_link: "#",
              },
              {
                note_title: "XXXX",
                note_link: "#",
              },
              {
                note_title: "XXXX",
                note_link: "#",
              },
              {
                note_title: "XXXX",
                note_link: "#",
              },
            ],
          },
        ],
      },
    ],
  },
];

原错误函数 #

import { Course } from "../../Data/Courses";

export const getListLectures = async () => {
  let lecture_list = [];

  lecture_list = Course.map((course) => {
    course.course_section?.map((section) => {
      section.section_lectures?.map((lecture) => {
        lecture_list.push(lecture?.lecture_name);
      });
    });
  });

  return lecture_list;
};

问题分析 #

1. 错误使用map函数：Array.map()的核心是返回新数组，但你的回调函数没有任何return语句，导致Course.map()返回[undefined]（因为Course数组只有一个元素），之后你把lecture_list重新赋值为这个数组，直接覆盖了之前通过push收集到的数据。
2. 多余的async声明：函数操作的是本地同步数据，没有异步请求，不需要async修饰。

正确解决方案 #

方案一：使用forEach遍历收集数据 #

forEach适合单纯的遍历操作，不生成新数组，直接收集所需数据：

import { Course } from "../../Data/Courses";

export const getListLectures = () => {
  const lecture_list = [];

  Course.forEach((course) => {
    course.course_section?.forEach((section) => {
      section.section_lectures?.forEach((lecture) => {
        lecture_list.push(lecture?.lecture_name);
      });
    });
  });

  return lecture_list;
};

方案二：使用flatMap扁平化嵌套数组（更简洁） #

flatMap可以同时完成映射和扁平化操作，一步生成目标数组：

import { Course } from "../../Data/Courses";

export const getListLectures = () => {
  return Course.flatMap(course => 
    // 处理course_section可能为undefined的情况，返回空数组兜底
    course.course_section?.flatMap(section => 
      // 处理section_lectures可能为undefined的情况，返回空数组兜底
      section.section_lectures?.map(lecture => lecture?.lecture_name) || []
    ) || []
  );
};

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