对象上的Javascript reduce()

Question

有一个很好的Array方法reduce()可以从Array中获取一个值.例:

[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
  return previousValue + currentValue;
});

实现对象的最佳方法是什么？我想这样做:

{ 
    a: {value:1}, 
    b: {value:2}, 
    c: {value:3} 
}.reduce(function(previous, current, index, array){
  return previous.value + current.value;
});

但是,Object似乎没有reduce()实现任何方法.

Answer 1

一个办法是到reduce了keys():

var o = { 
    a: {value:1}, 
    b: {value:2}, 
    c: {value:3} 
};

Object.keys(o).reduce(function (previous, key) {
    return previous + o[key].value;
}, 0);

有了这个,你将要指定一个初始值或第一轮将是'a' + 2.

如果您希望结果为Object({ value: ... }),则每次都必须初始化并返回对象:

Object.keys(o).reduce(function (previous, key) {
    previous.value += o[key].value;
    return previous;
}, { value: 0 });

Answer 2

ES6实现: Object.entries()

const o = {
  a: {value: 1},
  b: {value: 2},
  c: {value: 3}
};

const total = Object.entries(o).reduce(function (total, pair) {
  const [key, value] = pair;
  return total + value;
}, 0);

Answer 3

在这种情况下你真正想要的是Object.values.这是一个简洁的ES6实现,考虑到这一点:

const add = {
  a: {value:1},
  b: {value:2},
  c: {value:3}
}

const total = Object.values(add).reduce((t, {value}) => t + value, 0)

console.log(total) // 6

或者干脆:

const add = {
  a: 1,
  b: 2,
  c: 3
}

const total = Object.values(add).reduce((t, n) => t + n)

console.log(total) // 6

Answer 4

首先,你没有得到减少之前的值.

在你的伪代码中return previous.value + current.value,因此previous值将是下一次调用时的数字,而不是对象.

其次,reduce是一个Array方法,而不是Object的方法,当你迭代一个对象的属性时,你不能依赖它的顺序(参见:https://developer.mozilla.org/en-US/docs/ JavaScript/Reference/Statements/for ... in,这也适用于Object.keys); 所以我不确定reduce在一个物体上施加是否有意义.

但是,如果订单不重要,您可以:

Object.keys(obj).reduce(function(sum, key) {
    return sum + obj[key].value;
}, 0);

或者您可以只映射对象的值:

Object.keys(obj).map(function(key) { return this[key].value }, obj).reduce(function (previous, current) {
    return previous + current;
});

在ES6中使用胖箭头函数的语法(已经在Firefox Nightly中),你可以缩小一点:

Object.keys(obj).map(key => obj[key].value).reduce((previous, current) => previous + current);

Answer 5

让我总结一下可能性。目标始终是从对象中创建一个数组。有多种 Javascript 对象函数可以实现此目的。对于每个单独的函数，都有不同的解释方式。所以它总是取决于我们的对象是什么样子以及我们想要做什么。

在上面的例子中，它是一个包含三个对象的对象。

const obj = { 
    a: {value: 1}, 
    b: {value: 2}, 
    c: {value:3} 
};

使用 Object.keys

Object.keys 只给我们对象的键。

const arr = Object.keys(obj);
// output arr: 
[a, b, c]

const result = arr.reduce((total, key) => {
    return sum + obj[key].value;
}, 0);
// output result
// 6

与对象.value

Object.value() 返回数组中的每个值。

const arr = Object.value(obj);
// output arr
[
   {value: 1},
   {value: 2},
   {value: 3},
]

const result = arr.reduce((total, singleValue) => {
   return total + singleValue.value;
}, 0);

// output result
// 6

// Or the short variant
const resultShort = Object.values(obj).reduce((t, n) => t + n.value, 0)

// output resultShort
// 6

使用 Object.entries

Object.entries 将每个单独的对象值拆分为一个数组。

const arr = Object.entries(obj)
// output arr
[
  ["a", {visitors: 1}],
  ["b", {visitors: 2}],
  ["c", {visitors: 4}]
]

const result = arr.reduce((total, singleArr) => {
  return total + singleArr[1].value;
}, 0);

// output result
// 6

是否使用reduce或数组函数map()来完成取决于你和你想要做什么。

Answer 6

1：

[{value:5}, {value:10}].reduce((previousValue, currentValue) => { return {value: previousValue.value + currentValue.value}})

>> Object {value: 15}

2：

[{value:5}, {value:10}].map(item => item.value).reduce((previousValue, currentValue) => {return previousValue + currentValue })

>> 15

3：

[{value:5}, {value:10}].reduce(function (previousValue, currentValue) {
      return {value: previousValue.value + currentValue.value};
})

>> Object {value: 15}