JavaScript中的reduce()方法在对象上的应用

Question

有一个很好用的数组方法reduce()可以从数组中获取一个值。例如：

[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()方法。

- Pavel S.

---

你正在使用 Underscore.js 吗？ - Sethen

不提供。Underscore为对象提供reduce函数吗？ - Pavel S.

我记不清了，但我知道它有一个“reduce”方法。你可以在那里检查一下。虽然，解决方案似乎并不那么困难。 - Sethen

@Sethen Maleno，@Pavel：是的，_ 对象确实有一个用于对象的 reduce 函数。不确定它是否是偶然发生的，还是对象支持是有意为之，但确实可以像本问题的示例一样传递一个对象，并且（在概念上）会使用 for..in 循环，在每个键处调用您的迭代器函数并返回找到的值。 - Roatin Marth

Answer 1

一种选择是减少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。

如果您想要结果作为一个对象（{ value：... }），您需要每次初始化并返回该对象：

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

- Jonathan Lonowski

---

回答不错，但使用Object.values而不是Object.keys更易读，因为我们关心的是值而不是键。应该像这样写： Object.values(o).reduce((total, current) => total + current.value, 0); - Mina Luke

Object.values的浏览器支持程度不如Object.keys好，但如果你使用polyfill或者在Babel中转译，这可能不是一个问题。 - duhaime

确实，我在从Mongo模型检索的键中使用了这个函数，并将一个空对象作为键的reduce结果的初始值传递。由于我使用了@babel/plugin-proposal-object-rest-spread插件，所以在reduce的返回值中展开了累加器值，它很管用。但是我一直在想我是否做错了什么，因为我将对象传递给reduce的初始值，而您的答案证明我做得没错！ - amdev

但是使用Object.values无法访问实际使用的键。在缩减中特别是使用键非常普遍。 - Sean Munson

除了示例之外，还有谁有一个要简单求和的对象属性列表？大多数情况下，对象属性是不同的。 - Sean Munson

Answer 2

在这种情况下，您实际上想要的是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

- Daniel Bayley

---

那是你链接的Array.prototype.values() - 现在已经编辑过了。 - Jon Wood

默认情况下，reduce函数不会将第二个参数作为默认值吗？ - danielrvt

@danielrvt 是的，但这是可选的，在这种情况下是不必要的。请参见此处。 - Daniel Bayley

Answer 3

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.value;
}, 0);

- faboulaws

---

Object.entries(o); // returns [['value',1],['value',2],['value',3]] - faboulaws

const [key, value] = pair; 的翻译是：将pair中的键值对分别赋值给变量key和value。我从未见过这个！ - Martin Meeser

@martin-meeser - 这被称为解构。我们甚至可以通过将 function (total, pair) 更改为 function (total, [key, value]) 来省略此行。 - Jakub Zawiślak

@faboulaws Object.entries(o); // 返回 [["a", {value: 1}], ["b", {value: 2}], ["c", {value: 3}]] - Thomas

@faboulaws的回答是错误的，最后一行应该是return total + value.value。因为Object.entries(o)返回的是一个数组[["a",{"value":1}],["b",{"value":2}],["c",{"value":3}]]，这非常容易引起误解，即使有三个人点赞也是如此。 - Huantao

Answer 4

首先，你没有完全理解reduce的上一个值是什么。

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

其次，reduce是一个数组方法，而不是对象的方法，在迭代对象的属性时，你不能依赖顺序(参见: 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);

或者你可以直接map对象的值：

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);

- ZER0

Answer 5

让我总结一下可能性。目标始终是将对象制作成数组。有各种各样的JavaScript对象函数可用于此。对于每个单独的函数，都有不同的解释方式。因此，它始终取决于我们的对象是什么样子以及我们想要做什么。

在上面的示例中，这是一个具有三个对象的对象。

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

使用Object.keys

Object.keys方法只返回对象的键(key)。

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

使用Object.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还是array函数map()，取决于你想要做什么。

- Maik Lowrey

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}

- Alair Tavares Jr

Answer 7

一个对象可以使用Object.entries()、Object.keys() 和 Object.values() 将其转换为数组，然后作为数组进行缩减。但是您也可以不创建中间数组来缩减对象。

我创建了一个小的辅助库odict，可用于处理对象。

npm install --save odict

它具有与Array.prototype.reduce()非常相似的reduce函数：

export const reduce = (dict, reducer, accumulator) => {
  for (const key in dict)
    accumulator = reducer(accumulator, dict[key], key, dict);
  return accumulator;
};

你可以将它分配给以下对象之一：

Object.reduce = reduce;

由于这种方法非常有用，因此答案如下：

const result = Object.reduce(
  {
    a: {value:1},
    b: {value:2},
    c: {value:3},
  },
  (accumulator, current) => (accumulator.value += current.value, accumulator), // reducer function must return accumulator
  {value: 0} // initial accumulator value
);

- Igor Sukharev

Answer 8

扩展 Object.prototype。

Object.prototype.reduce = function( reduceCallback, initialValue ) {
    var obj = this, keys = Object.keys( obj );

    return keys.reduce( function( prevVal, item, idx, arr ) {
        return reduceCallback( prevVal, item, obj[item], obj );
    }, initialValue );
};

使用示例。

var dataset = {
    key1 : 'value1',
    key2 : 'value2',
    key3 : 'value3'
};

function reduceFn( prevVal, key, val, obj ) {
    return prevVal + key + ' : ' + val + '; ';
}

console.log( dataset.reduce( reduceFn, 'initialValue' ) );
'Output' == 'initialValue; key1 : value1; key2 : value2; key3 : value3; '.

大家好，享受它吧！！;-)

- user1247458

---

-1，现在您将在所有未来对象上拥有一个新的可枚举属性：http://jsfiddle.net/ygonjooh/ - Johan

不要修改你没有拥有的对象。 - Emile Bergeron

请不要像这样修改基本原型。这可能会给未来在同一代码库中工作的开发人员带来很多问题。 - adam.k

是的，这是一种“猴子补丁”。 这个解决方案是6年前编写的，现在不太相关，只需记住即可。 例如，在2021年最好使用Object.entries()。 - user1247458

Answer 9

您可以使用生成器表达式（现在所有浏览器和Node都支持）来获取键值对列表，然后可以对其进行reduce操作：

>>> a = {"b": 3}
Object { b=3}

>>> [[i, a[i]] for (i in a) if (a.hasOwnProperty(i))]
[["b", 3]]

- Janus Troelsen

Answer 10

如果将其视为数组处理会更容易。

返回水果的总数量：

let fruits = [{ name: 'banana', id: 0, quantity: 9 }, { name: 'strawberry', id: 1, quantity: 1 }, { name: 'kiwi', id: 2, quantity: 2 }, { name: 'apple', id: 3, quantity: 4 }]

let total = fruits.reduce((sum, f) => sum + f.quantity, 0);

- Alfredo Bollati