展开运算符将对象转换为数组

Question

我希望你能够协助我将这样的一个数据结构进行转换：

data = { 
  0:{A:a}, 
  1:{B:b}, 
  2:{C:c}, 
}

转换为这样的结构：

[
 {0:{A:a}},
 {1:{B:b}}, 
 {2:{C:c}},
]

使用扩展运算符的方式如下：[...data]，将返回一个空数组。

我也尝试了 [{...data}]

是否有一种方法可以使用扩展运算符来获得所需的结果？此外，为什么这种方法不起作用？

- Turnipdabeets

---

数字键与数组的索引相关联吗？ - Nina Scholz

Answer 1

"是否有办法使用扩展运算符获得所需的结果？" 简短回答，没有。（请参见下面的替代解决方案）

"另外，为什么这种方法不起作用？"

它不起作用是因为根据MDN文档

"ECMAScript提案中的Rest / Spread属性（stage 3）将扩展属性添加到对象文字。它将提供的对象的自有可枚举属性复制到新对象中。"

就像文档所说的那样，根据“Rest/Spread Properties proposal”，您无法将对象属性展开到数组上，对象总是会将它们的属性展开到一个新对象上。同样，数组也不能展开到对象上，它们只能展开到新数组上。

替代解决方案：

You can do this fairly easily with Object.keys().map(). Object.keys() will get an array of the keys of the object, and Array.map() will map them into an array of the desired structure, like so:

var data = { 
  0:{A:"a"}, 
  1:{B:"b"}, 
  2:{C:"c"}, 
}

var result = Object.keys(data).map(function (key) {
   return { [key]: data[key] };
});
console.log(result);

- mhodges

---

这不是正在发生的事情，也不是正确的答案。 - Christian Matthew

你的答案在字面上是正确的，但并未解释OP所问的内容。他询问为什么扩展运算符不起作用。如果你能在答案中解释这一点，我将重新投票为正确答案。 - Christian Matthew

@ChristianMatthew "为什么这段代码不起作用?" 不是一个主题相关的问题。真正的问题是"有没有办法使用展开运算符来获得所需的结果?" 答案是坚定的"没有"。为了更有帮助性，每个人都提供了实现相同目标的替代方案。然而，我超越了这一点，并解决了"为什么在这种情况下展开运算符不起作用?"的问题。OP试图将一个对象展开到数组上，而文档（我引用的）明确说明对象展开到新对象而不是数组上。不确定你还在寻找什么？ - mhodges

我挑选了你的回答，因为它被标记为正确，并且这会让人们混淆，认为这是对OP提出的问题的正确回答。也许OP的问题实际上是如何做到这一点，你的回答是正确的，但他的帖子需要进行编辑以反映这一点。无论如何，当我看到这个答案时，我发现了OP提出的问题以及人们试图回答它的问题。这不是有信息量的，而且本可以更好。 - Christian Matthew

@ChristianMatthew 经过澄清修改。在未来，你最好询问帖子中的某些内容细节或澄清，而不是说“这不是正在发生的事情，也不是正确的答案”，这两种说法都是明显错误的陈述，并且都没有要求你需要的东西，那就是关于 OP 的问题的明确答案。 - mhodges

这是公平的，下次我会确保这样做。谢谢修改。 - Christian Matthew

Answer 2

你可以使用 Object.entries 来获取 [key, value] 对，并使用 计算属性名 将它们映射到对象数组中：

const data = { 
  0:{A: 'a'}, 
  1:{B: 'b'}, 
  2:{C: 'c'}
};

const result = Object.entries(data).map(([key, value]) => ({ [key]: value }));

console.log(result);

- Ori Drori

Answer 3

很抱歉，您不能像示例中那样使用展开运算符，但是您可以使用reduce来输出所需的结果。

data = { 
  0:{A:'a'}, 
  1:{B:'b'}, 
  2:{C:'c'}, 
}

let resArr = Object.keys(data).reduce((arr, e) => {
  arr.push({[e]: data[e]});
  return arr;
}, []);

console.log(resArr);

- Olian04

---

这将为每个对象提供字面属性“e”。您需要使用括号语法动态添加属性以获取正确的属性名称 - arr.push({ [e]: data[e] }); - mhodges

Answer 4

让数据等于 ['乌兹别克斯坦西拉', '希克马特贝特', '阿斯拉姆博伊']

让 spread 等于 [...data]

console.log(spread)

- scorpius

---

我认为这个人是世界上最好的程序员。 - scorpius

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community