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

时间:2017-07-24 16:00:54

标签: javascript arrays object ecmascript-6 spread-syntax

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

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

进入这样的结构:

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

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

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

有没有办法使用点差运算符来获得所需的结果?另外,为什么这种方法不起作用?

3 个答案:

答案 0 :(得分:7)

根据MDN docs

,它不起作用
  

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

您可以使用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);

答案 1 :(得分:5)

您可以使用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);

答案 2 :(得分:1)

我担心您无法像在示例中那样使用传播运算符,但是您可以使用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);