这篇“javascript用函数式编程的原因是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“javascript用函数式编程的原因是什么”文章吧。 原因:1、js的语法是从Scheme这种函数式编程语言借鉴而来。2、就浏览器端而言,随着各种单页框架的发展,客户端的处理能力不断提升,越来越多的业务逻辑被放到端,从而导致客户端要维护的状态越来越多;随之而来的问题是,一不小心就会大量使用依赖于外部变量的函数,这些函数随着业务逻辑不断增加,从而导致逻辑分支剧增,状态难以追踪,代码可读性差,难以维护,而函数式编程有着很好的解决方案。本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。一、什么是函数式编程?函数式编程(Functional programming),简称 FP,并不是什么库或者框架,与过程式编程(Procedural programming)相对,而是一种编程范式。FP 通过声明纯函数抽象数据的处理,来避免或尽可能减少函数调用对于外部状态和系统产生的副作用。所谓副作用,大抵有改变函数外系统状态,向外抛出异常,处理用户操作,修改入参,数据库查操作,DOM操作等等可能会引起系统错误操作。二、为什么在 JavaScript 使用函数式编程思想2.1 从语言特性来看JavaScript 一开始的语法就是从 Scheme 这种函数式编程语言借鉴而来。随着语言标准的推进,语言本身的功能性不断丰富,闭包、箭头函数、高阶函数,数组迭代等等功能都让 JavaScript 中实现 FP 变得简单,简单讲几个特性:2.1.1. lambda 表达式lambda 表达式其实是一个匿名函数,使用箭头清晰的表示输入输出的映射关系,JavaScript 中使用箭头函数来实现。
constmultiply=x=>x*x multiply(6)//36
2.1.2 高阶函数高阶( Higher-order )函数可以接受一个或者多个函数作为入参,输出一个函数。简单写两个例子
constadd=x=>y=>x+y constadd10=add(10) add10(5)//15 constcompose=(...fns)=>x=>fns.reduce((acc,fn)=>fn(acc),x) consta=x=>x+1 constb=x=>x+2 constcomposedFn=compose(a,b) composedFn(1)//1+1+2=4
2.1.3 filter map forEach reduce 迭代Array.prototype 下的 filter map forEach reduce 都是高阶函数,因为入参是个函数。
constflatten=(arr=[])=>arr.reduce( (acc,val)=>accconcat(Array.isArray(val)?flatten(val):val), [] ) letarr=[1,[4,5],2,3]; flatten(arr)//[1,4,5,2,3]
2.2 从实际需求角度来看就浏览器端而言,随着各种单页框架的发展,客户端的处理能力不断提升,越来越多的业务逻辑被放到端,从而导致客户端要维护的状态越来越多。随之而来的问题是,我们一不小心就会大量使用依赖于外部变量的函数,这些函数随着业务逻辑不断增加,从而导致逻辑分支剧增,状态难以追踪,代码可读性差,难以维护,而 FP 恰恰有着很好的解决方案。另外,现在主流的编程语言基本上都引入函数式编程的特性,即使是以面向对象著称的 java,通过使用 stream + lambda 表达式,依然可以实践函数式编程思想,而 Spring5 更是将 Reactive 作为主要卖点,总之 FP 近来很火。而 JS 的函数式编程生态也在不断丰富, RxJS, circleJS 等框架在前端产线上的应用也越来越广。三、使用函数式的优点使用 FP 编程主要有以下几个优点:将数据和处理逻辑分离,代码更加简洁,模块化,可读性好容易测试,测试环境容易模拟逻辑代码可复用性强四、函数式编程相关概念函数式编程的实现主要依赖于:声明式编程纯函数不可变数据4.1 声明式编程声明式编程 Declarative programming 只描述目标的性质,从而抽象出形式逻辑,告诉计算机需要计算什么而不是如何一步步计算。例如正则、SQL、 FP 等。指令式编程 Imperative Programming 告诉计算机每一步的计算操作最简单的,相同的数组处理,使用 for 循环是指令式,用 map 之类的操作是声明式。使用声明式编程,简化了代码,提高了复用率,为重构留有余地。4.2 纯函数纯函数简要概括有两个特点:函数的输出只与输入有关,相同输入产生的输出一致,并不会不依赖外部条件函数调用不会改变函数域以外的状态或者变量,不会对系统产生副作用看个简单的例子:
letcounter=0 constincrement=()=>++counter constincrement=counter=>++counter
前一个函数每次调用都会修改外部变量的值,返回值也依赖于外部变量;后一个函数对于同一输入值每次返回的结果都相同,并且不会对外部状态造成影响。所以后一个是纯函数。为什么要追求函数的纯度,这就涉及到一个称为引用透明性的概念。4.2.1 引用透明性纯函数的这种函数的返回值只依赖于其输入值的特性,被称为引用透明性(referential transparency),纯函数都是可以进行缓存的。
constmemorize(pureFn){ const_cache={} return(...args)=>{ constkey=JSON.stringify(args) return_cache[key]||(_cache[key]=purFu.apply(null,args)) } }
4.3 Immutable Data「可变的全局状态是万恶之源」(其实从功能代码的角度看,局部和全局是相对而言的),简而言之可变状态会让程序的运行变得不可预测,代码可读性差,难以维护。在 JS 中,当函数入参是对象类型的数据时,我们拿到的其实是个引用,所以即使在函数内部我们也是可以修改对象内部的属性,这种情景依然会产生副作用。所以这个时候就需要引入 Immutable 的概念。 Immutable 即 unchangeable, Immutable data在初始化创建后就不能被修改了,每次对于 Immutable data 的操作都会返回一个新的 Immutable data。 所以并不会对原来的状态形成改变(当然不是简单的深拷贝再修改)。Immutable 比较流行的 JS 实现有 immutable-js 和 seamless-immutable; 对于 React 党来说, immutable-js 一点都不陌生, immutable-js 配合 Redux 就是一种很好的 FP 实践。
constmap1=Immutable.Map({a:1,b:{d:2},c:3}); constmap2=map1.set('a',50); map1===map2//false constmapb1=map1.get('b') constmapb2=map2.get('b') mapb1===mapb2//true
以上就是关于免费云主机、域名“javascript用函数式编程的原因是什么”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注云技术行业资讯频道。
相关推荐: Angular中如何使用FormArray和模态框
本篇内容介绍了“Angular中如何使用FormArray和模态框”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!使用FormArray制作动态表单。每创建一个表…