Javascript 用map和reduce变换数组

我从web服务中获得了几个类似的阵列：

const a = [ { label: 'A', value: 100 }, { label: 'B', value: 200 } ];
const b = [ { label: 'A', value: 50 }, { label: 'B', value: 300 } ];
const c = [ { label: 'A', value: 20 }, { label: 'B', value: 130 } ];
const d = [ { label: 'A', value: 10 }, { label: 'B', value: 25 } ];

我想要这样的东西（在反应状态下）：

使用现代JavaScript，我猜是使用

map

和

reduce

编辑：

一开始我一点也不清楚。我想在获得新数据时更新我的状态

如果我的当前状态为：

[ 
    { label: 'A', a: 100, b: 50, c: 20, d: 10 }, 
    { label: 'B', a: 200, b: 300, c: 130, d: 25 } 
]

我越来越

{ title: "a", values: [ { label: 'A', value: 12 }, { label: 'B', value: 13 } ] };

我想将我的状态更新为

[ 
    { label: 'A', a: 12, b: 50, c: 20, d: 10 }, 
    { label: 'B', a: 13, b: 300, c: 130, d: 25 } 
]

我最好的尝试是：

myFunction().then(data => {
  const {chartData} = this.state;
  chartData[data.title] = Object.keys(data.values).map(key => ({
    label: chartData[data.title] || data.values[key].label,
    [data.title]: data.values[key].value,
    ...chartData[data.title]
  });
  this.setState({chartData});
})

在哪里

这是我的想法

• 将所有值合并到一个数组中
• 使用数组保存字母表
• 循环组合数组，对于组合数组中的每个元素，根据组合数组的索引向标签和字母表添加值

const a=[{label:'a'，value:100}，{label:'B'，value:200}]；
常量b=[{label:'A'，value:50}，{label:'b'，value:300}]；
常量c=[{label:'A'，value:20}，{label:'B'，value:130}]；
常量d=[{label:'A'，value:10}，{label:'B'，value:25}]；
设alpha=[…'abcdefghijklmnopqrstuvwxyz']
让combine=[a，b，c，d]
让op=combine.reduce（（op，inp，i）=>{
inp.forEach（（{label，value}）=>{
op[label]=op[label]|{label}
op[label][alpha[i]]=值
})  
返回操作
},{})
console.log（Object.values（op））

使用所有数组创建一个对象（在输出中创建属性需要键名。您可以向该对象添加更多数组）。然后返回

const a=[{label:'a'，value:100}，{label:'B'，value:200}]；
常量b=[{label:'A'，value:50}，{label:'b'，value:300}]；
常量c=[{label:'A'，value:20}，{label:'B'，value:130}]；
常量d=[{label:'A'，value:10}，{label:'B'，value:25}]；
常量输入={a，b，c，d}；
const merged=Object.entries（input）.reduce（（r[key，arr]）=>{
arr.forEach（（{label，value}）=>{
r[label]=r[label]|{label}；
r[标签][键]=值；
})
返回r；
}, {})
console.log（Object.values（merged））

您可以迭代给定的

状态

数组，查找带有所需

标签的项

并更新属性

函数更新（状态，{title，values}）{
返回值.reduce（（r，{label，value}）=>{
var temp=r.find（o=>o.label==label）；
如果（！temp）r.push（temp={label}）；
赋值（temp，{[title]：value}）；
返回r；
}，国家）；
}
var state=[{label:'A'，A:100，b:50，c:20，d:10}，{label:'b'，A:200，b:300，c:130，d:25}]，
数据={title:“a”，值：[{label:'a'，value:12}，{label:'B'，value:13}]}；
更新（状态、数据）；
console.log（状态）
作为控制台包装{max height:100%！important；top:0；}
这是一个很好的猜测。你试过什么了吗？你的最佳尝试（错误、意外结果等）出现了什么问题？首先尝试…当遇到问题时询问trouble@charlietfl当然，我在发帖前试过，但我真的不想分享我的尝试=）“不想分享尝试”。。。但这在这里是意料之中的。我们的目标是帮助您修复代码尝试，而不是成为一个免费的代码编写服务FYI-我在这里提出的几个问题是由于我展示的代码中的愚蠢错误或我的研究结果中的错误，请描述您更改了什么以及为什么，以帮助其他人识别问题并理解此答案
myFunction().then(data => {
  const {chartData} = this.state;
  chartData[data.title] = Object.keys(data.values).map(key => ({
    label: chartData[data.title] || data.values[key].label,
    [data.title]: data.values[key].value,
    ...chartData[data.title]
  });
  this.setState({chartData});
})

const glue = (label, ...vars) => ([].concat(vars).filter(i => i.label === label).reduce((agg, i) => ({ ...agg, ...i }), {}));

glue('A', [a,b,c,d]);
glue('B', [a,b,c,d]);
// .. and so on
`