从对象中筛选最高数值：实现Jack Miller的Top2/3运动项目展示

没问题，我帮你把这个功能完整实现出来，直接就能用到项目里。咱们先理清楚思路：首先得把Jdata.sports里的键值对转成可排序的数组，按得分从高到低排，然后取你需要的前2或3项，最后把运动名称和得分分别存到SportNames和SportVal里，再渲染到HTML页面上。

完整代码实现 #

1. JavaScript逻辑部分

// 你的原始数据对象
const Jdata = {
  "name": "Jack Miller",
  "sports": {
    "Basketball": 2,
    "Football": 3,
    "Iceskating": 5,
    "Running": 4
  }
};

// 定义要提取的前N项（这里设为2，需要3的话改成3就行）
const topN = 2;

// 初始化你要的两个数组
let SportVal = [];
let SportNames = [];

// 把sports对象转成[{name: '运动名', score: 得分}]的数组，方便排序
const sortedSports = Object.entries(Jdata.sports)
  .map(([sportName, score]) => ({ name: sportName, score: score }))
  // 按得分从高到低排序
  .sort((a, b) => b.score - a.score)
  // 取前N项
  .slice(0, topN);

// 把排序后的结果分别存入两个数组
sortedSports.forEach(item => {
  SportNames.push(item.name);
  SportVal.push(item.score);
});

// 现在可以验证下结果（开发阶段用，上线可以删掉）
console.log("Top运动名称:", SportNames);
console.log("对应得分:", SportVal);

2. HTML渲染部分

假设你想在页面上展示成列表形式，可以这样写：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Jack's Top Sports</title>
</head>
<body>
  <h2>Jack Miller's Top Sports</h2>
  <ul id="sportsList"></ul>

  <script>
    // 把上面的JavaScript代码放在这里
    const Jdata = { /* ... */ };
    // ... 其余逻辑代码 ...

    // 渲染到HTML
    const sportsList = document.getElementById('sportsList');
    sortedSports.forEach(item => {
      const li = document.createElement('li');
      li.textContent = `${item.name}: ${item.score}分`;
      sportsList.appendChild(li);
    });
  </script>
</body>
</html>

关键步骤解释 #

• 用Object.entries()把对象转成键值对数组，这样才能进行排序操作；
• sort((a,b) => b.score - a.score)实现降序排序，得分高的排在前面；
• slice(0, topN)轻松截取前2或3项，只需要修改topN的值就行；
• 最后通过DOM操作把结果渲染到页面，直观展示给用户。

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