赞
踩
函数式编程(Functional Programming, FP),FP 是编程范式之一,我们常听说的编程范式还有面向过程编程、面向对象编程。
// 非函数式
let num1 = 2
let num2 = 3
let sum = num1+ num2
console.log(sum) // 5
// 函数式
function add (n1,n2) {
return n1 + n2
}
let sum = add(2,3)
console.log(sum) // 5
在 JavaScript 中函数就是一个普通的对象 (可以通过 new Function() ),我们可以把函数存储到变量/
数组中,它还可以作为另一个函数的参数和返回值,甚至我们可以在程序运行的时候通过 new
Function(‘alert(1)’) 来构造一个新的函数。
// 把函数赋值给变量 let fn = function () { console.log('Hello First-class Function') } fn() // 一个示例 const BlogController = { index (posts) { return Views.index(posts) }, show (post) { return Views.show(post) }, create (attrs) { return Db.create(attrs) }, update (post, attrs) { return Db.update(post, attrs) }, destroy (post) { return Db.destroy(post) } } // 优化 const BlogController = { index: Views.index, show: Views.show, create: Db.create, update: Db.update, destroy: Db.destroy }
// forEach函数 function forEach(array, fn) { for (let i = 0; i < array.length; i++) { fn(array[i]); } } let arr = [1, 2, 3, 5, 6, 8, 10]; forEach(arr, (item) => { console.log(item); // 1 2 3 5 6 8 10 }); // filter函数 function filter(array, fn) { let result = []; for (let i = 0; i < array.length; i++) { if (fn(array[i])) { result.push(array[i]); } } return result; } let r = filter(arr, (item) => { return item % 2 === 0; }); console.log(r); // [ 2, 6, 8, 10 ]
// 高阶函数-函数作为返回值
function makeFn() {
let msg = "Hello function";
return function () {
console.log(msg);
};
}
const fn = makeFn();
// 将函数返回值赋值给一个变量
fn(); // Hello function
// 函数自身执行两次
makeFn()(); // Hello function
// 只执行一次函数 function once(fn) { let flag = false; return function () { if (!flag) { flag = true; fn.apply(this, arguments); } }; } let pay = once(function (money) { console.log(`支付了${money}元`); // 支付了5元 }); // 不管调用几次都是只执行一次 pay(5); pay(10); pay(15); pay(5);
// map
// 返回一个新的数组,新数组的值是fn函数处理后的
const map = function (array, fn) {
let result = [];
for (let value of array) {
result.push(fn(value));
}
return result;
};
let arr = [1, 2, 3, 4];
arr = map(arr, (item) => item * item);
console.log(arr); // [ 1, 4, 9, 16 ]
// every
// 检测指定的条件是否全部匹配, 有一个不满足就返回false
const every = function (array, fn) {
let result = true;
for (let value of array) {
result = fn(value);
if (!result) {
break;
}
}
return result;
};
let arr2 = [5, 3, 6, 7, 9, 11];
let r = every(arr2, (item) => item > 6);
console.log(r); // false
// some // 检测指定的条件是否有匹配的,只要有一个匹配的就返回true const some = function (array, fn) { let result = false; for (let value of array) { result = fn(value); if (result) { break; } } return result; }; let arr3 = [3, 4, 5, 6, 7, 8, 9, 0]; let r2 = some(arr3, (item) => item === 2); console.log(r2); // false
// 生成计算数字的多少次幂的函数
function makePower(power) {
return function (number) {
return Math.pow(number, power);
};
}
// 求平方 定义一个n次方
let power2 = makePower(2);
let power3 = makePower(3);
// 根据不同的n次方再传入数值,最后得到 4的2次方 和 4的3次方
console.log(power2(4)); // 16
console.log(power3(4)); // 64
// 基本工资+绩效工资
function makeSalary(base) {
return function () {
return base + arguments[0];
};
}
// 定义基础工资数值
let salaryLevel1 = makeSalary(12000);
let salaryLevel2 = makeSalary(15000);
// 传入一个绩效,自动会去计算 基础工资 + 绩效
console.log(salaryLevel1(3000)); // 15000
console.log(salaryLevel1(5000)); // 17000
let arr = [1, 2, 3, 4, 5]; // 纯函数, 相同的参数获取到相同的结果 console.log(arr.slice(0, 3)); // [ 1, 2, 3 ] console.log(arr.slice(0, 3)); // [ 1, 2, 3 ] console.log(arr.slice(0, 3)); // [ 1, 2, 3 ] // 不纯函数 相同的参数得到不同的结果 console.log(arr.splice(0, 3)); // [ 1, 2, 3 ] console.log(arr.splice(0, 3)); // [ 4, 5 ] console.log(arr.splice(0, 3)); // [] // 自定义纯函数 function getSum(n1, n2) { return n1 + n2; } console.log(getSum(1,2)); // 3 console.log(getSum(1,2)); // 3 console.log(getSum(1,2)); // 3
// 获取圆面积的函数 function getArea(r) { console.log(r); // 2 return Math.PI * r * r; } // 模拟lodash中的memoize函数 做到缓存数据的作用 function memoize(f) { let cache = {}; return function () { // 将参数作为key 保存起来 (arguments是一个伪数组) let key = JSON.stringify(arguments); console.log(key); // {"0":2} 这里调用4次会执行4次 // 如果有这个key对应的值则使用,如果没有再调用函数 // 第一次会执行getArea()函数,之后再传入同样的参数将不会再调用getArea函数 cache[key] = cache[key] || f.apply(f, arguments); return cache[key] }; } // 纯函数的好处,可缓存, getArea函数将只会执行一次(2只输出了一次) let getAreaWithMemory = memoize(getArea) console.log(getAreaWithMemory(2)); // 12.566370614359172 console.log(getAreaWithMemory(2)); // 12.566370614359172 console.log(getAreaWithMemory(2)); // 12.566370614359172 console.log(getAreaWithMemory(2)); // 12.566370614359172
// 不纯的
let mini = 18
function checkAge (age) {
return age >= mini
}
// 纯的(有硬编码,后可以通过柯里化解决)
function checkAge (age) {
let mini = 18
return age >= mini
}
副作用让一个函数变的不纯(如上例),纯函数的根据相同的输入返回相同的输出,如果函数依赖于外部的状态就无法保证输出相同,就会带来副作用。
副作用来源:
// 普通的纯函数,不再依赖于外部变量 function checkAge(min, age) { return age >= min; } console.log(checkAge(18, 20)); 但是如果这么写min 这个基准数会一直重复 // 闭包的方式来处理,其实就是函数的柯里化 function checkAge(min) { return function (age) { return age >= min } } // ES6写法 let checkAge = (min) => (age) => age >= min; let checkAge18 = checkAge(18); let checkAge20 = checkAge(20); console.log(checkAge18(20)); // true console.log(checkAge20(20)); // true
const _ = require("lodash");
function getSum(a, b, c) {
return a + b + c;
}
const curried = _.curry(getSum);
// 以下三次结果一样,如果只传递部分参数会返回新的函数等待接收剩余参数
console.log(curried(1, 2, 3));
console.log(curried(1)(2, 3));
console.log(curried(1, 2)(3));
// 柯里化案例 const _ = require("lodash"); // 不使用柯里化时需要每次定义 "".match(/\s+/g); "".match(/\d+/g); // 使用柯里化改造之后 让一个函数生成一个函数 const match = _.curry(function (reg, str) { return str.match(reg); }); const haveSpace = match(/\s+/g); const haveNumber = match(/\d+/g); const filter = _.curry((func, array) => array.filter(func)); const findSpace = filter(haveSpace); console.log(haveSpace("hello world")); console.log(haveNumber("abc123")); console.log(filter(haveSpace, ["hello world", "hello_world"])); console.log(findSpace(["hello world", "hello_world"]));
function curry(func) {
return function curriedFn(...args) {
// 如果实参小于形参
if (args.length < func.length) {
return function () {
// 将所有参数合并起来再传递进来 arguments是一个伪数组需要变成一个数组
return curriedFn(...args.concat(Array.from(arguments)));
};
}
// 实参和形参个数相同或多于,调用 func,返回结果
return func(...args);
};
}
给 fn 函数输入参数 a,返回结果 b。可以想想 a 数据 通过一个管道得到了 b 数据。
当 fn 函数比较复杂的时候,我们可以把函数 fn 拆分成多个小函数,此时多了中间运算过程产生的 m 和 n。
fn = compose(f1, f2, f3)
b = fn(a)
// 函数组合演示 function compose(f, g) { return function (value) { return f(g(value)); }; } function reverse(array) { return array.reverse(); } function first(array) { return array[0]; } // 函数内参数,从右向左运行 const last = compose(first, reverse); console.log(last(["hello", "world"]));
const reverse = (arr) => arr.reverse();
const first = (arr) => arr[0];
const toUpper = (s) => s.toUpperCase();
const f = _.flowRight(toUpper, first, reverse);
console.log(f(["one", "two", "three"]));
function compose(...args) {
return function (value) {
// reduce参数是一个函数,函数内第一个参数是一个累计的结果,第二个参数是调用reduce的当前值
return args.reverse().reduce(function (acc, fn) {
return fn(acc);
}, value);
};
}
// ES6写法
const compose = (...args) => (value) => args.reverse().reduce((acc, fn) => fn(acc), value);
// 结合律(associativity)
let f = compose(f, g, h)
let associative = compose(compose(f, g), h) == compose(f, compose(g, h))
// 函数组合要满足结合律 那么结果也可以是
const associative = compose(toUpper, compose(first, reverse));
console.log(associative(["one", "two", "three"]));
// NEVER SAY DIE --> never-say-die const _ = require("lodash"); // 通过柯里化函数拿到对应位置的信息 const trace = _.curry(function (tag, v) { console.log(tag, v); return v; }); // 柯里化改造split const split = _.curry((sep, str) => return _.split(str, sep); ); // 柯里化改造join const join = _.curry((sep, arr) => _.join(arr, sep); ); // 柯里化改造map const map = _.curry((fn, arr) => _.map(arr, fn); ); const f = _.flowRight(join("-"),trace("toLower后"),map(_.toLower),trace("split后"),split(" ")); console.log(f("NEVER SAY DIE"));
const fp = require("lodash/fp");
const f = fp.compose(fp.join("-"), fp.map(fp.toLower), fp.split(" "));
console.log(f("NEVER SAY DIE"));
const _ = require("lodash");
console.log(_.map(["13", "22", "10"], parseInt));
// lodash中的map接收的第二个参数是函数,并且该函数有3个参数
// parseInt("13", 0, array);
// parseInt("22", 1, array);
// parseInt("10", 2, array);
const fp = require("lodash/fp");
// 而fp下的map方法第一个参数是函数,并且该函数只有一个参数,当前处理的元素
console.log(fp.map(parseInt, ["13", "22", "10"]));
Point Free:我们可以把数据处理的过程定义成与数据无关的合成运算,不需要用到代表数据的那个参
数,只要把简单的运算步骤合成到一起,在使用这种模式之前我们需要定义一些辅助的基本运算函数。
const f = fp.flowRight(fp.join('-'), fp.map(_.toLower), fp.split(' '))
// 非Point Free 模式
// Hello World => hello_world
function f(word) {
return word.toLowerCase().replace(/\s+/g, "_");
}
// Point Free 模式
const fp = require("lodash/fp");
const f = fp.flowRight(fp.replace(/\s+/g, "_"), fp.toLower);
console.log(f('Hello World'));
// 把一个字符串中的首字母提取并转换成大写,使用.作为分隔符
// world wild web => W. W. W
const fp = require('lodash/fp')
const firstLetterToUpper = fp.flowRight(fp.join('. '),fp.map(fp.flowRight(fp.first,fp.toUpper)),fp.split(' '))
console.log(firstLetterToUpper('world wild web'));
// Functor 函子 class Container { // 定义一个静态方法来创建一个新的函子 static of(value) { return new Container(value); } constructor(value) { this._value = value; } // 接收一个处理值的函数,把处理的结果传递给一个新的函子 map(fn) { return Container.of(fn(this._value)); } } let c = Container.of(5).map((x) => x + 1).map((x) => x * 6); console.log(c);
// 副作用 直接传入null 或者 undefined 会报错
let r = Container.of(null).map((x) => x.toUpperCase());
console.log(r);
// Cannot read property 'toUpperCase' of null
class MayBe { static of(value) { return new MayBe(value); } constructor(value) { this._value = value; } // 如果对空值变形的话直接返回 值为 null 的函子 map(fn) { return this.isNothing() ? MayBe.of(null) : MayBe.of(fn(this._value)); } isNothing() { return this._value === null || this._value === undefined; } } let r = MayBe.of(null).map((x) => x.toUpperCase()); console.log(r); // => MayBe { _value: null }
let r = MayBe.of(5)
.map((x) => x * 2)
.map((x) => null);
.map((x) => x + 1);
console.log(r); // => MayBe { _value: null }
class Left { static of(value) { return new Left(value); } constructor(value) { this._value = value; } map(fn) { return this; } } class Right { static of(value) { return new Right(value); } constructor(value) { this._value = value; } map(fn) { return Right.of(fn(this._value)); } }
function parseJSON(str) {
try {
return Right.of(JSON.parse(str));
} catch (e) {
return Left.of({ error: e.message });
}
}
let r = parseJSON('{name: zs}').map((x) => x.name.toUpperCase());
console.log(r); // => Left { _value: { error: 'Unexpected token n in JSON at position 1' } }
const fp = require("lodash/fp"); class IO { static of(value) { return new IO(function () { return value; }); } constructor(fn) { this._value = fn; } map(fn) { // 把当前的_value和传入的fn组合成一个新的函数 return new IO(fp.flowRight(fn, this._value)); } } // 这里始终会返回一个IO的函子 const r = IO.of(process).map((x) => x.execPath); console.log(r); console.log(r._value());
// Task函子处理异步任务 const { task } = require("folktale/concurrency/task"); const fs = require("fs"); const { split, find } = require("lodash/fp"); function readFile(filename) { return task((resolver) => { fs.readFile(filename, "utf-8", (err, data) => { if (err) resolver.reject(err); resolver.resolve(data); }); }); } readFile("package.json") .map(split("\n")) .map(find((x) => x.includes("version"))) .run() .listen({ onRejected: (err) => console.log(err), onResolved: (value) => console.log(value), });
class Container {
static of (value) {
return new Container(value)
}
……
}
Container.of(2).map(x => x + 5)
// IO函子 const fp = require("lodash/fp"); const fs = require("fs"); class IO { static of(value) { return new IO(function () { return value; }); } constructor(fn) { this._value = fn; } map(fn) { return new IO(fp.flowRight(fn, this._value)); } } // 模拟cat函数(先读取文件然后打印文件) let readFile = function readFile(fileName) { return new IO(function () { return fs.readFileSync(fileName, "utf-8"); }); }; let print = function print(x) { return new IO(function () { console.log(x); // 将接收到的IO函子再返回出去,从而可以进行链式调用 return x; }); }; let cat = fp.flowRight(print, readFile); // IO(IO(x)); cat实际上是一个嵌套的函子 // 第一个._value调用的print函数,因为调用由外部开始 第二个._value调用的是readFile let r = cat("package.json")._value()._value();
// monad (单子) class IO { static of(value) { return new IO(value); } constructor(fn) { this._value = fn; } map(fn) { return new IO(fp.flowRight(fn, this._value)); } join() { return this._value(); } floatMap(fn) { return this.map(fn).join(); } } let r = readFile("package.json").map(fp.toUpper).floatMap(print).join(); console.log(r);
以上就是在学习过程中对函数式编程的理解总结,还望大佬指点~~~
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。