JavaScript 函数进阶课题 - JavaScript学习系列文章

一、函数是一等公民在 JavaScript 中, 函数是一等公民(First-class Citizen). 这可不是随便给的称号,它意味着:1. 函数可以赋值给变量2. 函数可以作为参数传递3. 函数可以作为其他函数的返回值// 1. 赋值给变量const greet function(name) {returnHello,${name}!;};console.log(greet(Alice));// Hello, Alice!// 2. 作为参数传递functionsayHello(greetingFn, name) {console.log(greetingFn(name));}sayHello(greet,Bob);// Hello, Bob!// 3. 作为返回值functioncreateGreeter(greeting) {returnfunction(name) {return${greeting},${name}!;};}const sayHi createGreeter(Hi);console.log(sayHi(Charlie));// Hi, Charlie!二、高阶函数高阶函数(Higher-order Function)是指能够操作其他函数的函数, 它要么接受函数作为参数, 要么返回一个函数, 或者两者兼有. 2.1 接受函数作为参数:最常见的例子就是数组的方法了:const numbers [1,2,3,4,5];// map 是一个高阶函数它接受一个函数作为参数const doubled numbers.map(function(num) {return num *2;});console.log(doubled);// [2, 4, 6, 8, 10]// 用箭头函数更简洁const squared numbers.map(num num * num);console.log(squared);// [1, 4, 9, 16, 25]2.2 返回函数的函数:这种模式在创建特定功能的函数时特别有用:functionmultiplyBy(factor) {returnfunction(number) {return number * factor;};}const triple multiplyBy(3);console.log(triple(5));// 15const double multiplyBy(2);console.log(double(5));// 102.3 创建验证器(应用示例):functioncreateValidator(testFn, errorMsg) {returnfunction(value) {if (!testFn(value)) {thrownewError(errorMsg);}returntrue;};}const isNumber createValidator(valtypeof val number,必须是一个数字);const isPositive createValidator(val val 0,必须是正数);try {isNumber(abc);// 报错必须是一个数字}catch (e) {console.error(e.message);}try {isPositive(-5);// 报错必须是正数}catch (e) {console.error(e.message);}三、闭包闭包(Closure)是 JavaScript 中一个超级重要的概念. 简单说,闭包让函数可以记住创建时的环境.functioncreateCounter() {let count 0;// 这个变量被封闭在返回的函数中returnfunction() {count 1;return count;};}const counter createCounter();console.log(counter());// 1console.log(counter());// 2console.log(counter());// 3这里的神奇之处在于,count变量本该在createCounter执行完后就被销毁,但由于返回的函数引用了它, 它就活下来了!闭包的实际应用:functioncreateBankAccount(initialBalance) {let balance initialBalance;return {deposit:function(amount) {balance amount;return balance;},withdraw:function(amount) {if (amount balance) {thrownewError(余额不足);}balance - amount;return balance;},getBalance:function() {return balance;}};}const account createBankAccount(100);console.log(account.getBalance());// 100account.deposit(50);console.log(account.getBalance());// 150account.withdraw(75);console.log(account.getBalance());// 75// account.balance; // 无法直接访问实现了真正的私有变量四、函数柯里化柯里化(Currying)是把接受多个参数的函数变换成接受单一参数(最初函数的第一个参数)的函数, 并且返回接受余下参数的新函数的技术.听起来有点绕, 我们来看一个例子:// 普通函数functionadd(a, b, c) {return a b c;}// 柯里化版本functioncurriedAdd(a) {returnfunction(b) {returnfunction(c) {return a b c;};};}console.log(add(1,2,3));// 6console.log(curriedAdd(1)(2)(3));// 6手动写柯里化函数太麻烦, 我们可以写一个通用的柯里化工具函数:functioncurry(fn) {returnfunctioncurried(...args) {if (args.length fn.length) {return fn.apply(this, args);}else {returnfunction(...args2) {return curried.apply(this, args.concat(args2));};}};}// 使用const curriedAdd curry(add);console.log(curriedAdd(1)(2)(3));// 6console.log(curriedAdd(1,2)(3));// 6console.log(curriedAdd(1)(2,3));// 6柯里化的实际应用:// 日志函数functionlog(date, importance, message) {console.log([${date.getHours()}:${date.getMinutes()}] [${importance}]${message});}// 柯里化版本const curriedLog curry(log);// 创建特定时间的日志函数const logNow curriedLog(newDate());// 创建重要级别的日志函数const logNowWarning logNow(WARNING);// 使用logNowWarning(内存泄漏检测);// [当前时间] [WARNING] 内存泄漏检测柯里化的好处是我们可以创建一些基础函数, 然后通过部分应用参数来生成更具体的函数.五、函数组合函数组合(Function Composition)是把多个函数组合成一个新函数的过程. 基本组合示例functioncompose(f, g) {returnfunction(x) {returnf(g(x));};}functiondouble(x) {return x *2;}functionsquare(x) {return x * x;}const doubleThenSquare compose(square, double);console.log(doubleThenSquare(5));// 100 (先double得到10再square得到100)const squareThenDouble compose(double, square);console.log(squareThenDouble(5));// 50 (先square得到25再double得到50)多函数组合示例:functioncompose(...fns) {returnfunction(x) {return fns.reduceRight((acc, fn) fn(acc), x);};}functionadd1(x) {return x 1;}functionmul2(x) {return x *2;}functionsub3(x) {return x -3;}const transform compose(sub3, mul2, add1);console.log(transform(5));// 9// 计算过程// 1. add1(5) 6// 2. mul2(6) 12// 3. sub3(12) 9六、偏函数应用偏函数应用(Partial Application)是指固定一个函数的一些参数, 然后产生另一个更小元的函数. 看一个示例:// 简单的偏函数实现functionpartial(fn, ...presetArgs) {returnfunction(...laterArgs) {return fn.apply(this, [...presetArgs, ...laterArgs]);};}// 使用functiongreet(greeting, name, punctuation) {return${greeting},${name}${punctuation};}const sayHello partial(greet,Hello);const sayHelloToJohn partial(greet,Hello,John);console.log(sayHello(Alice,!));// Hello, Alice!console.log(sayHelloToJohn(!!!));// Hello, John!!!柯里化: 每次只接受一个参数返回一个新函数, 直到所有参数都收集完.偏函数: 一次可以接受多个参数固定这些参数, 返回一个需要剩余参数的函数.七、省略不必要的参数, Point-Free风格Point-Free 风格是一种编程风格,其中函数定义不显式地提到它们所操作的数据(即没有点).我们来看个示例:// 非 Point-FreefunctionisOdd(x) {return x %2 1;}const numbers [1,2,3,4,5];console.log(numbers.filter(xisOdd(x)));// Point-FreeconstisOdd x x %2 1;console.log(numbers.filter(isOdd));八、函子函子是一个实现了map方法的对象, 它允许你在不直接操作值的情况下对值进行转换. 我们来看个简单的示例:const plus1 x x 1;[1, 2, 3].map(plus1);// [2, 3, 4]classBox {constructor(value) {this.value value;}map(fn) {returnnewBox(fn(this.value));}toString() {returnBox(${this.value});}}const result newBox(5).map(x x *2).map(x x 1);console.log(result.toString());// Box(11)