如何使用 arr.reduce() 访问对象的值

Question

我正在努力实现以下目标：

var arr = [
 {name: 'width', value: 10}, 
 {name: 'height', value: 20}, 
]

arr.reduce((ack, item)=>{
  ack.width = item.value
  ack.height = item.value
  return ack
},{})

//Expected output:

{width: 10, height: 20}

//Actual output:

{width: 20, height: 20}

也许我不明白 .reduce() 是如何做到 100% 的？

Answer 1

Maybe I don't understand how .reduce() works a 100%?

看起来是这样。阅读 docs

每次调用 reducer 函数时 - ack 是上次从 reducer 返回的值 （或者初始值，如果它是第一个pass) 并且 item 是当前项目。

这样做有帮助：

arr.reduce((ack, item)=>{
  console.log(ack); // this will help you understand
  ack[item.name] = ack[item.value]
  return ack
},{})

Answer 2

您需要将name作为键。

const
    array = [{ name: 'width', value: 10 }, { name: 'height', value: 20 }],
    result = array.reduce(
        (object, { name, value }) => ({ ...object, [name]: value }),
        {}
    );

console.log(result);

Answer 3

reduce 方法对数组的每个元素执行回调函数，因此在您的问题中，在每次迭代中您都有一个包含 name 和 value 属性.你可以这样实现你的目标：

let arr = [
 {name: 'width', value: 10}, 
 {name: 'height', value: 20}, 
]

let result = arr.reduce((ack, item)=>{
  ack[item.name] = item.value
  return ack
},{})

console.log(result);

如何使用 arr.reduce() 访问对象的值

How to access an Object's values using arr.reduce()

javascript

arrays

javascript-objects