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

Question

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

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

变成这样的结构：

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

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

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

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

Answer 1

“有没有办法使用扩展运算符来获得所需的结果？” 简短的回答，没有。 （有关您要完成的任务的替代解决方案，请参见下文）

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

它不起作用，因为根据MDN docs

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

就像文档说的那样，根据“Rest/Spread Properties 提议”，您不能将对象属性传播到数组上，对象总是会将它们的属性传播到新对象上。同样，数组不会传播到一个对象上，它们只会传播到一个新的数组上。

替代解决方案：

您可以使用Object.keys().map() 轻松完成此操作。 Object.keys() 将获得对象键的数组，Array.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);

Answer 2

您可以使用Object.entries 获取[key, value] 对，并使用computed property names 将它们映射到对象数组：

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

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

console.log(result);

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