当我将 2 个对象与 .map() 合并时，如何为键赋值？

Question

我正在使用.map() 循环遍历一个对象并将一些值放入第二个对象。

我就是这样做的：

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

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

但是，我似乎无法将“名称”和“数据”分配给它们各自的键。

我尝试过return ({ name: name, data: data, type: 'bar', stack: true });，但这并没有达到我想要的效果。

我的期望结果应该如下所示：

[
    {
        "name": "Savings",
        "data": [
            5474.18,
            114031.26,
            127890.72
        ],
        "type": "bar",
        "stack": true
    }
]

但我的当前结果是：

[
    {
        "name": [
            "Savings",
            [
                5474.18,
                114031.26,
                127890.72
            ]
        ],
        "data": 0,
        "type": "bar",
        "stack": true
    }
]

有人知道我如何将data 和name 分配给他们各自的键吗？

编辑：源数组看起来像：

[
    {
        "key": "Savings",
        "value": [
            5474.18,
            114031.26,
            127890.72
        ]
    },
]

Answer 1

您将convertGraphItems 函数传递给map，并且您期望name 作为key 和data 作为value，但这里不是这种情况。

在map 中，第一个参数是值，第二个参数是index。 您必须使 convertGraphItems 兼容，这样您才能在外部传递值：

[...dataByAccountName.entries()].map(function ([_, { key, value }]) {
  return convertGraphItems(key, value);
});

const dataByAccountName = [
  {
    key: "Savings",
    value: [5474.18, 114031.26, 127890.72],
  },
];

function convertGraphItems(name, data) {
  return { name, data, type: "bar", stack: true };
}

var generatedArr = [...dataByAccountName.entries()].map(function ([, v]) {
  const { key, value } = v;
  return convertGraphItems(key, value);
});
console.log(generatedArr);

Answer 2

如果问题中包含的源数组已经可用，则不需要单独的函数。

const sources = [{
  "key": "Savings",
  "value": [5474.18, 114031.26, 127890.72]
}]
const parsedData = sources.map(({key, value}) => ({
  name: key,
  data: value,
  type: 'bar',
  stack: true
}));

console.log(parsedData)

Answer 3

传递给Array.prototype.map() 回调的前两个参数是

• element

  数组中正在处理的当前元素。

• index

  当前正在处理的元素在数组中的索引。

您似乎不太可能希望 data 成为索引。

const dataByAccountName = [{"key":"Savings","value":[5474.18,114031.26,127890.72]}]

const generatedArr = dataByAccountName.map(({ key: name, value: data }) => ({
  name,
  data,
  type: "bar",
  stack: true
}))

console.log(generatedArr)

.as-console-wrapper { max-height: 100% !important; }

---

如果您正在使用其他产生条目的东西（例如地图），那么这就是您要映射它的方式

const dataByAccountName = new Map()
dataByAccountName.set("Savings", [
  5474.18,
  114031.26,
  127890.72
])

const generatedArr = Array.from(dataByAccountName, ([ name, data ]) => ({
  name,
  data,
  type: "bar",
  stack: true
}))

console.log(generatedArr)

.as-console-wrapper { max-height: 100% !important; }

自 IMO 以来，我一直使用 Array.from()，它看起来比 [...map.entries()].map() 更好，并且达到了完全相同的效果。

请注意，传递给映射回调的第一个（也是唯一一个）参数是一个解构数组，而不是两个单独的参数。