027-87605453| 全国统一热线

logo

首页 / 新闻中心

一文带你了解JavaScript 函数式编程

一文带你了解JavaScript 函数式编程|Date: 2019-10-25


前言

函数式编程在前端已经成为了一个非常热门的话题。在最近几年里,我们看到非常多的应用程序代码库里大量使用着函数式编程思想。

本文将略去那些晦涩难懂的概念介绍,重点展示在 JavaScript 中到底什么是函数式的代码、声明式与命令式代码的区别、以及常见的函数式模型都有哪些?

一、什么是函数式编程

函数式编程是一种编程范式,主要是利用函数把运算过程封装起来,通过组合各种函数来计算结果。函数式编程意味着你可以在更短的时间内编写具有更少错误的代码。举个简单的例子,假设我们要把字符串 functional programmingisgreat 变成每个单词首字母大写,我们可以这样实现:

					
  1. var string = 'functional programming is great';
  2. var result = string
  3. .split(' ')
  4. .map(v => v.slice(0, 1).toUpperCase() + v.slice(1))
  5. .join(' ');

上面的例子先用 split 把字符串转换数组,然后再通过 map 把各元素的首字母转换成大写,最后通过 join 把数组转换成字符串。整个过程就是 join(map(split(str))),体现了函数式编程的核心思想:通过函数对数据进行转换

由此我们可以得到,函数式编程有两个基本特点:

  • 通过函数来对数据进行转换

  • 通过串联多个函数来求结果

二、对比声明式与命令式

  • 命令式:我们通过编写一条又一条指令去让计算机执行一些动作,这其中一般都会涉及到很多繁杂的细节。命令式代码中频繁使用语句,来完成某个行为。比如 for、if、switch、throw 等这些语句。

  • 声明式:我们通过写表达式的方式来声明我们想干什么,而不是通过一步一步的指示。表达式通常是某些函数调用的复合、一些值和操作符,用来计算出结果值。

					
  1. //命令式
  2. var CEOs = [];
  3. for(var i = 0; i < companies.length; i++){
  4. CEOs.push(companies[i].CEO)
  5. }
  6. //声明式
  7. var CEOs = companies.map(c => c.CEO);

从上面的例子中,我们可以看到声明式的写法是一个表达式,无需关心如何进行计数器迭代,返回的数组如何收集,它指明的是做什么,而不是怎么做。函数式编程的一个明显的好处就是这种声明式的代码,对于无副作用的纯函数,我们完全可以不考虑函数内部是如何实现的,专注于编写业务代码。

三、常见特性

无副作用

指调用函数时不会修改外部状态,即一个函数调用 n 次后依然返回同样的结果。

					
  1. var a = 1;
  2. // 含有副作用,它修改了外部变量 a
  3. // 多次调用结果不一样
  4. function test1() {
  5. a++
  6. return a;
  7. }
  8. // 无副作用,没有修改外部状态
  9. // 多次调用结果一样
  10. function test2(a) {
  11. return a + 1;
  12. }

透明引用

指一个函数只会用到传递给它的变量以及自己内部创建的变量,不会使用到其他变量。

					
  1. var a = 1;
  2. var b = 2;
  3. // 函数内部使用的变量并不属于它的作用域
  4. function test1() {
  5. return a + b;
  6. }
  7. // 函数内部使用的变量是显式传递进去的
  8. function test2(a, b) {
  9. return a + b;
  10. }

不可变变量

指的是一个变量一旦创建后,就不能再进行修改,任何修改都会生成一个新的变量。使用不可变变量最大的好处是线程安全。多个线程可以同时访问同一个不可变变量,让并行变得更容易实现。由于 JavaScript 原生不支持不可变变量,需要通过第三方库来实现。(如 Immutable.js,Mori 等等)

					
  1. var obj = Immutable({ a: 1 });
  2. var obj2 = obj.set('a', 2);
  3. console.log(obj); // Immutable({ a: 1 })
  4. console.log(obj2); // Immutable({ a: 2 })

函数是一等公民

我们常说函数是JavaScript的"第一等公民",指的是函数与其他数据类型一样,处于平等地位,可以赋值给其他变量,也可以作为参数,传入另一个函数,或者作为别的函数的返回值。下文将要介绍的闭包、高阶函数、函数柯里化和函数组合都是围绕这一特性的应用

四、常见的函数式编程模型

1.闭包(Closure)

如果一个函数引用了自由变量,那么该函数就是一个闭包。何谓自由变量?自由变量是指不属于该函数作用域的变量(所有全局变量都是自由变量,严格来说引用了全局变量的函数都是闭包,但这种闭包并没有什么用,通常情况下我们说的闭包是指函数内部的函数)。

闭包的形成条件:

  • 存在内、外两层函数

  • 内层函数对外层函数的局部变量进行了引用

闭包的用途:可以定义一些作用域局限的持久化变量,这些变量可以用来做缓存或者计算的中间量等

					
  1. // 简单的缓存工具
  2. // 匿名函数创造了一个闭包
  3. const cache = (function() {
  4. const store = {};
  5. return {
  6. get(key) {
  7. return store[key];
  8. },
  9. set(key, val) {
  10. store[key] = val;
  11. }
  12. }
  13. }());
  14. console.log(cache) //{get: ƒ, set: ƒ}
  15. cache.set('a', 1);
  16. cache.get('a'); // 1

上面例子是一个简单的缓存工具的实现,匿名函数创造了一个闭包,使得 store 对象 ,一直可以被引用,不会被回收。

闭包的弊端:持久化变量不会被正常释放,持续占用内存空间,很容易造成内存浪费,所以一般需要一些额外手动的清理机制。

2.高阶函数

函数式编程倾向于复用一组通用的函数功能来处理数据,它通过使用高阶函数来实现。高阶函数指的是一个函数以函数为参数,或以函数为返回值,或者既以函数为参数又以函数为返回值

高阶函数经常用于:

  • 抽象或隔离行为、作用,异步控制流程作为回调函数,promises,monads等

  • 创建可以泛用于各种数据类型的功能

  • 部分应用于函数参数(偏函数应用)或创建一个柯里化的函数,用于复用或函数复合。

  • 接受一个函数列表并返回一些由这个列表中的函数组成的复合函数。

JavaScript 语言是原生支持高阶函数的, 例如Array.prototype.map,Array.prototype.filter 和 Array.prototype.reduce 是JavaScript中内置的一些高阶函数,使用高阶函数会让我们的代码更清晰简洁。

map

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。map 不会改变原数组。

假设我们有一个包含名称和种类属性的对象数组,我们想要这个数组中所有名称属性放在一个新数组中,如何实现呢?

					
  1. // 不使用高阶函数
  2. var animals = [
  3. { name: "Fluffykins", species: "rabbit" },
  4. { name: "Caro", species: "dog" },
  5. { name: "Hamilton", species: "dog" },
  6. Contact us: 027-87605453

    景宁人力资源

    景宁人力隶属武汉厚溥企业,是目前较大规模的全国性IT行业人才服务商之一。依托武汉厚溥企业良善的客户关系以及精益的服务流程,成为专注于软件-互联网行业的人力资源专业服务企业。

    Address

    武汉市关山大道特1号光谷软件园D8栋

    The D8 Building of The Guanggu Software Park,The Guanshan Road,Hoangshan District,Wuhan City.
    powered dazan technology, 技术支持:武汉大赞科技 鄂ICP备20011881号-1
    本网站最终解释权归武汉景宁人力资源服务有限公司所有