Question

我正在尝试使用看起来像这样的JavaScript对象来呈现高分有序列表：

{user1: 5, user2: 10}

使用以下代码，我可以生成每个列表项：

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

现在我正在寻找一种基于对象值对每个列表项进行排序的方法。我知道我们有对数组有效的sort函数，并且使用以下代码几乎可以工作：

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

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

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

Answer 1

尽管.sort中存在小缺陷，但您可以将其缩减到之前的表单。只需将键/值映射回对象：

＆＃13;

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);

＆＃13;

注意：

[b[0]]是computed property name，它会在分配给对象之前解析变量。
功能文档：Object.entries()，Object.assign()，Array.prototype.sort()，Array.prototype.reduce()。

如何根据对象键/值配对创建有序列表？

1 个答案: