如何将多组数组对象按Key合并为单行对象数组？

需求说明 #

原始数据：

var dataarray = [{Region: 'Asia', Total: '0.50'},
                 {Region: 'America', Total: '1.50'},
                 {Region: 'Middle East', Total: '1.50'}]

期望转换结果：

var convertarray = [{'Asia' : '0.50', 'America' : '1.50', 'Middle East' : '1.50'}]

原代码问题分析 #

你当前的代码逻辑存在偏差：每次遍历都会创建包含Region属性的新对象并推入result数组，最终生成多个对象的数组，而非需求中单个对象包裹在数组内的结构，额外的补全逻辑也不符合需求目标。

正确实现方式 #

方法1：使用reduce（简洁写法） #

利用数组reduce方法直接构建目标对象，再将其放入数组：

var dataarray = [{Region: 'Asia', Total: '0.50'},
                 {Region: 'America', Total: '1.50'},
                 {Region: 'Middle East', Total: '1.50'}];

var convertarray = [dataarray.reduce((accumulator, current) => {
  // 将Region作为键，Total作为值存入累加对象
  accumulator[current.Region] = current.Total;
  return accumulator;
}, {})]; // 初始值为空对象

console.log(convertarray);

方法2：普通循环写法 #

如果更习惯基础循环，可先创建空对象，遍历赋值后再包裹进数组：

var dataarray = [{Region: 'Asia', Total: '0.50'},
                 {Region: 'America', Total: '1.50'},
                 {Region: 'Middle East', Total: '1.50'}];

var targetObj = {};
dataarray.forEach(item => {
  targetObj[item.Region] = item.Total;
});
var convertarray = [targetObj];

console.log(convertarray);

两种方法最终都会输出符合需求的结构：[{"Asia":"0.50","America":"1.50","Middle East":"1.50"}]

内容的提问来源于stack exchange，提问作者grabrep gg