Javascript中如何对LocalStorage存储的用户分数字典进行排名并提取前三？

核心实现逻辑 #

• 第一步：遍历LocalStorage拉取所有用户的完整数据，整理为统一的用户数组
• 第二步：对用户数组按score字段做降序排序，自动兼容后续新加入的用户
• 第三步：截取排序后数组的前3项，存储到公共变量/ SessionStorage 供页面其他功能调用
• 第四步：遍历排序后的完整数组，渲染到排行榜表格中

完整可运行代码 #

// 1. 读取所有用户数据并整理
const userList = []
for (let i = 0, len = localStorage.length; i < len; i++) {
  const key = localStorage.key(i)
  const user = JSON.parse(localStorage.getItem(key))
  // 过滤掉非用户数据的localStorage项，避免报错
  if (user && user.username && user.score !== undefined) {
    userList.push(user)
  }
}

// 2. 按分数降序排序，同分数可自定义排序规则
userList.sort((a, b) => {
  // 分数降序，若分数相同可以按用户名/注册时间排序，不需要直接删掉该行即可
  if (b.score === a.score) return a.username.localeCompare(b.username)
  return b.score - a.score
})

// 3. 存储排名前三的用户数据，存在sessionStorage方便跨功能调用，也可以直接存全局变量
const topThreeUsers = userList.slice(0, 3)
sessionStorage.setItem('topThreeUsers', JSON.stringify(topThreeUsers))
// 若只需要前三的分数可以单独提取：const topThreeScores = topThreeUsers.map(item => item.score)

// 4. 渲染到排行榜表格（假设页面上有id为rankTable的表格tbody）
const tableBody = document.querySelector('#rankTable tbody')
tableBody.innerHTML = ''
userList.forEach((user, index) => {
  const row = document.createElement('tr')
  row.innerHTML = `
    <td>${index + 1}</td>
    <td>${user.name || user.username}</td>
    <td>${user.score}</td>
  `
  tableBody.appendChild(row)
})

补充说明 #

• 代码内置了非用户数据的过滤逻辑，避免LocalStorage里存的其他无关项导致运行报错
• 同分数的排序规则可以自定义，不需要同分特殊处理直接删除sort方法里的同分判断逻辑即可
• 前三数据存在sessionStorage里页面刷新也不会丢失，其他功能直接调用JSON.parse(sessionStorage.getItem('topThreeUsers'))即可获取数据

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