Array.prototype.reduceRight()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Array 实例的 reduceRight() 方法对累加器和数组的每个值(从右到左)应用函数,以将其减少为单个值。

¥The reduceRight() method of Array instances applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value.

另请参阅 Array.prototype.reduce() 从左到右。

¥See also Array.prototype.reduce() for left-to-right.

Try it

语法

¥Syntax

js
reduceRight(callbackFn)
reduceRight(callbackFn, initialValue)

参数

¥Parameters

callbackFn

对数组中的每个元素执行的函数。其返回值在下次调用 callbackFn 时成为 accumulator 参数的值。对于最后一次调用,返回值变为 reduceRight() 的返回值。使用以下参数调用该函数:

accumulator

上次调用 callbackFn 所产生的值。第一次调用时,如果指定了后者,则其值为 initialValue;否则其值为数组的最后一个元素。

currentValue

当前元素的值。第一次调用时,如果指定了 initialValue,则其值为最后一个元素;否则其值为倒数第二个元素。

currentIndex

currentValue 在数组中的索引位置。第一次调用时,如果指定了 initialValue,则其值为 array.length - 1,否则为 array.length - 2

array

调用了数组 reduceRight()

initialValue Optional

用作第一次调用 callbackFn 的累加器的值。如果未提供初始值,则将使用并跳过数组中的最后一个元素。在没有初始值的空数组上调用 reduceRight() 会创建 TypeError

返回值

¥Return value

减少所产生的值。

¥The value that results from the reduction.

描述

¥Description

reduceRight() 方法是 迭代法 方法。它按索引降序对数组中的所有元素运行 "reducer" 回调函数,并将它们累积为单个值。请阅读 迭代法 部分,了解有关这些方法一般如何工作的更多信息。

¥The reduceRight() method is an iterative method. It runs a "reducer" callback function over all elements in the array, in descending-index order, and accumulates them into a single value. Read the iterative methods section for more information about how these methods work in general.

callbackFn 仅针对已赋值的数组索引调用。稀疏数组 中的空槽不会调用它。

¥callbackFn is invoked only for array indexes which have assigned values. It is not invoked for empty slots in sparse arrays.

与其他 迭代法 不同,reduceRight() 不接受 thisArg 参数。callbackFn 总是用 undefined 作为 this 来调用,如果 callbackFn 是非严格的,则用 globalThis 替换。

¥Unlike other iterative methods, reduceRight() does not accept a thisArg argument. callbackFn is always called with undefined as this, which gets substituted with globalThis if callbackFn is non-strict.

reduceRight() 方法是 generic。它只期望 this 值具有 length 属性和整数键控属性。

¥The reduceRight() method is generic. It only expects the this value to have a length property and integer-keyed properties.

何时不使用 reduce() 中讨论的有关 reduce 的所有注意事项也适用于 reduceRight。由于 JavaScript 没有惰性求值语义,因此 reducereduceRight 之间没有性能差异。

¥All caveats about reduce discussed in when to not use reduce() apply to reduceRight as well. Because JavaScript has no lazy evaluation semantics, there is no performance difference between reduce and reduceRight.

示例

¥Examples

在没有初始值的情况下,reduceRight() 如何工作

¥How reduceRight() works without an initial value

对 reduceRight callbackFn 的调用如下所示:

¥The call to the reduceRight callbackFn would look something like this:

js
arr.reduceRight((accumulator, currentValue, index, array) => {
  // …
});

第一次调用该函数时,accumulatorcurrentValue 可以是两个值之一。如果在对 reduceRight 的调用中提供了 initialValue,则 accumulator 将等于 initialValuecurrentValue 将等于数组中的最后一个值。如果未提供 initialValue,则 accumulator 将等于数组中的最后一个值,currentValue 将等于倒数第二个值。

¥The first time the function is called, the accumulator and currentValue can be one of two values. If an initialValue was provided in the call to reduceRight, then accumulator will be equal to initialValue and currentValue will be equal to the last value in the array. If no initialValue was provided, then accumulator will be equal to the last value in the array and currentValue will be equal to the second-to-last value.

如果数组为空并且未提供 initialValue,则将抛出 TypeError。如果数组只有一个元素(无论位置如何)并且没有提供 initialValue,或者提供了 initialValue 但数组为空,则将返回独奏值而不调用 callbackFn

¥If the array is empty and no initialValue was provided, TypeError would be thrown. If the array has only one element (regardless of position) and no initialValue was provided, or if initialValue is provided but the array is empty, the solo value would be returned without calling callbackFn.

该函数的一些示例运行如下所示:

¥Some example run-throughs of the function would look like this:

js
[0, 1, 2, 3, 4].reduceRight(
  (accumulator, currentValue, index, array) => accumulator + currentValue,
);

该回调将被调用四次,每次调用中的参数和返回值如下:

¥The callback would be invoked four times, with the arguments and return values in each call being as follows:

