百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

JavaScript函数式编程:提升你的代码品质和效率

yund56 2025-02-25 00:34 9 浏览

一、引言

函数式编程的历史已经很悠久了,但是最近几年却频繁的出现在大众的视野,很多不支持函数式编程的语言也在积极加入闭包,匿名函数等非常典型的函数式编程特性。大量的前端框架也标榜自己使用了函数式编程的特性,好像一旦跟函数式编程沾边,就很高大上一样,而且还有一些专门针对函数式编程的框架和库,比如:RxJS、cycleJS、ramdaJS、lodashJS、underscoreJS等。函数式编程变得越来越流行,掌握这种编程范式对书写高质量和易于维护的代码都大有好处,所以我们有必要掌握它。

二、什么是函数式编程

维基百科定义:

函数式编程(英语:functional programming),又称泛函编程,是一种编程范式,它将电脑运算视为数学上的函数计算,并且避免使用程序状态以及易变对象。

三、纯函数(函数式编程的基石,无副作用的函数)



在初中数学里,函数f的定义是:对于输入x产生一个唯一输出y=f(x)。这便是纯函数。它符合两个条件:

1.此函数在相同的输入值时,总是产生相同的输出。函数的输出和当前运行环境的上下文状态无关。

2.此函数运行过程不影响运行环境,也就是无副作用(如触发事件、发起http请求、打印/log等)。

简单来说,也就是当一个函数的输出不受外部环境影响,同时也不影响外部环境时,该函数就是纯函数,也就是它只关注逻辑运算和数学运算,同一个输入总得到同一个输出。

javascript内置函数有不少纯函数,也有不少非纯函数。

纯函数:

Array.prototype.slice

Array.prototype.map

String.prototype.toUpperCase

非纯函数:

Math.random

Date.now

Array.ptototype.splice

这里我们以slice和splice方法举例:

let xs = [1,2,3,4,5];
// 纯的
xs.slice(0,3);
//=> [1,2,3]
xs.slice(0,3);
//=> [1,2,3]
xs.slice(0,3);
//=> [1,2,3]

// 不纯的
xs.splice(0,3);
//=> [1,2,3]
xs.splice(0,3);
//=> [4,5]
xs.splice(0,3);
//=> []

我们看到调用数组的slice方法每次返回的结果完全相同,同时xs不会被改变,而调用splice方法每次返回值都不一样,同时xs变得面目全非。

这就是我们强调使用纯函数的原因,因为纯函数相对于非纯函数来说,在可缓存性、可移植性、可测试性以及并行计算方面都有着巨大的优势。

这里我们以可缓存性举例:

const squareNumber  = memoize(function(x){ return x*x; });
squareNumber(4);
//=> 16
squareNumber(4); // 从缓存中读取输入值为 4 的结果
//=> 16

那我们如何把一个非纯函数变纯呢?比如下面这个函数:

const minimum = 21;
const checkAge = age => {
  return age >= minimum;
};

这个函数的返回值依赖于可变变量minimum的值,它依赖于系统状态。在大型系统中,这种对于外部状态的依赖是造成系统复杂性大大提高的主要原因。

const checkAge = age => {
  const minimum = 21;
  return age >= minimum;
};

通过改造,我们把checkAge变成了一个纯函数,它不依赖于系统状态,但是minimum是通过硬编码的方式定义的,这限制了函数的扩展性,我们可以在后面的柯里化中看到如何优雅的使用函数式解决这个问题。所以把一个函数变纯的基本手段是不要依赖系统状态。

四、函数柯里化

curry 的概念很简单:将一个低阶函数转换为高阶函数的过程就叫柯里化。


用一个形象的比喻就是:


比如对于加法操作:var add = (x, y) => x + y,我们可以这样柯里化:

//es5写法
const add = function(x) {
  return function(y) {
    return x + y;
  };
};

//es6写法
const add = x => (y => x + y);

//试试看
const increment = add(1);
const addTen = add(10);

increment(2);  // 3

addTen(2);  // 12

对于加法这种极其简单的函数来说,柯里化并没有什么用。

还记得上面的checkAge函数吗?我们可以这样柯里化它:

const checkage = min => (age => age > min);
const checkage18 = checkage(18);
checkage18(20);
// =>true

这表明函数柯里化是一种“预加载”函数的能力,通过传递一到两个参数调用函数,就能得到一个记住了这些参数的新函数。从某种意义上来讲,这是一种对参数的缓存,是一种非常高效的编写函数的方法:

const curry = require('lodash').curry;

//柯里化两个纯函数
const match = curry((what, str) => str.match(what));
const filter = curry((f, ary) => ary.filter(f));

//判断字符串里有没有空格
const hasSpaces = match(/\s+/g);

hasSpaces("hello world");  // [ ' ' ]
hasSpaces("spaceless");  // null

const findSpaces = filter(hasSpaces);

findSpaces(["tori_spelling", "tori amos"]);  // ["tori amos"]

五、函数组合

