JS `Array.prototype.reduceRight()`：从右到左遍历数组并累加

各位观众，大家好！今天咱们不聊鸡汤，来点硬核的——JS 数组的 reduceRight() 方法。这玩意儿，说白了，就是个数组累加器，但它有个特别的癖好，喜欢从右往左开始“啃”。

啥是 reduceRight()？为啥要有它？

在 JavaScript 的世界里，数组是个很常见的数据结构。我们经常需要对数组里的元素进行一些聚合操作，比如求和、求平均值、拼接字符串等等。reduce() 方法就是干这个的，它从左往右遍历数组，把数组里的每个元素“喂”给一个回调函数，最终得到一个累积的结果。

那么问题来了，既然有了 reduce()，为啥还要搞个 reduceRight() 出来？这就好比，都有筷子了，为啥还要发明叉子？存在即合理嘛！

reduceRight() 和 reduce() 的区别就在于遍历数组的方向不同。reduce() 从左往右，reduceRight() 从右往左。听起来好像没什么大不了的，但有些场景下，这个顺序就至关重要了。举个例子，如果你要用数组里的元素来构建一个复杂的对象，元素的顺序会影响最终的结果，这时候 reduceRight() 可能就是你的救星。

reduceRight() 的语法结构

reduceRight() 的语法很简单，但也需要稍稍注意：

array.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])

callback: 这是个回调函数，它会在数组的每个元素上执行。它接收四个参数：
- accumulator: 累加器。它是上一次回调函数的返回值，或者是 initialValue（如果提供了的话）。
- currentValue: 当前元素的值。
- index (可选): 当前元素的索引。
- array (可选): 调用 reduceRight() 的数组本身。
initialValue (可选): 初始值。如果提供了这个值，那么第一次执行回调函数的时候，accumulator 的值就是它。如果没有提供，那么第一次执行回调函数的时候，accumulator 的值就是数组的最后一个元素，currentValue 则是倒数第二个元素。

reduceRight() 的工作原理

reduceRight() 的工作流程大致如下：

从数组的最后一个元素开始，往前遍历。
对于每个元素，执行 callback 函数。
callback 函数的返回值会成为下一次执行 callback 函数时的 accumulator。
最终，reduceRight() 返回最后一次 callback 函数的返回值。

代码示例，来点实在的

光说不练假把式，咱们来几个代码示例，看看 reduceRight() 到底能干啥。

示例 1: 反向拼接字符串

const words = ['lorem', 'ipsum', 'dolor', 'sit', 'amet'];

const reversedString = words.reduceRight((accumulator, currentValue) => {
  return accumulator + ' ' + currentValue;
});

console.log(reversedString); // 输出: amet sit dolor ipsum lorem

在这个例子中，我们用 reduceRight() 把数组里的字符串反向拼接起来。如果用 reduce()，结果就是 lorem ipsum dolor sit amet。

示例 2: 计算阶乘

function factorial(n) {
  if (n === 0) {
    return 1;
  }
  const numbers = Array.from({ length: n }, (_, i) => i + 1); // 创建一个包含 1 到 n 的数组
  return numbers.reduceRight((accumulator, currentValue) => {
    return accumulator * currentValue;
  });
}

console.log(factorial(5)); // 输出: 120 (5 * 4 * 3 * 2 * 1)

这里，我们先创建一个包含 1 到 n 的数组，然后用 reduceRight() 从 n 开始往下乘，最终得到阶乘的结果。虽然用 reduce() 也能实现，但 reduceRight() 在逻辑上更符合阶乘的计算方式。

示例 3: 构建嵌套对象

const keys = ['a', 'b', 'c', 'd'];

const nestedObject = keys.reduceRight((accumulator, currentValue) => {
  return { [currentValue]: accumulator };
}, null);

console.log(nestedObject);
// 输出: { d: { c: { b: { a: null } } } }

