一文带你了解JavaScript函数式编程
摘要: 函数式编程入门。
- 作者:浪里行舟
Fundebug经授权转载,版权归原作者所有。
前言
函数式编程在前端已经成为了一个非常热门的话题。在最近几年里,我们看到非常多的应用程序代码库里大量使用着函数式编程思想。
本文将略去那些晦涩难懂的概念介绍,重点展示在 JavaScript 中到底什么是函数式的代码、声明式与命令式代码的区别、以及常见的函数式模型都有哪些?想优质文章请猛戳GitHub博客。
一、什么是函数式编程
函数式编程是一种编程范式,主要是利用函数把运算过程封装起来,通过组合各种函数来计算结果。函数式编程意味着你可以在更短的时间内编写具有更少错误的代码。举个简单的例子,假设我们要把字符串 functional programming is great
变成每个单词首字母大写,我们可以这样实现:
var string = 'functional programming is great';
var result = string.split(' ').map(v => v.slice(0, 1).toUpperCase() + v.slice(1)).join(' ');
上面的例子先用 split 把字符串转换数组,然后再通过 map 把各元素的首字母转换成大写,最后通过 join 把数组转换成字符串。 整个过程就是 join(map(split(str)))
,体现了函数式编程的核心思想: 通过函数对数据进行转换。
由此我们可以得到,函数式编程有两个基本特点:
- 通过函数来对数据进行转换
- 通过串联多个函数来求结果
二、对比声明式与命令式
- 命令式:我们通过编写一条又一条指令去让计算机执行一些动作,这其中一般都会涉及到很多繁杂的细节。命令式代码中频繁使用语句,来完成某个行为。比如 for、if、switch、throw 等这些语句。
- 声明式:我们通过写表达式的方式来声明我们想干什么,而不是通过一步一步的指示。表达式通常是某些函数调用的复合、一些值和操作符,用来计算出结果值。
//命令式
var CEOs = [];
for(var i = 0; i < companies.length; i++){CEOs.push(companies[i].CEO)
}//声明式
var CEOs = companies.map(c => c.CEO);
从上面的例子中,我们可以看到声明式的写法是一个表达式,无需关心如何进行计数器迭代,返回的数组如何收集,它指明的是做什么,而不是怎么做。函数式编程的一个明显的好处就是这种声明式的代码,对于无副作用的纯函数,我们完全可以不考虑函数内部是如何实现的,专注于编写业务代码。
三、常见特性
无副作用
指调用函数时不会修改外部状态,即一个函数调用 n 次后依然返回同样的结果。
var a = 1;
// 含有副作用,它修改了外部变量 a
// 多次调用结果不一样
function test1() {a++return a;
}// 无副作用,没有修改外部状态
// 多次调用结果一样
function test2(a) {return a + 1;
}
透明引用
指一个函数只会用到传递给它的变量以及自己内部创建的变量,不会使用到其他变量。
var a = 1;
var b = 2;
// 函数内部使用的变量并不属于它的作用域
function test1() {return a + b;
}
// 函数内部使用的变量是显式传递进去的
function test2(a, b) {return a + b;
}
不可变变量
指的是一个变量一旦创建后,就不能再进行修改,任何修改都会生成一个新的变量。使用不可变变量最大的好处是线程安全。多个线程可以同时访问同一个不可变变量,让并行变得更容易实现。 由于 JavaScript 原生不支持不可变变量,需要通过第三方库来实现。 (如 Immutable.js,Mori 等等)
var obj = Immutable({ a: 1 });
var obj2 = obj.set('a', 2);
console.log(obj); // Immutable({ a: 1 })
console.log(obj2); // Immutable({ a: 2 })
函数是一等公民
我们常说函数是JavaScript的"第一等公民",指的是函数与其他数据类型一样,处于平等地位,可以赋值给其他变量,也可以作为参数,传入另一个函数,或者作为别的函数的返回值。下文将要介绍的闭包、高阶函数、函数柯里化和函数组合都是围绕这一特性的应用
四、常见的函数式编程模型
1. 闭包(Closure)
如果一个函数引用了自由变量,那么该函数就是一个闭包。何谓自由变量?自由变量是指不属于该函数作用域的变量(所有全局变量都是自由变量,严格来说引用了全局变量的函数都是闭包,但这种闭包并没有什么用,通常情况下我们说的闭包是指函数内部的函数)。
闭包的形成条件:
- 存在内、外两层函数
- 内层函数对外层函数的局部变量进行了引用
闭包的用途:
可以定义一些作用域局限的持久化变量,这些变量可以用来做缓存或者计算的中间量等。
// 简单的缓存工具
// 匿名函数创造了一个闭包
const cache = (function() {const store = {};return {get(key) {return store[key];},set(key, val) {store[key] = val;}}
}());
console.log(cache) //{get: ƒ, set: ƒ}
cache.set('a', 1);
cache.get('a'); // 1
上面例子是一个简单的缓存工具的实现,匿名函数创造了一个闭包,使得 store 对象 ,一直可以被引用,不会被回收。
闭包的弊端:持久化变量不会被正常释放,持续占用内存空间,很容易造成内存浪费,所以一般需要一些额外手动的清理机制。
2. 高阶函数
函数式编程倾向于复用一组通用的函数功能来处理数据,它通过使用高阶函数来实现。高阶函数指的是一个函数以函数为参数,或以函数为返回值,或者既以函数为参数又以函数为返回值。
高阶函数经常用于:
- 抽象或隔离行为、作用,异步控制流程作为回调函数,promises,monads等
- 创建可以泛用于各种数据类型的功能
- 部分应用于函数参数(偏函数应用)或创建一个柯里化的函数,用于复用或函数复合。
- 接受一个函数列表并返回一些由这个列表中的函数组成的复合函数。
JavaScript 语言是原生支持高阶函数的, 例如Array.prototype.map,Array.prototype.filter 和 Array.prototype.reduce 是JavaScript中内置的一些高阶函数,使用高阶函数会让我们的代码更清晰简洁。
map
map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。map 不会改变原数组。
假设我们有一个包含名称和种类属性的对象数组,我们想要这个数组中所有名称属性放在一个新数组中,如何实现呢?
// 不使用高阶函数
var animals = [{ name: "Fluffykins", species: "rabbit" },{ name: "Caro", species: "dog" },{ name: "Hamilton", species: "dog" },{ name: "Harold", species: "fish" },{ name: "Ursula", species: "cat" },{ name: "Jimmy", species: "fish" }
];
var names = [];
for (let i = 0; i < animals.length; i++) {names.push(animals[i].name);
}
console.log(names); //["Fluffykins", "Caro", "Hamilton", "Harold", "Ursula", "Jimmy"]
// 使用高阶函数
var animals = [{ name: "Fluffykins", species: "rabbit" },{ name: "Caro", species: "dog" },{ name: "Hamilton", species: "dog" },{ name: "Harold", species: "fish" },{ name: "Ursula", species: "cat" },{ name: "Jimmy", species: "fish" }
];
var names = animals.map(x=>x.name);
console.log(names); //["Fluffykins", "Caro", "Hamilton", "Harold", "Ursula", "Jimmy"]
filter
filter() 方法会创建一个新数组,其中包含所有通过回调函数测试的元素。filter 为数组中的每个元素调用一次 callback 函数, callback 函数返回 true 表示该元素通过测试,保留该元素,false 则不保留。filter 不会改变原数组,它返回过滤后的新数组。
假设我们有一个包含名称和种类属性的对象数组。 我们想要创建一个只包含狗(species: "dog")的数组。如何实现呢?
// 不使用高阶函数
var animals = [{ name: "Fluffykins", species: "rabbit" },{ name: "Caro", species: "dog" },{ name: "Hamilton", species: "dog" },{ name: "Harold", species: "fish" },{ name: "Ursula", species: "cat" },{ name: "Jimmy", species: "fish" }
];
var dogs = [];
for (var i = 0; i < animals.length; i++) {if (animals[i].species === "dog") dogs.push(animals[i]);
}
console.log(dogs);
// 使用高阶函数
var animals = [{ name: "Fluffykins", species: "rabbit" },{ name: "Caro", species: "dog" },{ name: "Hamilton", species: "dog" },{ name: "Harold", species: "fish" },{ name: "Ursula", species: "cat" },{ name: "Jimmy", species: "fish" }
];
var dogs = animals.filter(x => x.species === "dog");
console.log(dogs); // {name: "Caro", species: "dog"}
// { name: "Hamilton", species: "dog" }
reduce
reduce 方法对调用数组的每个元素执行回调函数,最后生成一个单一的值并返回。 reduce 方法接受两个参数:1)reducer 函数(回调),2)一个可选的 initialValue。
假设我们要对一个数组的求和:
// 不使用高阶函数
const arr = [5, 7, 1, 8, 4];
let sum = 0;
for (let i = 0; i < arr.length; i++) {sum = sum + arr[i];
}
console.log(sum);//25
// 使用高阶函数
const arr = [5, 7, 1, 8, 4];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue,0);
console.log(sum)//25
我们可以通过下图,形象生动展示三者的区别:
3. 函数柯里化
柯里化又称部分求值,柯里化函数会接收一些参数,然后不会立即求值,而是继续返回一个新函数,将传入的参数通过闭包的形式保存,等到被真正求值的时候,再一次性把所有传入的参数进行求值。
// 普通函数
function add(x,y){return x + y;
}
add(1,2); // 3
// 函数柯里化
var add = function(x) {return function(y) {return x + y;};
};
var increment = add(1);
increment(2);// 3
这里我们定义了一个 add 函数,它接受一个参数并返回一个新的函数。调用 add 之后,返回的函数就通过闭包的方式记住了 add 的第一个参数。那么,我们如何来实现一个简易的柯里化函数呢?
function curryIt(fn) {// 参数fn函数的参数个数var n = fn.length;var args = [];return function(arg) {args.push(arg);if (args.length < n) {return arguments.callee; // 返回这个函数的引用} else {return fn.apply(this, args);}};
}
function add(a, b, c) {return [a, b, c];
}
var c = curryIt(add);
var c1 = c(1);
var c2 = c1(2);
var c3 = c2(3);
console.log(c3); //[1, 2, 3]
由此我们可以看出,柯里化是一种“预加载”函数的方法,通过传递较少的参数,得到一个已经记住了这些参数的新函数,某种意义上讲,这是一种对参数的“缓存”,是一种非常高效的编写函数的方法!
4. 函数组合 (Composition)
前面提到过,函数式编程的一个特点是通过串联函数来求值。然而,随着串联函数数量的增多,代码的可读性就会不断下降。函数组合就是用来解决这个问题的方法。
假设有一个 compose 函数,它可以接受多个函数作为参数,然后返回一个新的函数。当我们为这个新函数传递参数时,该参数就会「流」过其中的函数,最后返回结果。
//两个函数的组合
var compose = function(f, g) {return function(x) {return f(g(x));};
};//或者
var compose = (f, g) => (x => f(g(x)));
var add1 = x => x + 1;
var mul5 = x => x * 5;
compose(mul5, add1)(2);// =>15
给大家推荐一个好用的BUG监控工具Fundebug,欢迎免费试用!
参考文章
- MDN文档
- What is Functional Programming?
- So You Want to be a Functional Programmer
- 理解 JavaScript 中的高阶函数
- 我所了解的函数式编程
- JS函数式编程指南
- JavaScript函数式编程(一)
- 我眼中的 JavaScript 函数式编程
- JavaScript深入浅出第2课:函数是一等公民是什么意思呢?
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了20亿+错误事件,付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用!
转载于:https://www.cnblogs.com/fundebug/p/javascript-functional-programing-introduction-1.html
一文带你了解JavaScript函数式编程相关推荐
- 一文带你了解JavaScript 函数式编程
前言 函数式编程在前端已经成为了一个非常热门的话题.在最近几年里,我们看到非常多的应用程序代码库里大量使用着函数式编程思想. 本文将略去那些晦涩难懂的概念介绍,重点展示在 JavaScript 中到底 ...
- 一文带你了解 JavaScript 函数式编程
(给前端大全加星标,提升前端技能) 作者:前端工匠 公号 / 浪里行舟 前言 函数式编程在前端已经成为了一个非常热门的话题.在最近几年里,我们看到非常多的应用程序代码库里大量使用着函数式编程思想. 本 ...
- 一文带你入门 Java 函数式编程
Java 在最开始是不支持函数式编程的,想来也好理解,因为在 Java 中类 Class 才是第一等公民,这就导致在 Java 中实现编程不是件那么容易的事儿,不过虽然难,但是结果我们也已经知道了,在 ...
- SegmentFault 技术周刊 Vol.16 - 浅入浅出 JavaScript 函数式编程
函数式编程(Functional Programming),一看这个词,简直就是学院派的典范. 以至于从 Lisp 的创世,到 Scheme.Haskell.Clean.Erlang.Miranda. ...
- SegmentFault 技术周刊 Vol.16 - 浅入浅出 JavaScript 函数式编程 1
函数式编程(Functional Programming),一看这个词,简直就是学院派的典范. 以至于从 Lisp 的创世,到 Scheme.Haskell.Clean.Erlang.Miranda. ...
- 《JavaScript函数式编程思想》——递归
第7章 递归 王二.张三和赵四一日无聊,决定玩击鼓传花讲冷笑话的游戏.王二和张三围成一圈传花,赵四负责击鼓.张三接连讲了几个诸如小菜.狐狸狡猾的笑话.花停在了王二的手中. 王二:这个笑话很短.你要保 ...
- JavaScript函数式编程(一)\(二)\(三)
JavaScript函数式编程(一) Starkwang 前端工程师@腾讯 / Node.js Collaborator 一.引言 说到函数式编程,大家可能第一印象都是学院派的那些晦涩难懂的代码,充满 ...
- JavaScript 函数式编程(一)
零.前言 说到函数式编程,想必各位或多或少都有所耳闻,然而对于函数式的内涵和本质可能又有些说不清楚. 所以本文希望针对工程师,从应用(而非学术)的角度将函数式编程相关思想和实践(以 JavaScrip ...
- JavaScript函数式编程思想
欢迎访问个人网站 最开始接触函数式编程的时候是在小米工作的时候,那个时候看老大以前写的代码各种 compose,然后一些 ramda 的一些工具函数,看着很吃力,然后极力吐槽函数式编程,现在回想起来, ...
最新文章
- 49 jQuery事件
- Gentoo 安装日记 14 (配置内核 :设备驱动)
- 科大星云诗社动态20210304
- Web前端开发笔记——第三章 CSS语言 第八节 CSS3文本文字设置
- 活动目录向DNS注册SRV记录不成功的原因
- springmvc ztree 实现权限菜单的展示
- 浅谈分布式一致性:Raft 与 SOFAJRaft
- 高级软件工程2017第2次作业—— 个人项目:四则运算题目生成程序(基于控制台)...
- Python全栈开发之11、进程和线程
- 2.10.PHP7.1 狐教程-【PHP 函数】
- 业余无线电通信_业余电台操作证书查询方式
- leetcode加油站 Java
- InnoDB Adaptive Hash Index(AHI)
- 【毕业设计】基于java web的医院预约挂号系统
- sklearn包使用Extra-Trees和GridSearchCV完成成人死亡率预测
- 内网渗透-内网穿透猕猴桃抓密码提权烂土豆提权
- 出现 Unexpected token T in JSON at position 0 ,at JSON.parse (<anonymous>) 的解决方法
- MC1488 MC1489
- dell10代cpu装linux,戴尔10代cpu装win7系统及bios设置|戴尔十代cpu台式机装win7
- 使用蓝桥杯单片机实现ADC采集和实时时钟界面转换与报警功能
热门文章
- 【无标题】二级目录二级目录二级目录二级目录
- 【心酸】从上一家公司到下一家公司
- 华东解析|交通部给共享单车的紧箍咒
- WCHAR我不再惧怕了 - 随感而发 - C++博客
- nohup: ignoring input and appending output to ‘nohup.out‘ 后台命令错误解决办法
- ID生成器(一秒生成26万个id)
- 后来我们才知道,那其实是一生
- matlab 求函数绝对值,概率密度函数估计matlab命令 A a abs 绝对值、(4)
- 可滚动且可排序的表格
- H5项目兼容PC端和移动端的方案(持续跟新)