1、函数式编程理解

函数式编程可以理解为,以函数作为主要载体的编程方式,用函数去拆解、抽象一般的表达式

与命令式相比,这样做的好处在哪?主要有以下几点:

(1)语义更加清晰

(2)可复用性更高

(3)可维护性更好

(4)作用域局限,副作用少

// 数组中每个单词,首字母大写
// 一般写法
const arr = ['apple', 'pen', 'apple-pen'];
for(const i in arr){
const c = arr[i][0];
arr[i] = c.toUpperCase() + arr[i].slice(1);
}
console.log(arr); //[ 'Apple', 'Pen', 'Apple-pen' ] // 函数式写法一
function upperFirst(word) {
return word[0].toUpperCase() + word.slice(1);
} function wordToUpperCase(arr) {
return arr.map(upperFirst);
}
console.log(wordToUpperCase(['apple', 'pen', 'apple-pen'])); //[ 'Apple', 'Pen', 'Apple-pen' ] // 函数式写法二
console.log(arr.map(['apple', 'pen', 'apple-pen'], word => word[0].toUpperCase() + word.slice(1))); //[ 'Apple', 'Pen', 'Apple-pen' ]

当情况变得更加复杂时,表达式的写法会遇到几个问题:

(1)表意不明显,逐渐变得难以维护

(2)复用性差,会产生更多的代码量

(3)会产生很多中间变量

函数式编程很好的解决了上述问题。首先参看 函数式写法一,它利用了函数封装性将功能做拆解(粒度不唯一),并封装为不同的函数,而再利用组合的调用达到目的。这样做使得表意清晰,易于维护、复用以及扩展。其次利用 高阶函数,Array.map 代替 for…of 做数组遍历,减少了中间变量和操作。

而 函数式写法一 和 函数式写法二 之间的主要差别在于,可以考虑函数是否后续有复用的可能,如果没有,则后者更优。

链式优化

