使用reduce获取带有对象的对象答案

【问题标题】：Using reduce to get object with objects使用reduce获取带有对象的对象
【发布时间】：2020-08-27 01:25:59
【问题描述】：

我有以下形式的数组：

[
{key: "key1", value: value1}
{key: "key2", value: value2}
{key: "key3", value: value3}
...
]

我需要转换成如下形式：

{ { key1 : value1},  { key2 : value2},  { key3 : value3} }

如何用 reduce() 做到这一点？

我正在尝试使用此代码：

 var someObject = this.someArray.reduce(function(acc, item) {
            return { [item.key]: item.value};
        }, {});

但我总是只得到最后一项，而不是全部。

【问题讨论】：

你所有的钥匙都是同一个钥匙。同样在对象上使用+ 会将它们强制为字符串"[object Object]"。目前尚不清楚您认为这会如何发挥作用。
您的预期输出无效。你想要一个对象数组吗？
@jonrsharpe- 我修复了输入键
给minimal reproducible example。添加逗号和引号使其最小有效语法，这不会只输出最后一项，它会输出"[object Object][object Object][object Object][object Object]"。
@Dane Brouwer - 再次抱歉 - 我将上面的示例编辑到只给我最后一项的行。

标签： javascript typescript javascript-objects reduce

【解决方案1】：

问题在于你的回报

return acc + { [item.key]: item.value};

您不能将+ 运算符用于add 对象。请尝试以下操作：

acc[item.key] = item.value;
return acc

这假设您的 keys 都是唯一的。请参阅下面的完整示例：

let x = [{
    key: "key1",
    value: 'value1'
  },
  {
    key: "key2",
    value: 'value2'
  },
  {
    key: "key3",
    value: 'value3'
  },
].reduce((accumulatedValue, curentValue) => {
  accumulatedValue[curentValue.key] = curentValue.value;
  return accumulatedValue
}, {})
console.log(x);

【讨论】：

当我尝试这个我得到错误：Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
@codeKnight 好吧，我建议的更改不会是问题。其他地方可能有问题。你能发布更多你的代码吗？
我将此答案标记为答案 - 但是 - 为了摆脱我在上面的评论中遇到的错误 - 我必须添加一个显式类型 - 所以我要去用那个来编辑这个答案。
我没有足够的声誉，所以编辑部分在获得批准之前不会显示 - 所以我在这里写：我在末尾添加了：{} as Record<string, string> ....

【解决方案2】：

要么你寻找一个对象数组，那么下面的例子适用：

const res = [{
  key: 'key1',
  value: 'value1',
}, {
  key: 'key1',
  value: 'value1',
}, {
  key: 'key1',
  value: 'value1',
}].reduce((tmp, {
  key,
  value,
}) => [
  ...tmp,

  {
    [key]: value,
  },
], []);

console.log(res);

要么你寻找一个独特的对象，那么下面的例子适用：

const res = [{
  key: 'key1',
  value: 'value1',
}, {
  key: 'key2',
  value: 'value2',
}, {
  key: 'key3',
  value: 'value3',
}].reduce((tmp, {
  key,
  value,
}) => ({
  ...tmp,

  [key]: value,
}), {});

console.log(res);

关于您的代码，正如人们在 cmets 中已经告诉您的那样，您不能简单地使用 + 运算符来连接数组或对象。

【讨论】：

我从相关代码中删除了+。那是一个错误。现在看。
你能澄清你的第二个答案吗？什么是`...tmp'？
... 被称为 扩展运算符，我所做的是创建一个由累加器中的所有元素加上一个新元素组成的新数组。它与使用分配的结果相同（如 Dane Brouwer 的回答）。 here is some tutorial