假设我们需要对一个字符串做一些列操作,如下,为了方便举例,我们只对一个字符串做两种操作,我们定义了一个新函数shout,先调用toUpperCase,然后把返回值传给exclaim函数,这样做有什么不好呢?

不优雅,如果做得事情一多,嵌套的函数会非常深,而且代码是由内往外执行,不直观,我们希望代码从右往左执行,这个时候我们就得使用组合。

const toUpperCase = function(x) { return x.toUpperCase(); };
const exclaim = function(x) { return x + '!'; };

const shout = function(x){
  return exclaim(toUpperCase(x));
};

shout("send in the clowns");
//=> "SEND IN THE CLOWNS!"

使用组合,我们可以这样定义我们的shout函数:

//定义compose
const compose = (...args) => x => args.reduceRight((value, item) => item(value), x);

const toUpperCase = function(x) { return x.toUpperCase(); };
const exclaim = function(x) { return x + '!'; };

const shout = compose(exclaim, toUpperCase);

shout("send in the clowns");
//=> "SEND IN THE CLOWNS!"

代码从右往左执行,非常清晰明了,一目了然。

我们定义的compose像N面胶一样,可以将任意多个纯函数结合到一起。

这种灵活的组合可以让我们像拼积木一样来组合函数式的代码:

const head = function(x) { return x[0]; };
const reverse = reduce(function(acc, x){ return [x].concat(acc); }, []);
const last = compose(head, reverse);

last(['jumpkick', 'roundhouse', 'uppercut']);
//=> 'uppercut'

六、声明式和命令式代码

命令式代码:命令“机器”如何去做事情(how),这样不管你想要的是什么(what),它都会按照你的命令实现。

声明式代码:告诉“机器”你想要的是什么(what),让机器想出如何去做(how)。

与命令式不同,声明式意味着我们要写表达式,而不是一步一步的指示。

以 SQL 为例,它就没有“先做这个,再做那个”的命令,有的只是一个指明我们想要从数据库取什么数据的表达式。至于如何取数据则是由它自己决定的。以后数据库升级也好,SQL 引擎优化也好,根本不需要更改查询语句。这是因为,有多种方式解析一个表达式并得到相同的结果。

这里为了方便理解,我们来看一个例子:

// 命令式
const makes = [];
for (var i = 0; i < cars.length; i++) {
  makes.push(cars[i].make);
}

// 声明式
const makes = cars.map(function(car){ return car.make; });

命令式的循环要求你必须先实例化一个数组,而且执行完这个实例化语句之后,解释器才继续执行后面的代码。然后再直接迭代 cars 列表,手动增加计数器,就像你开了一辆零部件全部暴露在外的汽车一样。这不是优雅的程序员应该做的。

声明式的写法是一个表达式,如何进行计数器迭代,返回的数组如何收集,这些细节都隐藏了起来。它指明的是做什么,而不是怎么做。除了更加清晰和简洁之外,map 函数还可以进一步独立优化,甚至用解释器内置的速度极快的 map 函数,这么一来我们主要的业务代码就无须改动了。

函数式编程的一个明显的好处就是这种声明式的代码,对于无副作用的纯函数,我们完全可以不考虑函数内部是如何实现的,专注于编写业务代码。优化代码时,目光只需要集中在这些稳定坚固的函数内部即可。

相反,不纯的不函数式的代码会产生副作用或者依赖外部系统环境,使用它们的时候总是要考虑这些不干净的副作用。在复杂的系统中,这对于程序员的心智来说是极大的负担。

七、Point Free

pointfree 模式指的是,永远不必说出你的数据。它的意思是说,函数无须提及将要操作的数据是什么样的。一等公民的函数、柯里化(curry)以及组合协作起来非常有助于实现这种模式。

// 非 pointfree,因为提到了数据:word
const snakeCase = function (word) {
  return word.toLowerCase().replace(/\s+/ig, '_');
};

// pointfree
const snakeCase = compose(replace(/\s+/ig, '_'), toLowerCase);

这种风格能够帮助我们减少不必要的命名,让代码保持简洁和通用。当然,为了在一些函数中写出Point Free的风格,在代码的其它地方必然是不那么Point Free的,这个地方需要自己取舍。

八、示例应用

拥有了以上的知识,我们是时候该写一个示例应用了。

这里我们使用了 ramda ,没有用 lodash 或者其他类库。ramda 提供了 compose、curry 等很多函数。

我们的应用将做四件事:

1.根据特定搜索关键字构造 url
2.向 flickr 发送 api 请求
3.把返回的 json 转为 html 图片
4.把图片放到屏幕上

上面提到了两个不纯的动作,即从 flickr 的 api 获取数据和在屏幕上放置图片这两件事。我们先来定义这两个动作,这样就能隔离它们了。这里我们只是简单包装了一下jQuery的getJSON函数,把它变为一个 curry 函数,还有就是把参数位置也调换了下,我们把它们放在 Impure 命名空间下以用来隔离,这样我们就知道它们都是危险函数。

