将对象数组转换为单个对象

Question

例如，我有以下数组 -

[
  {
    name: "abc",
    value: "1"
  },
  {
    name: "xyz",
    value: "2"
  },
  {
    name: "abc",
    value: "3"
  },
  {
    name: "abc",
    value: "4"
  },
  {
    name: "xyz",
    value: "5"
  },
]

现在，我想通过将 value 与相同的 name 组合成一个数组来将此数组缩减为单个对象。像这样 -

{
  abc: [1, 3, 4],
  xyz: [2, 5]
}

如何使用 JavaScript 中的 reduce 执行此操作？

我不确定这是否是正确的方法，但我已经尝试过类似的方法，但它没有给我想要的输出。

const data = arr.reduce((acc, item) => {
  return {
    ...acc,
    [item.name]: [item.value, acc[item.value]]
  };
});

Answer 1

const data=[
  {
name: "abc",
value: "1"
  },
  {
name: "xyz",
value: "2"
  },
  {
name: "abc",
value: "3"
  },
  {
name: "abc",
value: "4"
  },
  {
name: "xyz",
value: "5"
  },
];

const res=data.reduce((a,c)=>{
 (a[c.name]??=[]).push(c.value);
 return a;
},{});
console.log(res);

Answer 2

你的答案是正确的，但你需要检查 acc 是否已经有 item.name 的密钥：

const data = [{
    name: "abc",
    value: "1"
  },
  {
    name: "xyz",
    value: "2"
  },
  {
    name: "abc",
    value: "3"
  },
  {
    name: "abc",
    value: "4"
  },
  {
    name: "xyz",
    value: "5"
  },
]

const result = data.reduce((acc, { name, value }) => ({
  ...acc,
  [name] : [...(acc[name] || []), value]
}), {})

console.log(result)

请注意，您可以使用对象解构来简化累积代码。

Answer 3

const data = [{
    name: "abc",
    value: "1"
  },
  {
    name: "xyz",
    value: "2"
  },
  {
    name: "abc",
    value: "3"
  },
  {
    name: "abc",
    value: "4"
  },
  {
    name: "xyz",
    value: "5"
  },
];

let finalObject = {};

data.forEach((item) => {
   if (!finalObject.hasOwnProperty(item.name)) {
      finalObject[item.name] = [item.value];
   } else {
      finalObject[item.name].push(item.value);
   }
});
console.log(finalObject);

如果您需要将字符串转换为数字，只需解析值即可得到答案

{
  abc: [1, 3, 4],
  xyz: [2, 5]
}

Answer 4

您可以使用 Array.prototype.reduce 对数组进行分组。

const 
  data = [
    { name: "abc", value: "1" },
    { name: "xyz", value: "2" },
    { name: "abc", value: "3" },
    { name: "abc", value: "4" },
    { name: "xyz", value: "5" },
  ],
  result = data.reduce((r, o) => ((r[o.name] ??= []).push(o.value), r), {});

console.log(result);

reduce 需要一些时间来习惯，但是一旦点击就相当简单。您还可以使用简单的 for...of 循环对数组进行分组。

const data = [
  { name: "abc", value: "1" },
  { name: "xyz", value: "2" },
  { name: "abc", value: "3" },
  { name: "abc", value: "4" },
  { name: "xyz", value: "5" },
];

const result = {};
for (let d of data) {
  (result[d.name] ??= []).push(d.value);
}

console.log(result);

其他相关文件：

Answer 5

使用reduce():

const arr = [
  {
    name: "abc",
    value: "1"
  },
  {
    name: "xyz",
    value: "2"
  },
  {
    name: "abc",
    value: "3"
  },
  {
    name: "abc",
    value: "4"
  },
  {
    name: "xyz",
    value: "5"
  },
]

const data = arr.reduce((a,c) => ({...a, [c.name]: a[c.name] ? [...a[c.name], c.value] : [c.value]}),{})
console.log(data)

将对象数组转换为单个对象

Convert array of objects into a single object

javascript

arrays

reduce