Array 方法 `reduce` 有什么作用？

Question

发现了一个很好用的功能

reduce

，正在使用，但不知是否理解正确。谁能帮我理解这个功能？

例子：

var arr = [ 1, 2, 3, 4, 5, 6 ];
arr.reduce(function(p,n){
    return p + n;
}, 0);
// Output 21

这是我的理解：

reduce

循环遍历数组的每个元素并返回

previous + current value

。前任。

0 + 1

,

1 + 2

等。在这种情况下，此函数将返回：

[0] - return 1
[1] - return 3
[2] - return 5
[3] - return 7
[4] - return 9
[5] - return 11

接下来呢？为什么它给出结果

21

？

Answer 1

取自here，

arr.reduce()

会将数组缩减为回调指定的值。在您的情况下，它基本上会对数组的元素求和。 步骤：

• 在 0,1 上调用函数（0 是作为第二个参数传递给

  .reduce()

  的初始值。返回 0 和 1 之和，即 1.
• 在前一个结果（即 1 ）和下一个数组元素上调用函数。这将返回 1 和 2 的总和，即 3
• 重复直到最后一个元素，总和为 21

Answer 2

reduce() 方法有两个参数：一个为数组中的每个元素调用的回调函数和一个初始值。

回调函数还有两个参数：累加器值和当前值。

你的数组（

[1, 2, 3, 4, 5, 6]

）的流程是这样的：

1. return 0 + 1 // 0 is the accumulator which the first time takes the initial value, 1 is the current value. The result of this becomes the accumulator for the next call, and so on..
2. return 1 + 2 // 1 - accumulator, 2 - current value
3. return 3 + 3 // 3 - accumulator, 3 - current value, etc...
4. return 6 + 4
5. return 10 + 5
6. return 15 + 6

到达数组末尾时，返回累加器，这里是 21

Answer 3

首先，“reduce”这个名字实际上并没有减少任何东西。这是您在编程中经常发现的一种混淆/棘手的命名约定。虽然为了更好地理解，您可以假设 - 它需要很多值并将它们简化为单个值并返回。

reduce 是一个高阶函数，它有两个参数：

1. 回调函数和
2. 初始值。

回调函数有四个参数：

1. previousValue,
2. 当前值，
3. 当前索引，
4. 数组

更多的时候你会发现回调函数只需要两个参数根据我们需要解决的问题，这是好的。

[1, 2, 3].reduce((previousValue, currentValue, currentIndex, array) => {
  // here the return statement goes...
}, initialValue);

现在让我们看一个实际的例子。编写程序返回数组中所有元素的总和。请先按常规方式/程序思考，然后我们将使用 reduce 解决同样的问题。这是编写此程序的常规方式/过程：

function sum(arr) {
  let sum = 0;
  for(let i = 0; i < array.length; i++) {
    sum = sum + arr[i];
  }
  return sum;
}

所以，如果我们用数组调用

sum

，它将返回所有元素的总和。对吧？

是的，我们也可以用 reduce 做同样的事情。这是代码：

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

它做同样的事情。 reducer遍历数组元素，在每一步将当前数组值添加到上一步的结果（这个结果是所有前面步骤的运行总和） - 直到没有更多元素可以添加。（参考：这里)

这里的

previousValue

是照常的

sum

和

currentValue

是照常的

arr[i]

.

在第一次迭代中，没有

previousValue (return value of the previous calculation)

- 对吧？在这种情况下，

initialValue

将用作

previousValue

。如果没有

initialValue

，索引为0的数组元素作为初始值，迭代从下一个元素开始（索引1而不是索引0）。

而不是使用额外的变量

result

，你可以这样写程序：

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

更简短：

[1, 2, 3, 4].reduce((previousValue, currentValue) => previousValue += currentValue, 0);

希望你明白。现在你的任务是编写一个程序，该程序将使用 reduce 从非空数组中找到最小数字（考虑数组中的所有元素都是正数）。

这里是：

const arr = [4, 2, 3, 1];
let result = arr.reduce((minValue, currentValue) => {
  if (currentValue < minValue) {
    minValue = currentValue;
  }
  return minValue;
}); // no initial value 😎
console.log(result);

❤️ 快乐编码❤️

Answer 4

为了更好地理解 reduce 的工作原理，请使用以下

sum(a,b)

函数，它会为它执行的每个操作记录一个类似

a+b=c

的文本。

function sum(a,b) { 
  const c = a + b;
  console.log(`${a} + ${b} => ${c}`)
  return c;
}

const arr = [1,2,4,8];
const result = arr.reduce(sum);
console.log(`result=${result}`)

这会打印出

1+2=>3

、

3+4=>7

、

7+8=>15

最后是

result=15

.

有2个角落案例：

• 仅 1 个元素 --> 仅返回元素。
• 没有元素，空数组 --> 抛出错误。

一个可能的解决方案，是使用初始化程序。

Answer 5

Reduce 函数： Reduce 函数不减少任何东西。 Reduce 是获取数组的所有元素并从数组中取出单个值的函数。

Answer 6

以上所有答案都解释了

arr.reduce()

仅用于加法，如果我想用 reduce 执行其他操作，如减法、乘法等怎么办

在那种情况下，reduce 将如何在后台执行？

这里是对答案的详细解释：

function reduce(array, iterator, initialValue) {
    const isInitialValueDefined = typeof initialValue !== "undefined";
    if (!isInitialValueDefined && array.length === 0) {
        throw new TypeError("Reduce of empty array with no initial value");
    }
    let acc = isInitialValueDefined ? initialValue : array[0];
    for (let i = isInitialValueDefined ? 0 : 1; i < array.length; i++) {
        acc = iterator(acc, array[i], i, array);
    }
    return acc;
}

console.log(reduce([1, 2, 3, 4], (a, i) => a + i)); // => 10
console.log(reduce([1, 2, 3, 4], (a, i) => a * i, 1)); // => 24
console.log(reduce([], (a, i) => a + i)); // => TypeError

reduce()

是一个有两个参数的函数：

1. 回调函数
2. 初值

回调函数有四个参数：

1. previousValue
2. 当前值
3. currentIndex
4. 数组

大多数时候你会发现回调函数只接受 2 个参数。

Answer 7

您可以在这里查看更多信息。它介绍了 reduce 函数的一些基本用例！