核心概念

要理解函数式编程，我们先要了解纯函数和高阶函数，它们的概念是比较抽象的，我们直接迂回从使用场景入手，快速入门

纯函数

纯函数不依赖于外部状态，也不会改变外部状态，只根据输入参数进行计算并返回结果

// 纯函数示例
function add(a, b) {
  return a + b;
}

const result = add(2, 3);
console.log(result); // 5

add是一个纯函数，它的输出只依赖于输入参数a和b，并且没有产生任何副作用

高阶函数

高阶函数可以将其他函数作为参数传递，也可以返回一个新的函数，从而实现代码的灵活组合和复用

// 高阶函数示例
function double(fn, x) {
  return fn(x) * 2;
}

function square(x) {
  return x * x;
}

const result = double(square, 3);
console.log(result); // 18

double接受一个函数和一个参数，并将函数的结果乘以2返回。通过参数将square传递给double，实现了对square的功能扩展

柯里化是高阶函数的结晶之一，不太熟悉的小伙伴可以看看这篇文章 # # 柯里化其实就是这么回事，别被高大上的名词骗了——拒绝“八股文”

函数式编程的优势

优势	detail
可维护性	函数式编程强调函数的纯粹性和不可变性，使得代码更容易理解和维护。由于没有副作用和外部状态的依赖，函数之间的关系更加清晰，减少了代码出错的可能性
可读性	函数式编程通常使用声明式的风格，将代码逻辑表达为更接近“人话”的方式，提高了代码的可读性。函数的命名和组合规则使得代码更易于理解和推理
可测试性	函数式编程鼓励将代码拆分为小的、独立的函数，每个函数都可以进行单独的测试。这种模块化的设计使得测试更容易，并且减少了代码之间的耦合度
并行和并发	函数式编程对于并行和并发处理有很大的优势。由于纯函数不依赖于外部状态，相同的输入将永远产生相同的输出，使得代码更容易并行执行，从而提高了性能

实际应用

数组操作

函数式编程鼓励使用高阶函数来操作数组，例如map、filter和reduce，它们不改变原数组，而是返回新的数组，相对于forEach等改变原数组的方法更加安全

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function (num) {
  return num * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

上述代码中，我们使用map方法和一个纯函数，将原数组中的每个元素都乘以2，并返回了一个新数组

函数组合

函数式编程鼓励将小的纯函数组合为更复杂的功能。通过将多个函数顺序调用或者嵌套调用，形成函数链，实现代码逻辑的组合和复用

function add(a, b) {
  return a + b;
}

function square(x) {
  return x * x;
}

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

const result = double(square(add(1, 2)));

console.log(result); // 18

我们通过add、square、double函数依次调用，实现了对数字的加法、平方和乘以2的操作

结语

函数式编程作为一种思想和范式，在前端开发中发挥着越来越重要的作用。对个人来讲，学习函数式编程是一个量变产生质变的过程，在这个过程中给大家2个小建议：
（1）尽可能地将业务逻辑抽象为纯函数，它们接受输入参数并返回输出，没有任何可观察的副作用
（2）合理使用lodash、ramda等工具库，并学习借鉴其中的写法和思想

我是前端霸哥，愿你的代码中没有bug
希望本篇文章能为大家提供帮助，写的不好的地方，欢迎各位小伙伴批评指正

函数式编程——提升前端代码质量的利器