JavaScript 函数式编程
带你一步步了解javascript函数式编程
shanghua2020
这个作者很懒,什么都没留下…
展开
-
1-14、纯函数的副作用
我这个岁数的程序圆,学点东西不容易啊,不比你们精神小伙啊。所以。不废话了,赶紧努力吧!当数据需要依靠外部来源的时候,纯函数的结果就得不到相同输出,这就是副作用。外部数据:全局变量、接口数据、用户输入的信息。副作用让纯函数变得不纯,使方法的通用性下降,给程序带来安全隐患带来不稳定性。但是副作用不可能完全禁止,所以尽量控制它发生的范围。示例:// 不纯函数:min的发现改变时,函数的返回结果会发生变化let min = 18;function getAge(age) { return ag原创 2020-06-30 12:38:47 · 489 阅读 · 0 评论 -
1-13、纯函数的好处
我这个岁数的程序圆,学点东西不容易啊,不比你们精神小伙啊。所以。不废话了,赶紧努力吧!纯函数的好处:可缓存;可单元测试;并行处理,ES6以后可以通过(web worker)开启多线程。在多线程处理过程中,不需要访问共享的内存数据,可以任意运行。可缓存,示例1:// 安装loadsh库,npm i -D loadshconst _ = require('loadsh');function getArea(r) { console.log(r); return Math.原创 2020-06-30 11:49:33 · 220 阅读 · 0 评论 -
1-12、lodash 库
lodash.js 是一个很实用的js库,它提供了很多很实用的纯函数,对函数式编程非常的优好。在我看来,它补充了JS在处理数组及对象方面能力不足的缺陷。但是它毕竟只是一个工具而已。所以这个库我们就不多说了,自己上官网看api,这里演示几个小的例子。const _ = require('loadsh');let arr = [1,2,3,4,5]// first 查找第一个数组元素console.log(_.first(arr));// last 查找最后一个数组元素console.log原创 2020-06-22 18:36:46 · 185 阅读 · 0 评论 -
1-11、纯函数的概念
我这个岁数的程序圆,学点东西不容易啊,不比你们精神小伙啊。所以。一起加油吧!纯函数:相同的输入永久会得到一个相同的输出,而且没有 副作用(副作用,我们后几节再说)纯函数类似数学中的函数(用来描述输入和输出之间的关系)x=sin(y)看一个图例:1 ---- sin ----> 23 ---- sin ----> 45 ---- sin ----> 6左边135是一组输入数据,右边是一组输出数据246,中间的sin就是一个纯函数用来描述输入获取输出的过程,或者说用来描原创 2020-06-22 18:06:02 · 240 阅读 · 0 评论 -
1-9、闭包概念
我这个岁数的程序圆,学点东西不容易啊,不比你们精神小伙啊。所以。虽然如此,但我还是觉得闭包的概念其实不复杂,只是它的定义比较绕。官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。官方的解释我真的是看不懂啊,还是用大白话跟大家解释一下闭包。在一个作用域,去调用一个函数内部的函数,当我们调用内部函数的时候,可以访问到外部函数的成员,这就是闭包。还是不明白也没关系,直接看代码。function makeFn() { let原创 2020-06-18 18:49:02 · 137 阅读 · 0 评论 -
1-8-3、模拟ES6中的some函数
我这个岁数的程序圆,学点东西不容易,不比你们小年轻啊!!!所以。回顾:some()方法,es6中的方法。是对数组中每一项运行给定函数,如果该函数对有一项返回true,则返回true。用大白话讲就是:数组中元素有一个满条件返回true。这就是some和every的区别。const some = (arr3, fn) => { let res = ''; for (let value of arr3) { res = fn(value); if (res) break;原创 2020-06-18 17:34:09 · 331 阅读 · 0 评论 -
1-8-2、模拟ES6中的every函数
我这个岁数的程序圆,学点东西不容易,不比你们小年轻啊!!!所以。回顾:every()方法,es6中的方法。是对数组中每一项运行给定函数,如果该函数对每一项返回true,则返回true。跟上节一样,直接上代码吧。const every = (arr, fn) => { let result = true; for (let value of arr) { result = fn(value); if (!result) { break; } } return res原创 2020-06-18 17:01:28 · 237 阅读 · 0 评论 -
1-8-1、模拟ES6中的map函数
说明一下,1-7内容是函数式编程中高阶函数的概念解释,我们已经把它融合到了1-6中,所以1-7就不再单独做叙述。我这个岁数的程序圆,学点东西不容易,不比你们小年轻啊!!!所以我们这次先上代码,从代码进行分析吧。const map = (arr, fn) => { let result = []; for (let value of arr) { result.push(fn(value)); } return result;};let arr = [1, 2, 3, 4];/原创 2020-06-18 16:50:05 · 129 阅读 · 0 评论 -
1-6、函数作为返回值
函数做为返回值,其实就是用函数生成一个函数。上代码之前,我们再来回顾一下函数式编程的核心思想。函数式编程是把运算过程抽象成函数,在任何地方都可以调用这些函数。它的意义在于函数可以灵活使用,抽象帮我们屏蔽中间的运算细节,我们只关注最终实现的目标就可以了。示例-1:function once(fn) { let done = false; return function () { if (!done) { done = true; return原创 2020-06-18 15:55:22 · 645 阅读 · 0 评论 -
1-5、函数作为参数
高阶函数-函数作为参数优点:更加灵活 调用函数时不需要考虑它内部是如何实现的,它把内部实现的细节给我们封装好了 函数名更具有实际意义示例-1: /** * 模拟forEach * 这是一个遍历函数,但是我们不确实最终的结果是直接打印,还是输出到页面上,所以我们传入一个匿名函数,去自行处理 */function forEach(arr, fn) { for (var i in arr) { fn(arr[i]); }}let aaa = [1, 2, 3, 4, 5原创 2020-06-17 18:50:20 · 118 阅读 · 0 评论 -
1-4、函数赋值给变量
到了我这个岁数的人,函数就不用解释了吧,它是JS中一个普通对象,可以用 new Function()来构造一个新的函数。函数是一等公民,这些事大家都知道啊!但是下边的事你知道么?高阶函数:函数存储在变量中 函数作为参数 函数作为返回值这节我们来看一下,把函数赋值给变量。代码如下:// 把函数赋值给变量let abc = () => { console.log('this is a function');};abc();// 示例-1const def =原创 2020-06-16 21:29:06 · 4448 阅读 · 1 评论 -
1-3、什么是函数式编程
“函数式编程”首先要说一点,它是一种很古老的概念,它的历史可以追溯到第一台计算机的诞生。这么老,为什么还要学?因为它随着React的流行受到了越来越多的关注,React的生态组件里运用了大量的高阶函数,高阶函数就是函数式编程的一个特性。包括Vue3也开始运用函数式编程。所以你学不学?网上有太多的帖子来解释这个概念,但大多数帖子的解释都不太好理解。尤其像我这种上岁数的人,完全理解不了。现在我用最直白的大白话来解释一下它的概念,这要是再看不懂的话。我只能说:永别!!!!!函数式编程(Funct原创 2020-06-16 20:11:16 · 170 阅读 · 0 评论