最近和一些同窗讨论了函数式编程,不少同窗总以为听起来很高大上,但用起来却无从下手。因而我抽时间捋了捋,将平时工做中用到的函数式编程案例和思想整理了出来,相信阅读本文后,你们都能快速上手函数式编程。javascript
函数式编程目前使用范围很是广,经常使用的框架,语言几乎都能看到它的身影。css
本文将经过如下 3 个部分来深刻函数式编程。html
编程范式 指的是一种编程风格,它描述了程序员对程序执行的见解。在编程的世界中,同一个问题,能够站在多个角度去分析解决,这些不一样的解决方案就对应了不一样的编程风格。前端
常见的编程范式有:vue
命令式编程java
面向过程编程react
面向对象编程webpack
声明式编程程序员
函数式编程web
命令式编程 是使用最广的一种编程风格,它是站在计算机的角度去思考问题,主要思想是 关注计算机执行的步骤,即一步一步告诉计算机先作什么再作什么。
因为存在不少须要控制的步骤,因此命令式编程广泛存在如下特色:
根据这些特色,咱们来分析一个命令式编程案例:
// 需求:筛选出数组中为奇数的子集合 const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // 步骤1:定义执行结果变量 let reult = []; // 步骤2:控制程序循环调用 for (let i = 0; i < array.length; i++) { // 步骤3:判断筛选条件 if (array[i] % 2 !== 0) { // 步骤4:加入执行结果 reult.push(array[i]); } } // 步骤5:获得最终的结果 result
以上代码经过 5 个步骤,实现了数组的筛选,这并无什么问题,但细心的同窗可能会感到疑惑:这样写的代码量太长了,并且并不语义化,只有阅读完每一行的代码,才知道具体执行的是什么逻辑。
没错,这就是命令式编程的典型特色,除此以外,还有如下几点:
声明式编程 一样是一种编程风格,它经过定义具体的规则,以便系统底层能够自动实现具体功能。主要思想是 告诉计算机应该作什么,但不指定具体要怎么作。
因为须要定义规则来表达含义,因此声明式编程广泛存在如下特色:
接下来,咱们将上文中的数组筛选,用声明式的方式重构一下:
// 筛选出数组中为奇数的子集合 const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const reult = array.filter((item) => item % 2 !== 0);
能够看到,声明式编程没有冗余的操做步骤,代码量很是少,而且很是语义化,当咱们读到 filter 的时候,天然而然就知道是在作筛选。
咱们再看一个案例:
# 使用 sql 语句,查询 id 为 25 的学生 select * from students where id=25
在上述代码中,咱们只是告诉计算机,我想查找 id 为 25 的同窗,计算机就能给咱们返回对应的数据了,至因而怎么查找出来的,咱们并不须要关心,只要结果是正确的便可。
除了上述例子以外,还有不少声明式编程的案例:
有了以上几个案例,咱们来总结一下声明式编程的优缺点:
函数式编程 属于声明式编程中的一种,它的主要思想是 将计算机运算看做为函数的计算,也就是把程序问题抽象成数学问题去解决。
函数式编程中,咱们能够充分利用数学公式来解决问题。也就是说,任何问题均可以经过函数(加减乘除)和数学定律(交换律、结合律等),一步一步计算,最终获得答案。
函数式编程中,全部的变量都是惟一的值,就像是数学中的代数 x、y,它们要么还未解出来,要么已经被解出为固定值,因此对于:x=x+1
这样的自增是不合法的,由于修改了代数值,不符合数学逻辑。
除此以外,严格意义上的函数式编程也不包括循环、条件判断等控制语句,若是须要条件判断,可使用三元运算符代替。
文章开头咱们提到了 webpack-chain,咱们一块儿来看一下:
// 使用 webpack-chain 来编写 webpack 配置。 const Config = require('webpack-chain'); const config = new Config(); config. .entry('index') .add('src/index.js') .end() .output .path('dist') .filename('my-first-webpack.bundle.js'); config.module .rule('compile') .test(/.js$/) .use('babel') .loader('babel-loader') module.exports = config;
能够看到,webpack-chain 能够经过链式的函数 api 来建立和修改 webpack 配置,从而更方便地建立和修改 webpack 配置。试想一下,若是一份 webpack 配置须要用于多个项目,但每一个项目又有一些细微的不一样配置,这个应该怎么处理呢?
若是使用 webpack-chain 去修改配置,一个函数 api 就搞定了,而使用命令式的编程,则须要去逐步遍历整个 webpack 配置文件,找出须要修改的点,才能进行修改,这无疑就大大减小了咱们的工做量。
根据维基百科权威定义,函数式编程有如下几个特色:
函数是一等公民
只用表达式,不用语句:
无反作用
不可变性
引用透明
以上的特色都是函数式编程的核心,基于这些特色,又衍生出了许多应用场景:
这些应用场景都大量存在于咱们的平常工做中,接下来咱们经过几个案例来实战一下。
基于函数式编程的应用场景,咱们来实现几个具体的案例。
一、函数组合,组合多个函数步骤。
function compose(f, g) { return function () { return f.call(this, g.apply(this, arguments)); }; } function toLocaleUpperCase(str) { return str.toLocaleUpperCase(); } function toSigh(str) { return str + "!"; } // 将多个函数按照前后执行顺序组合成一个函数,简化多个调用步骤。 const composedFn = compose(toSigh, toLocaleUpperCase); console.log("函数组合:", composedFn("msx")); // 函数组合:MSX!
二、柯里化,将一个多参数函数转化为多个嵌套的单参数函数。
// 柯里化 function curry(targetfn) { var numOfArgs = targetfn.length; return function fn(...rest) { if (rest.length < numOfArgs) { return fn.bind(null, ...rest); } else { return targetfn.apply(null, rest); } }; } // 加法函数 function add(a, b, c, d) { return a + b + c + d; } // 将一个多参数函数转化为多个嵌套的单参数函数 console.log("柯里化:", curry(add)(1)(2)(3)(4)); // 柯里化:10
三、偏函数,缓存一部分参数,而后让另外一些参数在使用时传入。
// 偏函数 function isTypeX(type) { return function (obj) { return Object.prototype.toString.call(obj) === `[object ${type}]`; }; } // 缓存一部分参数,而后让另外一些参数在使用时传入。 const isObject = isTypeX("Object"); const isNumber = isTypeX("Number"); console.log("偏函数测试:", isObject({ a: 1 }, 123)); // true console.log("偏函数测试:", isNumber(1)); // true
四、惰性求值,预先定义多个操做,但不当即求值,在须要使用值时才去求值,能够避免没必要要的求值,提高性能。
// 这里使用 C# 中的 LINQ 来演示 // 假设数据库中有这样一段数据 db.Gems [4,15,20,7,3,13,2,20]; var q = db.Gems .Select(c => c < 10) .Take(3) // 只要不调用 ToList 就不会求值 // 在具体求值的时候,会将预先定义的方法进行优化整合,以产生一个最优的解决方案,才会去求值。 .ToList();
上述代码中,传统的求值会遍历 2 次,第一次遍历整个数组(8 项),筛选出小于 10 的项,输出 [4,7,3,2]
,第二次遍历这个数组(4 项),输出 [4,7,3]
。
若是使用惰性求值,则会将预先定义的全部操做放在一块儿进行判断,因此只须要遍历 1 次就能够了。在遍历的同时判断 是否小于 10
和 小于 10 的个数是否为 3
,当遍历到第 5 项时,就能输出 [4,7,3]
。
相比传统求值遍历的 8+4=12 项,使用惰性求值则只需遍历 5 项,程序的运行效率也就天然而然地获得了提高。
五、高阶函数,能够加工函数的函数(接收一个或多个函数做为输入、输出一个函数)。
// React 组件中,将一个组件,封装为带默认背景色的新组件。 // styled-components 就是这个原理 function withBackgroundRedColor (wrapedComponent) { return class extends Component { render () { return (<div style={backgroundColor: 'red} > <wrapedComponent {...this.props} /> </div>) } } }
六、递归和尾递归。
// 普通递归,控制函数循环调用的一种方式。 function fibonacci(n) { if (n === 0) { return 0; } if (n === 1) { return 1; } return fibonacci(n - 1) + fibonacci(n - 2); } console.log("没有使用尾递归,致使栈溢出", fibonacci(100)); // 尾递归,避免多层级函数嵌套致使的内存溢出的优化。 function fibonacci2(n, result, preValue) { if (n == 0) { return result; } return fibonacci2(n - 1, preValue, result + preValue); } // result = 0, preValue = 1 console.log("使用了尾递归,不会栈溢出", fibonacci2(100, 0, 1));
六、链式调用
// lodash 中,一个方法调用完成以后,能够继续链式调用其余的方法。 var users = [ { user: "barney", age: 36 }, { user: "fred", age: 40 }, { user: "pebbles", age: 1 }, ]; var youngest = _.chain(users) .sortBy("age") .map(function (o) { return o.user + " is " + o.age; }) .head() .value(); // => 'pebbles is 1'
本文从编程范式开始,分析了函数式编程的定位,进一步引伸出函数式编程的概念,而后基于一些工做中的案例,实战了函数式编程的应用场景,但愿你们都能轻松地认识函数式编程。
最后,若是你对此有任何想法,欢迎留言评论!