javascript - 如何基于对象键/值配对创建有序列表？

<分区>

我正在尝试使用如下所示的 JavaScript 对象呈现高分有序列表:

{user1: 5, user2: 10}

使用以下代码我可以单独生成每个列表项:

Object.entries(data).forEach(([key, value]) => {
    const li = document.createElement('li');
    li.innerHTML = `${key}: ${value}`;
    scoreList.append(li);
});

现在我正在寻找一种方法来根据对象值对每个列表项进行排序。我知道我们有适用于数组的排序功能，使用以下代码几乎可以工作:

const keysSorted = Object.entries(data).sort((a, b) => {
    return data[a] - data[b];
});

但是它不保留对象值，它只返回一个包含每个键的排序数组。我想要的结果如下所示:

<ol>
    <li>user2: 10</li>
    <li>user1: 5</li>
</ol>

最佳答案

尽管 .sort 中存在小缺陷，您可以将其还原到它以前的形式。只需将键/值映射回一个对象:

const data = { user1: 5, user2: 10 };
const keysSorted = Object.entries(data)
  .sort((a, b) => b[1] - a[1])
  .reduce((a, b) => Object.assign(a, { [b[0]]: b[1] }), {});
console.log(keysSorted);

注意事项: