Question

使用 Array.reduce() 将数组转换为对象 [重复]

2018-11-03

133

javascript arrays ecmascript-6

我有一个键值对数组：

const arr = [
  { key: 'One', value: '1' },
  { key: 'Two', value: '2' },
  { key: 'Three', value: '3' }
];

我想将上述数组转换为这种对象：

const obj = {
  'One': '1',
  'Two': '2',
  'Three': '3'
}

通过使用 Array.reduce() 函数。这是我到目前为止所做的：

const obj = arr.reduce( (prev, curr) => prev[curr.key] = curr.value, {} );

它不起作用，因为在第二次运行 reduce 函数时， prev 是 未定义 ，因此我收到此错误：

ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'Two' of undefined

我以为我可以在每次 reduce 迭代中编写 obj ... 我做错了什么？

Answer 1

您可以在 reduce 方法中使用 Object.assign 。

const arr = [{ key: 'One', value: '1' },{ key: 'Two', value: '2' },{ key: 'Three', value: '3' }];
const obj = arr.reduce( (prev, {key, value}) => Object.assign(prev, {[key]: value}), {} );
console.log(obj)

Answer 2

您得到 undefined ，因为 prev 没有 prev[curr.key] 中的属性。

这是我的解决方案：

const arr = [
  { key: 'One', value: '1' },
  { key: 'Two', value: '2' },
  { key: 'Three', value: '3' }
];

const result = arr.reduce((prev, curr) => {
  return {
    ...prev,
    [curr.key]: curr.value
  }
}, {});

console.log(result);

Answer 3

您可以解构对象以获取 key 和 value 属性。然后使用对象扩展和计算属性名称将键和值添加到 prev 对象：

const arr = [
  { key: 'One', value: '1' },
  { key: 'Two', value: '2' },
  { key: 'Three', value: '3' }
];

const obj = arr.reduce( (prev, { key, value }) => ({ ...prev, [key]: value }), {});

console.log(obj);

另一种选择是使用 Array.map() ，并将每个对象转换为此形式 - { [key]: value }。然后通过扩展到 Object.assign() 来合并所有内容：

const arr = [
  { key: 'One', value: '1' },
  { key: 'Two', value: '2' },
  { key: 'Three', value: '3' }
];

const obj = Object.assign(...arr.map(({ key, value }) => ({ [key]: value })));

console.log(obj);