Question

我有一组键值对：

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是 undefined ，因此出现此错误：

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

我认为我可以在每次obj迭代中撰写reduce。我在做什么错了？

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

您可以destructure对象以获得key和value属性。然后使用object spread和computed property names将键和值添加到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);

Answer 3

您之所以得到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 4

您选择了正确的函数，但是，唯一缺少的部分是为每个项目返回的值不是累加器（在本例中为对象）。确保这样做可以解决您的问题。

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

使用Array.reduce（）数组对象

4 个答案: