如何从含rating评分数组的对象数组中获取评分最高的前3项

核心问题在于对象的rating字段是数组，无法直接用于排序比较，需要先将其转换为可对比的单值评分，同时注意React state不可变原则，不能直接修改原数组。

实现逻辑 #

• 基于展开运算符对原数组做浅拷贝，避免直接修改state原数据触发渲染异常
• 按业务规则将每个对象的rating数组转换为单值综合评分（示例采用最通用的算术平均分，可按需替换规则）
• 按综合评分做降序排序
• 截取排序后数组的前3项，该逻辑天然适配任意长度数组：数组长度不足3时自动返回全部内容，长度大于3时返回评分最高的3项

可直接复用的代码 #

// 计算单部电影的综合评分，可根据业务需求修改计算规则
const calcMovieScore = (ratingList) => {
  // 示例：计算评分平均值
  const total = ratingList.reduce((sum, score) => sum + score, 0);
  return total / ratingList.length;
};

// 获取Top3高分电影
const getTop3Movies = () => {
  // 浅拷贝原数组后再排序，不修改原始state
  const sortedList = [...movies].sort((prev, next) => {
    const prevScore = calcMovieScore(prev.rating);
    const nextScore = calcMovieScore(next.rating);
    // 降序排列：高分在前
    return nextScore - prevScore;
  });
  // 截取前3项
  return sortedList.slice(0, 3);
};

效果验证 #

基于你提供的初始数据计算：

• 《the-dark-knight》评分平均值约为9.67，排第1
• 《scarface》评分平均值为7，排第2
• 《godfather》评分平均值约为5.33，排第3
  后续新增任意数量的电影条目，上述逻辑都可以正常返回评分最高的3项，不需要额外调整。

注意事项 #

• 禁止直接对原始movies state调用sort方法：Array.sort是原地排序方法，会直接修改原数组，违反React不可变数据原则，可能引发页面渲染异常
• 如果业务有特殊评分规则（比如去掉最高/最低分算平均、不同权重计分），只需要修改calcMovieScore函数内的计算逻辑即可，排序、截取逻辑无需改动
• 若后续需要调整取Top N的数量，只需要修改slice方法的第二个参数即可，比如取Top5就写slice(0,5)

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