使用.map()合并两个对象时如何为对应键正确分配值？

问题原因 #

Array.map() 的回调函数参数是按固定顺序接收的：第一个参数为当前遍历到的元素，第二个参数为当前元素的索引，第三个参数为原数组。你定义的convertGraphItems(name, data)相当于把遍历到的元素赋值给name，把索引赋值给data，和预期传参逻辑不符。
同时你调用的entries()方法返回的每一项是[索引/键, 值]格式的数组，这就是实际输出中name字段是包含键和值的数组、data是数字0的直接原因。

解决方案 #

场景1：dataByAccountName是Map结构

Map的entries()返回的每一项是[键名, 对应值]的数组，直接解构回调的第一个参数即可拿到对应值：

// 解构第一个参数的两个元素，分别赋值给name、data
function convertGraphItems([name, data]) {
  return ({ name, data, type: 'bar', stack: true });
}

var generatedArr = [...dataByAccountName.entries()].map(convertGraphItems);

场景2：dataByAccountName是你补充说明的普通对象数组

这种场景不需要调用entries()，直接遍历原数组取对应字段即可：

function convertGraphItems(item) {
  return ({ 
    name: item.key, 
    data: item.value, 
    type: 'bar', 
    stack: true 
  });
}

var generatedArr = dataByAccountName.map(convertGraphItems);

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