从没有特定键值的 Object 创建对象数组

Question

您好，这是我在这个平台上的第一个问题，所以请随时删除或编辑，或留下批评。

所以我在反应中解析来自 API 的数据。 数据看起来像这样。

data = {
  "20": "john",
  "20.5": "jim",
  "21": "bob",
  "21.5": "james",
  "22": "carl",
  "23": "linda",
  "25": "jack",
  "25.5": "kyla",
  "26": "jenny",
}

我正在尝试使用这些数据动态更新网页。 我需要访问年龄（键）和名称（值）。

我将对象的键值对放入一个数组中，这样我就可以使用array.map()将它们内联 map ，我的代码如下。

var Array = []

    for (const [key, value] of Object.entries(data)) {
      Array.push({
        age: key,
        name: value,
      });
    }

现在，这在很大程度上完成了我正在尝试做的事情。 output 是一个新阵列。

[
  { age: '20', name: 'john' },
  { age: '21', name: 'bob' },
  { age: '22', name: 'carl' },
  { age: '23', name: 'linda' },
  { age: '25', name: 'jack' },
  { age: '26', name: 'jenny' },
  { age: '20.5', name: 'jim' },
  { age: '21.5', name: 'james' },
  { age: '25.5', name: 'kyla' }
]

现在的问题是它们的顺序与给出的顺序不同。 由于某种原因，.5 个年龄都排在数组的末尾。 这是array.push()的限制吗？ 我对Object.entries() function 做错了什么吗？ 还是应该在创建数组后简单地使用排序方法？

Answer 1

迭代对象时，升序的整数键总是排在第一位。 解决此类问题的最佳方法是更改后端，以便它为您提供所需的对象数组，而不是您需要稍后修复的有点损坏的格式。

如果这不可能，您必须在客户端通过获取所有条目，然后对其进行排序来修复它。

 const input = { 20: 'john', 20.5: 'jim', 21: 'bob', 21.5: 'james', 22: 'carl', 23: 'linda', 25: 'jack', 25.5: 'kyla', 26: 'jenny' }; const result = Object.entries(input).map(([age, name]) => ({ age, name })).sort((a, b) => a.age - b.age); console.log(result);

您可能还需要修复 API 以便它为您提供正确的 JSON，因为

{
      20: john
      20.5: jim

不是有效的语法。