javascript为什么用函数式编程

PHP中文网 • 2025年3月11日 19:07:38 • 编程技术 • 阅读 2

原因：1、js的语法是从Scheme这种函数式编程语言借鉴而来。2、就浏览器端而言，随着各种单页框架的发展，客户端的处理能力不断提升，越来越多的业务逻辑被放到端，从而导致客户端要维护的状态越来越多;随之而来的问题是，一不小心就会大量使用依赖于外部变量的函数，这些函数随着业务逻辑不断增加，从而导致逻辑分支剧增，状态难以追踪，代码可读性差，难以维护，而函数式编程有着很好的解决方案。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

一、什么是函数式编程？

函数式编程(Functional programming)，简称 FP，并不是什么库或者框架，与过程式编程(Procedural programming)相对，而是一种编程范式。FP 通过声明纯函数抽象数据的处理，来避免或尽可能减少函数调用对于外部状态和系统产生的副作用。

所谓副作用，大抵有改变函数外系统状态，向外抛出异常，处理用户操作，修改入参，数据库查操作，DOM操作等等可能会引起系统错误操作。

立即学习“Java免费学习笔记（深入）”；

二、为什么在 JavaScript 使用函数式编程思想

2.1 从语言特性来看

JavaScript 一开始的语法就是从 Scheme 这种函数式编程语言借鉴而来。随着语言标准的推进，语言本身的功能性不断丰富，闭包、箭头函数、高阶函数，数组迭代等等功能都让 JavaScript 中实现 FP 变得简单，简单讲几个特性：

2.1.1. lambda 表达式

lambda 表达式其实是一个匿名函数，使用箭头清晰的表示输入输出的映射关系，JavaScript 中使用箭头函数来实现。

const multiply = x => x * xmultiply(6) // 36

登录后复制

2.1.2 高阶函数

高阶( Higher-order )函数可以接受一个或者多个函数作为入参，输出一个函数。

简单写两个例子

const add = x => y => x + yconst add10 = add(10)add10(5) // 15const compose = (...fns) => x =>  fns.reduce((acc, fn) => fn(acc), x)const a = x => x + 1const b = x => x + 2const composedFn = compose(a, b)composedFn(1) // 1 + 1 + 2 = 4

登录后复制

2.1.3 filter map forEach reduce 迭代

Array.prototype 下的 filter map forEach reduce 都是高阶函数，因为入参是个函数。

const flatten = (arr = []) => arr.reduce(  (acc, val)=> accconcat(Array.isArray(val) ? flatten(val) : val),  [])let arr = [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 纯函数

纯函数简要概括有两个特点：

函数的输出只与输入有关，相同输入产生的输出一致，并不会不依赖外部条件

函数调用不会改变函数域以外的状态或者变量，不会对系统产生副作用

看个简单的例子：

let counter = 0const increment = () => ++counterconst increment = counter => ++counter

登录后复制

前一个函数每次调用都会修改外部变量的值，返回值也依赖于外部变量；后一个函数对于同一输入值每次返回的结果都相同，并且不会对外部状态造成影响。所以后一个是纯函数。

为什么要追求函数的纯度，这就涉及到一个称为引用透明性的概念。

4.2.1 引用透明性

纯函数的这种函数的返回值只依赖于其输入值的特性，被称为引用透明性（referential transparency)，纯函数都是可以进行缓存的。

const memorize(pureFn) {  const _cache = {}  return (...args) => {    const key = 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 实践。

const map1 = Immutable.Map({a:1, b: {d:2}, c:3});const map2 = map1.set('a', 50);map1 === map2 // falseconst mapb1 = map1.get('b')const mapb2 = map2.get('b')mapb1===mapb2 // true

登录后复制

【相关推荐：javascript视频教程、编程视频】

以上就是javascript为什么用函数式编程的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2925521.html