对比两个数组数据实现排行榜名次升降对应文本颜色方案咨询

核心逻辑 #

通过建立上一轮名次的快速查询映射，逐行对比新旧轮次的同用户排名差，对应绑定不同显示样式即可实现需求。 #

具体实现步骤 #

• 第一步：构建上一轮用户-名次映射表
  提前把lastLoop数组转换为以用户id为key、名次（转成数字类型）为value的对象，避免后续对比时重复遍历数组，提升查询效率。
  示例代码（JS环境）：

  const lastRankMap = lastLoop.reduce((acc, cur) => {
    acc[cur.id] = Number(cur.position)
    return acc
  }, {})
  

• 第二步：遍历新排行榜生成带排名状态的列表
  遍历newLoop的每一项，对每个用户对比新旧名次，标记排名状态：
  注意：当前示例中position数值越小排名越高（position为0是第一名），对比时按该规则判断
  • 新名次 < 旧名次：排名上升，标记为up状态
  • 新名次 = 旧名次：排名无变化，标记为unchanged状态
  • 新名次 > 旧名次：排名下降，标记为down状态
  • 上一轮映射表中不存在对应用户：属于新上榜用户，可单独标记new状态自定义显示规则
    示例代码：

  const finalRankList = newLoop.map(item => {
    const newRank = Number(item.position)
    const lastRank = lastRankMap[item.id]
    let rankStatus = 'unchanged'
    if (lastRank === undefined) {
      rankStatus = 'new'
    } else if (newRank < lastRank) {
      rankStatus = 'up'
    } else if (newRank > lastRank) {
      rankStatus = 'down'
    }
    return {
      ...item,
      rankStatus,
      // 可选：新增排名变化数值字段，用于显示升降几名
      changeCount: lastRank !== undefined ? lastRank - newRank : null
    }
  })
  

• 第三步：渲染时绑定对应样式
  渲染finalRankList时根据rankStatus字段绑定对应文字颜色样式即可：
  • up → 绿色
  • unchanged → 黑色
  • down → 红色

效果验证（匹配你给出的示例数据） #

• 用户id 610c1a8b132a880015c16a9d：旧名次2 → 新名次1，排名上升，显示绿色
• 用户id 61153dadd7db540015836e8e：旧名次5 → 新名次7，排名下降，显示红色
• 用户id 5e4463a395c832405e7effc5：新旧名次均为9，排名不变，显示黑色

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