纯函数

函数式编程中的函数都是纯函数，即函数输入相同，输出也必定相同，而且不会对外部状态造成副作用。这样的函数具有可测试性、可维护性和可复用性等优点。

下面是一个非纯函数的例子：

let count = 0;
function add(num){
  count += num;
  return count;
}
console.log(add(1)); // 1
console.log(add(2)); // 3

上述函数 add 在每次调用时都会改变全局变量 count 的值，从而产生了副作用。如果需要实现累加器功能，可以使用闭包来封装状态：

function createAdder(){
  let count = 0;
  return function(num){
    count += num;
    return count;
  }
}
const add = createAdder();
console.log(add(1)); // 1
console.log(add(2)); // 3

上述代码中，使用闭包将状态 count 封装到函数 createAdder 内部，实现了累加器的功能，并且不会污染全局变量。

高阶函数

函数式编程中的高阶函数指的是能够接受函数作为参数或返回函数的函数。高阶函数有助于实现函数的组合和抽象，从而简化代码的逻辑。

下面是一个接受函数作为参数的高阶函数示例：

function filter(array, predicate){
  const result = [];
  for(let i = 0; i < array.length; i++){
    if(predicate(array[i])){
      result.push(array[i]);
    }
  }
  return result;
}
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = filter(numbers, n => n % 2 === 0);
console.log(evenNumbers); // [2, 4]

上述代码中，filter函数接受一个数组和一个谓词函数作为参数，然后通过遍历数组并执行谓词函数来筛选出符合条件的元素。这个例子展示了函数作为参数的应用场景。

下面是一个返回函数的高阶函数示例：

function multiplyBy(factor){
  return function(number){
    return number * factor;
  };
}
const double = multiplyBy(2);
console.log(double(3)); // 6

上述代码中，multiplyBy函数返回一个匿名函数，该函数实现了乘法运算。然后通过调用 multiplyBy(2) 来获取实际的乘数，从而得到一个新的函数 double，该函数能够将传入的参数乘以 2。这个例子展示了函数作为返回值的应用场景。

组合函数

函数式编程中，函数的组合指的是将多个函数串联起来形成一个新的函数。组合函数有助于将逻辑分解为多个小块，提高代码的可读性和复用性。

下面是一个组合函数的示例：

function compose(...fns){
  return function(value){
    return fns.reduceRight((acc, fn) => {
      return fn(acc);
    }, value);
  };
}
function addOne(x){
  return x + 1;
}
function double(x){
  return x * 2;
}
const addOneAndDouble = compose(double, addOne);
console.log(addOneAndDouble(3)); // 8

上述代码中，compose函数接受任意个函数作为参数，并返回一个新的函数，该函数能够将所有参数函数从右至左依次执行，并将执行结果作为下一个函数的参数。这个例子展示了函数组合在Web 前端开发中的实际应用。

Curry 化

Curry 化是一种将多参数函数转换为单参数函数的技术。通过 Curry 化，我们可以更方便地对函数进行组合和抽象。

下面是一个 Curry 化的示例：

function curry(fn){
  return function curried(...args){
    if(args.length >= fn.length){
      return fn.apply(this, args);
    } else {
      return function(...rest){
        return curried.apply(this, args.concat(rest));
      };
    }
  };
}
function add(x, y, z){
  return x + y + z;
}
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6

上述代码中，curry函数接受一个多参数函数fn 作为参数，并返回一个新的函数curried，该函数能够自动适配不同数量的参数。当传入的参数数量达到原函数 fn 的参数个数时，curried函数会立即调用原函数并返回结果；否则，curried函数会返回一个新的函数，该函数继续接受剩余的参数，并递归调用自身。这个例子展示了 Curry 化在 Web 前端开发中的实际应用。

总结

函数式编程是一种强调函数运算、避免副作用和可变状态的编程范式，它在 Web 前端开发中具有广泛的应用。纯函数、高阶函数、组合函数和 Curry 化等技术都是函数式编程的核心概念，掌握这些技术能够让我们编写更加清晰、简洁和易于维护的代码。