运用函数柯里化和函数组合的技巧,我们就可以创建一个函数式的实际应用了:


看看,多么美妙的声明式规范啊,只说做什么,不说怎么做。现在我们可以把每一行代码都视作一个等式,变量名所代表的属性就是等式的含义。

九、总结

我们已经见识到如何在一个小而不失真实的应用中运用新技能了,但是异常处理以及代码分支呢?如何让整个应用都是函数式的,而不仅仅是把破坏性的函数放到命名空间下?如何让应用更安全更富有表现力?我会在下一篇文章中介绍函数式编程的更加高阶一些的知识,例如Functor、Monad、Applicative等概念。

相关推荐

重生之我在头条学html网页编程,这一世我一定学好,成为编程高手

有人要问了html是什么东西?就是用来设计网页的一种语言会不会很难啊?这是很多朋友担心的,我告诉大家这是最简单最基础也最容易学习的一款入门级语言,当初我也是经常因为学不会C语言而苦恼自从学习了html...

如何在网页3D CAD中创建一个三维管道模型

前言在网页CAD中进行三维建模是一项有趣的任务。本文将介绍如何利用mxcad3d来创建三维管道模型。该工具提供了一系列三维建模功能的API,使得建立复杂的管道结构变得简单直观。安装在此之前,需要先安装...

网页模版如何用

网页模版已成为如今网站建设的核心工具。随着互联网需求的增长,越来越多的企业和组织需要建立自己的网站,以展示他们的品牌和服务。在这个过程中,网页模版为他们提供了一种简单而高效的方式来构建网站。所谓网页模...

AI嵌入式Flowcode编程网页开发人员入门指南

WebDeveloper允许使用FlowcodeIDE环境开发具有交互性的网页。可以在2D面板中添加特殊网页组件,以创建网页的视觉表示,并可以使用流程图添加交互功能。它的引入意味着Flowcod...

用Deepseek制作网页版的汉诺塔游戏保姆级教程

在deepseek中输入:“帮我做一个网页版的汉诺塔演示游戏,游戏包含2层、3层、4层、5层的汉诺塔游戏演示,制作自动求解演示按钮,点击按钮就可以生成出步数,同时自动演示最优解动画。”最后把生成的程序...

TaskBuilder前端页面CSS样式规则设置

在前端页面设计器内,点击底部的“CSS样式”选项卡,可以打开CSS样式设计器,在此查看和设计当前页面的CSS样式规则,如下图所示:3.3.6.1引入外部样式文件如果要在页面中引入外部CSS文件,可以点...

使用 Python、FastHTML 和 Uvicorn 构建简单的博客网站

FastHTML是2024年7月推出的PythonWeb框架,是一个简单但功能强大的框架,允许开发人员使用纯Python构建Web应用程序。(不需要复杂的模板引擎)。Fast...

用AI可以生成HTML网页了,很多初级前端都要失业了

即使你完全不懂html,javascript,css,也能做出漂亮的网页,这在以前是不可想象的,而现在确是可行的,因为有这样一个项目:openUI。openUI不仅仅能生成html页面,还能生成自适应...

python原始套接字socket下载http网页文件到txt

python原始套接字socket下载http网页文件到txtimportsocketdefdownload_webpage(url,output_file):try:...

高效排版:实现DeepSeek生成内容Word格式排版并导...

高效排版:实现DeepSeek生成内容Word格式排版并导出的经典方法,步骤简洁高效:DeepSeek生成内容复制出来容易出现乱码,下面介绍一种比较高效简单的方法!一、核心三步法1.调整模型模式在D...

打工人福音!3分钟教你学会word精美排版

昨天大熊介绍了word一键排版的三种办法,今天我们来详细讲讲第二种办法,用html代码实现一键排版,然后再导出pdf实现精美效果。打工人,打工魂,你是不是也有以下烦恼?下面是我经过多次和Deepsee...

使用 HTML 创建可折叠的交互式组件,一行 JS 代...

如果你想创建一个可折叠的交互式组件,使用<details>元素即可,一行JavaScript也不用写。<details>组件定义了一个可折叠的容器,它的第一个元素必须...

新手小白1分钟学会Word——文档的编辑1.1

天空一声巨响,迷人的我闪亮登场,亲爱的家人们,周末好呀!话不多说,咱们继续开干!昨天说到本节还有个小尾巴,那咱们就把这个小尾巴了结了,然后开始新篇章~四、保存文档我们对文档编辑完之后最重要的一步就...

超强!DeepSeek+HTML制作数据看板,老板看了都点赞

DeepSeek以极强的推理能力,支持生成各种代码,比如Python、SQL、Matlab、JS、HTML等,你可以拿这些代码放到编译器里,就能直接跑出结果,比如机器学习算法、exe应用、可视化图表、...

什么是Tailwind CSS

什么是TailwindCSSTailwindCSS是一个实用优先(Utility-First)的CSS框架,其核心思想是通过直接在HTML中组合预定义的类名来快速构建界面样式,无需编写传...