JavaScript 中的函数式

前言

JavaScript 好学吗？首先我们知道 JavaScript 是前端开发中非常核心的技术，单独从 JavaScript 在前端开发中，页面数据交互以及页面动态效果层面来讲，JS 技术并不难，甚至可以说 JS 和 HTML/CSS 一样是非常简单的语言。但是在JS相关的拓展功能的使用层面，真正能非常好的运用 JS 则需要大家不断地去探索。

什么是JS

JavaScript 是一种直译式的脚本语言，它是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被成为是 JavaScript 引擎，是浏览器的一部分，现在被广泛地用于客户端。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式风格。

JS中的函数式编程

函数式编程是一种编程范式，强调使用纯函数、不可变数据和函数组合来构建程序。我个人非常喜欢函数式编程，心血来潮总结一下 JavaScript 里的函数式用法。

1. 纯函数（Pure Functions）

纯函数是指不依赖于外部状态且不产生副作用的函数。给定相同的输入，纯函数总是返回相同的输出。

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

// 非纯函数，依赖于外部状态
let counter = 0;
function increment() {
    counter++;
    return counter;
}

2. 不可变性（Immutability）

不可变性是指数据一旦创建就不能被修改。在函数式编程中，通常通过创建新的数据而不是修改现有数据来实现不可变性。

// 使用不可变性
const arr = [1, 2, 3];
const newArr = [...arr, 4]; // 创建新数组，而不是修改原数组

3. 高阶函数（Higher-Order Functions）

高阶函数是指接受一个或多个函数作为参数，或者返回一个函数的函数。

// 高阶函数
function map(array, fn) {
    return array.map(fn);
}

const numbers = [1, 2, 3];
const doubled = map(numbers, x => x * 2); // [2, 4, 6]

4. 函数组合（Function Composition）

函数组合是指将多个函数组合成一个函数，使得一个函数的输出成为下一个函数的输入。

// 函数组合
const compose = (f, g) => x => f(g(x));

const add1 = x => x + 1;
const multiply2 = x => x * 2;

const addThenMultiply = compose(multiply2, add1);
console.log(addThenMultiply(5)); // 12

5. 柯里化（Currying）

柯里化是指将一个多参数函数转换为一系列单参数函数的过程。

// 柯里化
function add(a) {
    return function(b) {
        return a + b;
    };
}

const add5 = add(5);
console.log(add5(10)); // 15

6. 递归（Recursion）

递归是指函数调用自身的过程。在函数式编程中，递归常用于替代循环。

// 递归
function factorial(n) {
    if (n === 0) return 1;
    return n * factorial(n - 1);
}

console.log(factorial(5)); // 120

7. 闭包（Closures）

闭包是指函数能够访问其词法作用域中的变量，即使函数在其词法作用域之外执行。

// 闭包
function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

常用函数式编程工具

JavaScript 提供了一些内置的高阶函数，如 map、filter、reduce 等，这些函数非常适合函数式编程。

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

// map
const doubled = numbers.map(x => x * 2); // [2, 4, 6, 8, 10]

// filter
const evens = numbers.filter(x => x % 2 === 0); // [2, 4]

// reduce
const sum = numbers.reduce((acc, x) => acc + x, 0); // 15