这个例子展示了 reduceRight() 在构建嵌套对象方面的优势。我们从 null 开始，逐步把每个 key 嵌套进去，最终得到一个层层嵌套的对象。如果用 reduce()，你需要先创建一个空对象，然后从最外层开始构建，逻辑会稍微复杂一些。

示例 4: 模拟管道 (Pipeline) 操作

function add(x) {
  return x + 1;
}

function multiply(x) {
  return x * 2;
}

function subtract(x) {
  return x - 3;
}

const operations = [add, multiply, subtract];

function pipeline(input, operations) {
  return operations.reduceRight((accumulator, operation) => {
    return operation(accumulator);
  }, input);
}

const result = pipeline(5, operations);
console.log(result); // 输出: 9  (5 + 1) * 2 - 3 = 9

在这个例子中，我们模拟了一个简单的管道操作。operations 数组包含了一系列函数，pipeline 函数使用 reduceRight() 从右往左依次执行这些函数，把上一个函数的输出作为下一个函数的输入。这在函数式编程中非常常见。

注意事项，避免踩坑

在使用 reduceRight() 的时候，需要注意以下几点：

空数组: 如果 reduceRight() 应用于空数组，并且没有提供 initialValue，那么会抛出一个 TypeError 错误。所以，在使用 reduceRight() 之前，最好先检查一下数组是否为空。
initialValue 的作用: initialValue 非常重要。如果你不提供 initialValue，那么 accumulator 的初始值就是数组的最后一个元素，这可能会导致一些意想不到的结果。因此，尽量提供 initialValue，尤其是当你处理的是数字或者对象的时候。
性能: 虽然 reduceRight() 很方便，但在处理大型数组的时候，性能可能会受到影响。如果对性能要求很高，可以考虑使用循环来代替。但通常来说，reduceRight带来的可读性提升远大于那一点点性能损耗。
可读性: reduceRight() 可以使代码更简洁，但同时也可能降低可读性。在使用 reduceRight() 之前，要权衡一下代码的简洁性和可读性，确保你的代码能够被其他人理解。

reduceRight() 与 reduce() 的对比

为了更清晰地理解 reduceRight()，我们把它和 reduce() 放在一起对比一下：

特性	`reduce()`	`reduceRight()`
遍历方向	从左往右	从右往左
应用场景	大部分数组聚合操作	需要考虑元素顺序的聚合操作，如反向拼接、构建嵌套对象等
`initialValue`	如果没有提供，`accumulator` 初始值为数组的第一个元素	如果没有提供，`accumulator` 初始值为数组的最后一个元素

reduceRight() 的高级用法

除了上面这些基本的用法，reduceRight() 还可以用于一些更高级的场景，比如：

实现函数组合: reduceRight() 可以用来实现函数的组合 (composition)。函数组合是指将多个函数组合成一个函数，使得前一个函数的输出成为后一个函数的输入。

const compose = (...fns) => (x) => fns.reduceRight((v, f) => f(v), x);

const addOne = (x) => x + 1;
const double = (x) => x * 2;
const square = (x) => x * x;

const composedFunction = compose(square, double, addOne); // (x + 1) * 2  然后平方

console.log(composedFunction(2)); // 输出: 36  ((2 + 1) * 2)^2 = 36

深度优先搜索 (DFS): 在树或者图的深度优先搜索中，reduceRight() 可以用来简化代码。

总结

reduceRight() 是一个强大的数组累加器，它从右往左遍历数组，并把数组里的元素聚合成一个单一的值。掌握 reduceRight() 可以让你写出更简洁、更优雅的代码。但是，也要注意它的局限性，避免过度使用，以免降低代码的可读性。

希望今天的讲解能帮助大家更好地理解 reduceRight()。记住，编程不仅仅是写代码，更重要的是理解代码背后的思想。只有理解了思想，才能灵活运用各种工具，写出高质量的代码。

好了，今天的讲座就到这里。感谢大家的收听！我们下次再见！

发表回复 取消回复

发表回复取消回复