传播操作符将对象转换为数组

I'm trying to convert a data structure like this:

我正在尝试转换这样的数据结构：

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

into a structure like this:

进入这样的结构：

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

Using the spread operator like this: [...data] returns any empty array.

像这样使用spread运算符：[... data]返回任何空数组。

I also tried [{...data}]

我也试过[{... data}]

Is there a way to use the spread operator to get the desired result? Also, why doesn't this approach work?

有没有办法使用扩展运算符来获得所需的结果？另外，为什么这种方法不起作用？

3 个解决方案

#1

It doesn't work because according to the MDN docs

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

"The Rest/Spread Properties for ECMAScript proposal (stage 3) adds spread properties to object literals. It copies own enumerable properties from a provided object onto a new object."

“ECMAScript提议的Rest / Spread属性（第3阶段）将扩展属性添加到对象文字。它将自己的可枚举属性从提供的对象复制到新对象上。”

You can do what you're trying to do very easily with Object.keys().map() though.

你可以使用Object.keys（）。map（）来轻松完成你想要做的事情。

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

#2

You can use Object.entries to get [key, value] pairs, and map them to an array of objects using computed property names:

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

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

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

console.log(result);

#3

I'm afraid you cant use to spread operator like in your example, however you can produce the desired output with reduce.

我担心你不能像你的例子那样使用扩展运算符，但是你可以使用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);

#1