javascript - ES6 Map Reduce 数组通过 Redux 状态的映射和填充变平

Question

我正在使用 ES6 编写一个 React/Redux 应用程序，我想要一种有效的方法来映射此数据:

[
  {total: 50, label: "C1"}, 
  {total: 120, label: "C2"}, 
  {total: 220, label: "C4"}
]

如下所示:

[
  {50, "Category 1"}, 
  {120, "Category 2"}, 
  {0, "Category 3"}, 
  {220, "Category 4"}
  {0, "Category 5"}, 
]

关键在于它会展平原始数组并重新标记标签值并填充缺失的键。

我可以用一些丑陋的 JS 迭代它来做到这一点，但我正在努力让它与一个简单而优雅的 reduce 箭头函数机制一起工作，我确信这是可能的。

Answer 1

使用.map()。

var foo = [{
    total: 50,
    label: "C1"
  },
  {
    total: 120,
    label: "C2"
  },
  {
    total: 220,
    label: "C4"
  }
];

var flatFoo = foo.map((obj) => {
  return [
    obj.total,
    `${obj.label.substr(0, 1)}ategory ${obj.label.substr(1, 1)}`
  ];
});

console.log(flatFoo);