accumulator currentValue index 返回值
第一次通话 4 3 3 7
第二次通话 7 2 2 9
第三次通话 9 1 1 10
第四次通话 10 0 0 10

array 参数在整个过程中永远不会改变 - 它始终是 [0, 1, 2, 3, 4]reduceRight 返回的值将是最后一次回调调用 (10) 的值。

¥The array parameter never changes through the process — it's always [0, 1, 2, 3, 4]. The value returned by reduceRight would be that of the last callback invocation (10).

reduceRight() 如何使用初始值

¥How reduceRight() works with an initial value

在这里,我们使用相同的算法减少相同的数组,但将 10initialValue 作为第二个参数传递给 reduceRight()

¥Here we reduce the same array using the same algorithm, but with an initialValue of 10 passed as the second argument to reduceRight():

js
[0, 1, 2, 3, 4].reduceRight(
  (accumulator, currentValue, index, array) => accumulator + currentValue,
  10,
);
accumulator currentValue index 返回值
第一次通话 10 4 4 14
第二次通话 14 3 3 17
第三次通话 17 2 2 19
第四次通话 19 1 1 20
第五次通话 20 0 0 20

当然,这次 reduceRight 返回的值是 20

¥The value returned by reduceRight this time would be, of course, 20.

对数组中的所有值求和

¥Sum up all values within an array

js
const sum = [0, 1, 2, 3].reduceRight((a, b) => a + b);
// sum is 6

运行一系列带有回调的异步函数,每个回调将其结果传递给下一个

¥Run a list of asynchronous functions with callbacks in series each passing their results to the next

js
const waterfall =
  (...functions) =>
  (callback, ...args) =>
    functions.reduceRight(
      (composition, fn) =>
        (...results) =>
          fn(composition, ...results),
      callback,
    )(...args);

const randInt = (max) => Math.floor(Math.random() * max);

const add5 = (callback, x) => {
  setTimeout(callback, randInt(1000), x + 5);
};
const mult3 = (callback, x) => {
  setTimeout(callback, randInt(1000), x * 3);
};
const sub2 = (callback, x) => {
  setTimeout(callback, randInt(1000), x - 2);
};
const split = (callback, x) => {
  setTimeout(callback, randInt(1000), x, x);
};
const add = (callback, x, y) => {
  setTimeout(callback, randInt(1000), x + y);
};
const div4 = (callback, x) => {
  setTimeout(callback, randInt(1000), x / 4);
};

const computation = waterfall(add5, mult3, sub2, split, add, div4);
computation(console.log, 5); // Logs 14

// same as:

const computation2 = (input, callback) => {
  const f6 = (x) => div4(callback, x);
  const f5 = (x, y) => add(f6, x, y);
  const f4 = (x) => split(f5, x);
  const f3 = (x) => sub2(f4, x);
  const f2 = (x) => mult3(f3, x);
  add5(f2, input);
};

减少和减少权利之间的区别

¥Difference between reduce and reduceRight

js
const a = ["1", "2", "3", "4", "5"];
const left = a.reduce((prev, cur) => prev + cur);
const right = a.reduceRight((prev, cur) => prev + cur);

console.log(left); // "12345"
console.log(right); // "54321"

定义可组合函数

¥Defining composable functions

函数组合是一种组合函数的机制,其中每个函数的输出传递到下一个函数,最后一个函数的输出是最终结果。本例中我们使用 reduceRight() 来实现函数组合。

¥Function composition is a mechanism for combining functions, in which the output of each function is passed into the next one, and the output of the last function is the final result. In this example we use reduceRight() to implement function composition.

另请参阅维基百科上的 函数组成

¥See also Function composition on Wikipedia.

js
const compose =
  (...args) =>
  (value) =>
    args.reduceRight((acc, fn) => fn(acc), value);

// Increment passed number
const inc = (n) => n + 1;

// Doubles the passed value
const double = (n) => n * 2;

// using composition function
console.log(compose(double, inc)(2)); // 6

// using composition function
console.log(compose(inc, double)(2)); // 5

将 reduceRight() 与稀疏数组结合使用

¥Using reduceRight() with sparse arrays

reduceRight() 会跳过稀疏数组中缺失的元素,但不会跳过 undefined 值。

¥reduceRight() skips missing elements in sparse arrays, but it does not skip undefined values.

js
console.log([1, 2, , 4].reduceRight((a, b) => a + b)); // 7
console.log([1, 2, undefined, 4].reduceRight((a, b) => a + b)); // NaN

对非数组对象调用 reduceRight()

¥Calling reduceRight() on non-array objects

reduceRight() 方法读取 thislength 属性,然后访问键为小于 length 的非负整数的每个属性。

¥The reduceRight() method reads the length property of this and then accesses each property whose key is a nonnegative integer less than length.

js
const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 99, // ignored by reduceRight() since length is 3
};
console.log(Array.prototype.reduceRight.call(arrayLike, (x, y) => x - y));
// -1, which is 4 - 3 - 2

规范

Specification
ECMAScript Language Specification
# sec-array.prototype.reduceright

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看