// 计算数字之和
// 一般写法
console.log(1 + 2 + 3 - 4) // 函数式写法
function sum(a, b) {
return a + b;
} function sub(a, b) {
return a - b;
}
console.log(sub(sum(sum(1, 2), 3), 4);

函数式代码在写的过程中,很容易造成 横向延展,即产生多层嵌套,随着函数的嵌套层数不断增多,导致代码的可读性大幅下降,还很容易产生错误。

在这种情况下,我们可以考虑多种优化方式,比如下面的  lodash 的链式写法。

const utils = {
chain(a) {
this._temp = a;
return this;
},
sum(b) {
this._temp += b;
return this;
},
sub(b) {
this._temp -= b;
return this;
},
value() {
const _temp = this._temp;
this._temp = undefined;
return _temp;
}
};
console.log(utils.chain(1).sum(2).sum(3).sub(4).value()); //这样改写后,结构会整体变得比较清晰,而且链的每一环在做什么也可以很容易的展现出来。

函数的嵌套和链式的对比还有一个很好的例子,那就是 回调函数 和 Promise 模式

// 顺序请求两个接口

// 回调函数
import $ from 'jquery';
$.post('a/url/to/target', (rs) => {
if(rs){
$.post('a/url/to/another/target', (rs2) => {
if(rs2){
$.post('a/url/to/third/target');
}
});
}
}); // Promise
import request from 'catta'; // catta 是一个轻量级请求工具,支持 fetch,jsonp,ajax,无依赖
request('a/url/to/target')
.then(rs => rs ? $.post('a/url/to/another/target') : Promise.reject())
.then(rs2 => rs2 ? $.post('a/url/to/third/target') : Promise.reject());

随着回调函数嵌套层级和单层复杂度增加,它将会变得臃肿且难以维护,而 Promise 的链式结构,在高复杂度时,仍能纵向扩展,而且层次隔离很清晰。

参考链接:我眼中的 JavaScript 函数式编程

javascript函数式编程和链式优化的更多相关文章

  1. 转:JavaScript函数式编程(三)

    转:JavaScript函数式编程(三) 作者: Stark伟 这是完结篇了. 在第二篇文章里,我们介绍了 Maybe.Either.IO 等几种常见的 Functor,或许很多看完第二篇文章的人都会 ...

  2. 转: JavaScript函数式编程(二)

    转: JavaScript函数式编程(二) 作者: Stark伟 上一篇文章里我们提到了纯函数的概念,所谓的纯函数就是,对于相同的输入,永远会得到相同的输出,而且没有任何可观察的副作用,也不依赖外部环 ...

  3. 转:JavaScript函数式编程(一)

    转:JavaScript函数式编程(一) 一.引言 说到函数式编程,大家可能第一印象都是学院派的那些晦涩难懂的代码,充满了一大堆抽象的不知所云的符号,似乎只有大学里的计算机教授才会使用这些东西.在曾经 ...

  4. JavaScript 函数式编程读书笔记1

    概述 这是我读<javascript函数式编程>的读书笔记,供以后开发时参考,相信对其他人也有用. 说明:虽然本书是基于underscore.js库写的,但是其中的理念和思考方式都讲的很好 ...

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

    摘要: 函数式编程入门. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 函数式编程在前端已经成为了一个非常热门的话题.在最近几年里,我们看到非常多的应用程序代码库里大量使用着函 ...

  6. JavaScript 函数式编程读书笔记2

    概述 这是我读<javascript函数式编程>的读书笔记,供以后开发时参考,相信对其他人也有用. 说明:虽然本书是基于underscore.js库写的,但是其中的理念和思考方式都讲的很好 ...

  7. JavaScript函数式编程(纯函数、柯里化以及组合函数)

    JavaScript函数式编程(纯函数.柯里化以及组合函数) 前言 函数式编程(Functional Programming),又称为泛函编程,是一种编程范式.早在很久以前就提出了函数式编程这个概念了 ...

  8. 【大前端攻城狮之路】JavaScript函数式编程

    转眼之间已入五月,自己毕业也马上有三年了.大学计算机系的同学大多都在北京混迹,大家为了升职加薪,娶媳妇买房,熬夜加班跟上线,出差pk脑残客户.同学聚会时有不少兄弟已经体重飙升,开始关注13号地铁线上铺 ...

  9. javascript函数式编程基础随笔

    JavaScript 作为一种典型的多范式编程语言,这两年随着React\vue的火热,函数式编程的概念也开始流行起来,lodashJS.folktale等多种开源库都使用了函数式的特性. 一.认识函 ...

随机推荐

  1. cmake 2.8.12在redhat 4.4下安装

    以前安过,忘了,今天记笔记这里

  2. Leetcode139. Word Break单词拆分

    给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词. 说明: 拆分时可以重复使用字典中的单词. 你可以假设字典中没有重复 ...

  3. 02.Hibernate配置文件之映射配置文件

    映射文件,即xxx.hbm.xml的配置文件 <class>标签:用来将类与数据库表建立映射关系 属性: name:类中的全路径 table:表名(如果类与表名一致,那么table属性可以 ...

  4. ssh 免密码登入

    1.普通免密码登入 (1)  生成秘钥 [root@vick ~]# ssh-keygen -t rsa Generating public/private rsa key pair. Enter f ...

  5. SQL有意思的面试题

    1.中软国际 SQL行转列  变成   --数据准备create table t_test( year int, month int, sale int, primary key (year, mon ...

  6. SQL Server数据库存储过程的异常处理

    SQL Server数据库存储过程的异常处理是非常重要的,明确的异常提示能够帮助我们快速地找到问题的根源,节省很多时间.本文我们就以一个插入数据为例来说明SQL Server中的存储过程怎么捕获异常的 ...

  7. spring-cloud服务网关中的Timeout设置

    本文转载自:https://segmentfault.com/a/1190000014370360 大家在初次使用spring-cloud的gateway的时候,肯定会被里面各种的Timeout搞得晕 ...

  8. Tool-XManager:XManager(远端X窗口系统的工具)

    ylbtech-Tool-XManager:XManager(远端X窗口系统的工具) Xmanager是一款小巧.便捷的浏览远端X窗口系统的工具.在工作中经常使用Xmanager来登录远端的Solar ...

  9. Spring Cloud中Eureka开启密码认证

    转载自 https://blog.csdn.net/u011499747/article/details/77410997 Eureka服务端配置 添加spring-boot-starter-secu ...

  10. 未加星标 Linux磁盘下查看I/O磁盘的性能

    iostat查看linux硬盘IO性能 rrqm/s:每秒进行merge的读操作数目.即delta(rmerge)/s wrqm/s:每秒进行merge的写操作数目.即delta(wmerge)/s ...