JavaScript遍历嵌套数组 求ps_lessons.lesson_length_minutes总和

需求说明 #

需要遍历如下结构的JavaScript嵌套数组，累加所有二级数组ps_lessons下的lesson_length_minutes字段值，预期输出结果为118（即20 + 22 + 33 + 43的和）：

[
    {
        "sort_id": 1,
        "category": "Introduction",
        "ps_lessons": [
            {
                "id": "48ca672b-aaca-473c-b54b-3cf699da848b",
                "sort_id": 1,
                "lesson_title": "Welcome to the course",
                "lesson_length_minutes": 20
            },
            {
                "id": "3f0f5715-a442-4262-ad32-6fb653df62c2",
                "sort_id": 2,
                "lesson_title": "What is React JS?",
                "lesson_length_minutes": 22
            }
        ]
    },
    {
        "sort_id": 2,
        "category": "Fundamentals",
        "ps_lessons": [
            {
                "id": "e28abd67-29a4-4bc9-a415-fb5db0aabfa9",
                "sort_id": 4,
                "lesson_title": "Fundamentals of React JS",
                "lesson_length_minutes": 33
            },
            {
                "id": "1d9668da-94e6-4085-bd89-176cc4e8e62d",
                "sort_id": 3,
                "lesson_title": "Fundamentals of JSX",
                "lesson_length_minutes": 43
            }
        ]
    }
]

原代码问题 #

原实现尝试通过两次调用map方法完成需求，但代码运行异常，问题点如下：

• 语法错误：箭头函数回调内部包含多行语句时，必须用大括号{}包裹函数体，原代码第一层map回调直接声明变量未包裹大括号，直接触发语法报错
• 变量作用域错误：sum变量定义在第一层map的回调内部，每次遍历主数组元素时都会重置为0，无法正确累加全局总和
• 语义不符：map方法的设计用途是遍历数组并返回映射后的新数组，做累加求和场景下使用reduce语义更匹配，也不会生成无用的临时数组
• 缺少返回值：函数执行完成后没有返回计算得到的总和，外部无法获取计算结果

原错误代码如下：

const extract_mins_and_sum = (result) => {
  console.log('result', result);
     result.map((single_row) =>
      let sum = 0;
        single_row.ps_lessons.map((single_row_lesson) =>
    
         ( console.log(single_row_lesson.lesson_length_minutes);
          sum += single_row_lesson.lesson_length_minutes)
        )
      );
    };

正确实现 #

推荐写法（简洁语义化） #

用flatMap把所有二级课程拍平成一维数组，再用reduce做累加，代码简洁易读：

const extract_mins_and_sum = (result) => {
  return result
    .flatMap(single_row => single_row.ps_lessons)
    .reduce((total, lesson) => total + lesson.lesson_length_minutes, 0)
}

// 调用示例
// const totalMinutes = extract_mins_and_sum(源数据数组)
// console.log(totalMinutes) // 输出118

兼容旧环境写法 #

如果运行环境不支持flatMap，可以嵌套两层reduce实现：

const extract_mins_and_sum = (result) => {
  return result.reduce((total, single_row) => {
    const categoryMinutes = single_row.ps_lessons.reduce((catTotal, lesson) => {
      return catTotal + lesson.lesson_length_minutes
    }, 0)
    return total + categoryMinutes
  }, 0)
}

原map思路修正版 #

如果要沿用原来的map遍历思路，仅修正语法和逻辑错误：

const extract_mins_and_sum = (result) => {
  let sum = 0; // 总和变量定义在循环外层
  result.map((single_row) => { // 多行回调补全大括号
    single_row.ps_lessons.map((single_row_lesson) => {
      sum += single_row_lesson.lesson_length_minutes
    })
  });
  return sum; // 返回最终计算结果
}

提示：上面的map修正版仅做语法逻辑纠错用，实际开发优先选择reduce实现，避免不必要的内存开销。

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