如何使用reduce方法获取票房最高的电影标题？

数据 #

const movies = [{
    actor: "John, Tim, Annie, Tony",
    boxOffice: "$434,038,008",
    language: "English",
    title: "Toy Story 4",
 }]

需求 #

返回票房最高的电影名称。

原有代码 #

const convertBoxOfficeToNumber = (boxOffice) => Number(boxOffice.replace('$', "").replaceAll('.', ''))

const getBiggestBoxOfficeMovie = (movies) => movies.reduce((accumulator, currentMovie) => Math.max(accumulator, convertBoxOfficeToNumber(currentMovie.boxOffice)), null)

问题 #

如何修改代码以返回对应的电影标题？（必须使用reduce方法获取最高票房值）

修改方案 #

1. 修复票房转换函数的错误 #

首先纠正convertBoxOfficeToNumber中的替换符号——票房里的千位分隔符是逗号（,），不是点（.），原代码的替换会导致转换失败：

const convertBoxOfficeToNumber = (boxOffice) => {
  // 去掉$和所有逗号，再转为数字
  return Number(boxOffice.replace('$', '').replaceAll(',', ''));
};

2. 修改reduce逻辑，返回对应电影标题 #

让reduce的累加器（accumulator）存储当前票房最高的电影对象，而不是单纯的票房数值。每次迭代时对比当前电影与累加器电影的票房，保留票房更高的对象，最后返回该对象的title属性：

const getBiggestBoxOfficeMovie = (movies) => {
  // 处理空数组的边界情况
  if (movies.length === 0) return null;
  
  return movies.reduce((topMovie, currentMovie) => {
    const topBoxOffice = convertBoxOfficeToNumber(topMovie.boxOffice);
    const currentBoxOffice = convertBoxOfficeToNumber(currentMovie.boxOffice);
    // 对比票房，返回更高的那个电影对象
    return currentBoxOffice > topBoxOffice ? currentMovie : topMovie;
  }, movies[0]).title; // 初始值设为第一个电影，最后取标题
};

逻辑说明 #

• 初始累加器设为数组的第一个电影对象，作为初始的“最高票房候选”
• 每一轮迭代中，分别计算候选电影和当前电影的票房数值
• 比较两者票房，将更高的电影对象更新为新的候选
• 遍历完成后，候选对象就是票房最高的电影，直接取它的title即可

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