JS 高阶函数 (`map`, `filter`, `reduce`) 的链式调用与效率

各位观众，掌声在哪里？（咳咳）今天呢，咱们聊聊 JavaScript 里的高阶函数，尤其是 map、filter、reduce 这哥仨的链式调用，以及效率问题。这仨家伙可是 JavaScript 里的瑞士军刀，用好了能让你的代码简洁流畅，但用不好也容易挖坑。

开场白：高阶函数是个啥？

先简单科普一下，啥叫高阶函数？简单来说，就是能接收函数作为参数，或者返回函数的函数。map、filter、reduce 正是这方面的代表。它们接受一个函数作为参数，然后对数组里的每个元素执行这个函数，最后返回一个新的数组（或者一个值，对于 reduce 来说）。

三剑客登场：map、filter、reduce

• map：一对一的映射

  map 的作用是对数组里的每个元素应用一个函数，并返回一个新的数组，新数组的元素就是原数组元素经过函数处理后的结果。就像一个流水线，每个元素都要经过处理。

  const numbers = [1, 2, 3, 4, 5];
  const squaredNumbers = numbers.map(number => number * number);
  console.log(squaredNumbers); // [1, 4, 9, 16, 25]

  这里，我们用 map 把 numbers 数组里的每个数字都平方了一下，得到了一个新的数组 squaredNumbers。

• filter：筛选器

  filter 的作用是根据指定的条件筛选数组中的元素，返回一个包含符合条件的元素的新数组。它就像一个过滤器，把不符合条件的元素都过滤掉。

  const numbers = [1, 2, 3, 4, 5, 6];
  const evenNumbers = numbers.filter(number => number % 2 === 0);
  console.log(evenNumbers); // [2, 4, 6]

  这里，我们用 filter 把 numbers 数组里的偶数筛选了出来，得到了一个新的数组 evenNumbers。

• reduce：化繁为简

  reduce 的作用是将数组中的元素归约为一个单一的值。它接受一个累加器函数和一个初始值（可选），然后遍历数组，将每个元素与累加器函数结合，最终返回一个累加结果。它就像一个搅拌机，把所有东西都搅成一坨。

  const numbers = [1, 2, 3, 4, 5];
  const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
  console.log(sum); // 15

  这里，我们用 reduce 把 numbers 数组里的所有数字加起来，得到了总和 sum。初始值是 0。

链式调用：让代码更优雅？

这三个家伙最酷的地方在于可以链式调用。也就是说，你可以把它们像乐高积木一样拼起来，让代码更加简洁易懂。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const result = numbers
  .filter(number => number % 2 === 0)  // 筛选偶数
  .map(number => number * number)      // 平方
  .reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 求和

console.log(result); // 220

这段代码先筛选出偶数，然后对偶数进行平方，最后求和。链式调用让代码看起来更加清晰，一气呵成。

效率问题：链式调用是银弹吗？

链式调用虽然优雅，但也不是没有代价的。每次调用 map、filter 或 reduce 都会创建一个新的数组。在上面的例子中，我们创建了两个中间数组：一个包含偶数的数组，一个包含平方数的数组。

这就引出了一个问题：链式调用会不会影响性能？答案是：视情况而定。

• 小数组：影响不大

  对于小数组来说，创建中间数组的开销可以忽略不计。链式调用带来的代码可读性提升远远大于性能损失。

• 大数组：需要考虑

  对于大数组来说，创建中间数组的开销就不可忽视了。每次遍历数组都会消耗时间和内存。

优化技巧：避免不必要的遍历

那么，如何优化链式调用呢？主要思路是尽量减少遍历次数。

1. 合并操作：能合则合

   如果多个操作可以合并成一个，那就尽量合并。例如，可以把 filter 和 map 合并成一个 map 操作。

   const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
   
   const result = numbers
     .map(number => {
       if (number % 2 === 0) {
         return number * number;
       } else {
         return null; // 或者其他不影响后续reduce的值，比如0，但要看具体业务
       }
     })
     .filter(number => number !== null) // 移除null
     .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
   
   console.log(result); // 220

   这个例子把 filter 和 map 合并成了一个 map 操作。注意，合并的时候需要考虑逻辑的复杂性，如果合并后的代码可读性降低，那就得不偿失了。

2. 尽早过滤：减少后续操作的数据量

   如果需要过滤掉大部分元素，那就尽量在链式调用的前面进行过滤。这样可以减少后续操作的数据量，提高效率。

   const numbers = Array.from({ length: 100000 }, (_, i) => i + 1); // 创建一个大数组
   
   const result = numbers
     .filter(number => number > 99900) // 先过滤掉大部分元素
     .map(number => number * number)
     .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
   
   console.log(result);

   这个例子先过滤掉大部分元素，只留下大于 99900 的元素，然后再进行后续操作。

3. 使用循环：在性能敏感的场景下

   在性能非常敏感的场景下，可以考虑使用传统的 for 循环来代替链式调用。虽然 for 循环的代码看起来比较冗长，但它可以避免创建中间数组，从而提高性能。

   const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
   let sum = 0;
   for (let i = 0; i < numbers.length; i++) {
     if (numbers[i] % 2 === 0) {
       sum += numbers[i] * numbers[i];
     }
   }
   console.log(sum); // 220

   这个例子使用 for 循环实现了与链式调用相同的功能。

4. 使用生成器函数（Generators）：处理大型数据集

   对于非常大的数据集，可以考虑使用生成器函数。生成器函数可以按需生成数据，避免一次性加载整个数据集到内存中。

   function* evenSquares(numbers) {
     for (const number of numbers) {
       if (number % 2 === 0) {
         yield number * number;
       }
     }
   }
   
   const numbers = Array.from({ length: 1000000 }, (_, i) => i + 1);
   
   let sum = 0;
   for (const square of evenSquares(numbers)) {
     sum += square;
   }
   
   console.log(sum); // 一个很大的数

   这个例子使用生成器函数 evenSquares 来生成偶数的平方。只有在需要的时候才会计算平方值，从而节省了内存。

一些不靠谱的优化方式 (仅供娱乐，不要在生产环境使用)

• 手写汇编 (不推荐)： 如果你对性能有极致的追求，可以尝试手写汇编代码。不过，这需要对底层硬件有深入的了解，而且代码可读性极差。

• 让浏览器厂商优化 (更不靠谱)： 你可以给浏览器厂商提 issue，让他们优化 map、filter、reduce 的性能。不过，这需要很长时间才能见效，而且不一定能达到你的预期。

总结：选择合适的工具

map、filter、reduce 是 JavaScript 里非常强大的工具。链式调用可以提高代码的可读性，但在处理大数组时需要注意性能问题。选择合适的工具，才能写出高效优雅的代码。

特性	map	filter	reduce
作用	转换数组元素	筛选数组元素	归约数组元素
返回值	新数组 (元素经过转换)	新数组 (符合条件的元素)	单一值
中间数组创建	每次调用都会创建	每次调用都会创建	通常不创建 (最终结果)
适用场景	需要转换数组元素时	需要筛选数组元素时	需要将数组归约为单一值时
性能考虑	小数组影响不大，大数组需要优化	小数组影响不大，大数组需要优化	对于大型数据集需要考虑初始值和累加函数
优化策略	合并操作，尽早过滤	尽早过滤	考虑初始值和累加函数的效率，避免重复计算

结束语：代码的艺术

编写代码不仅仅是完成任务，更是一门艺术。选择合适的工具，优化代码，让代码既能高效运行，又能赏心悦目。希望今天的讲座能对大家有所帮助。谢谢！