Js 函数式编程思想 (V客学院知识分享)

随之ECMAScript 标准规范不断更新,现在已经更新到ES7,不久ES8规范即将面世,为了是JS 语法对函数编程更加友好,诸如 RxJS (ReactiveX) 等函数式框架的不断流行。函数式编程则应该是以函数做为舰载主体,然后对函数进行拆分封装、更加抽象,可扩展性极强。

与传统命令式函数相比存在那些优势?

  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);
// 函数式写法一
function upperFirst(word) {
return word[0].toUpperCase() + word.slice(1);
}
function wordToUpperCase(arr) {
return arr.map(upperFirst);
}
console.log(wordToUpperCase([‘apple‘, ‘pen‘, ‘apple-pen‘]));
// 函数式写法二
console.log(arr.map([‘apple‘, ‘pen‘, ‘apple-pen‘], word => word[0].toUpperCase() + word.slice(1)));

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

  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());

本例仅为展示 横向延展 的比较极端的情况,随着函数的嵌套层数不断增多,导致代码的可读性大幅下降,还很容易产生错误。

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

(PHP开发、web前端、UI设计、VR开发专业培训机构--V客IT学院版权所有,转载请注明出处,谢谢合作!)

原文地址:https://www.cnblogs.com/wrx3166/p/8110559.html

时间: 2024-11-05 08:11:33

Js 函数式编程思想 (V客学院知识分享)的相关文章

bootstrap栅格布局-v客学院知识分享

今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题 首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构 如下图: 必须给要使用栅格布局的盒子定义class为container.目的一是为了在响应式的布局上给宽度约束,二是提供padding以至于不让内容贴住浏览器的边缘. Class为row的盒子是指行的容器,bootstrap把一行分成了12等分,下面讲解下col-xx-是怎么使用的吧. Bootstrap栅格布局中css中有四个类,分别是col

如何成为优秀的前端攻城师 (V客学院知识分享)

什么是前端呢?大部分人都停留在'前端就是切页面,而且页面开发没什么技术含量,很简单!',事实上前端不仅仅只限于此. 不同时期对互联网技术的看法是不一样的,对前端的认知一也是不一样的.在互联网早期时,小车还是比房子贵的,烧饼和粉丝还只是用来吃的,菊花还只是用来泡茶的.那时的页面设计风格相对单一,对应的页面需求比较简单,并且当时的浏览器也基本是IE6的天下,javascript也只是网页特效的代名词,HTML页面本身没有引起太多人关注,似乎只要能用div甚至table加css辅助把图片定好位,把页面

前端工程师在实在支付功能的时候能做些什么(V客学院技术分享)?

现在最流行的两种支付微信支付和支付宝支付,在日常开发的过程中肯定离不开支付功能的开发,有很多人第一次接触时会有些措手不及. 一.业务逻辑 (电商平台为例子) 支付大部分用在电商平台,各种打赏,游戏充值等等,只要涉及到支付,就一定会有订单逻辑: 1.用户选择产品后进入提交订单流程 ----> 生成订单 (待付款) 2.生成订单后进入支付流程 --->选择支付方式(支付或者微信) 3.唤起对应的支付应用程序,用户确认金额并支付,支付成功后 ----->完成订单 (已付款): 在这个过程中,前

js 函数式编程 浅谈

js 函数式编程 函数式的思想, 就是不断地用已有函数, 来组合出新的函数. 函数式编程具有五个鲜明的特点: 1. 函数是"第一等公民" 指的是函数与其他数据类型一样,处于平等地位 2. 只用"表达式",不用"语句" "表达式"(expression)是一个单纯的运算过程,总是有返回值: "语句"(statement)是执行某种操作,没有返回值. 3. 没有"副作用" 指的是函数内部与外

函数式编程思想:以函数的方式思考,第3部分

过滤.单元测试和代码重用技术 译者:Elaine.Ye原文作者:Neal Ford 发布:2011-07-06 11:23:24挑错 | 查看译者版本 | 收藏本文 在函数式编程思想的第一部分和第二部分中, 我考察了一些函数式编程的主题,研究了这些主题如何与Java?及其相关语言产生关联.本篇文章继续这一探索过程,给出来自前面文章的数字分类器的一个 Scala版本,并会讨论一些颇具学术色彩的主题,比如说局部套用(currying).部分应用(partial application)和递归等. 用

函数式编程思想:耦合和组合,第2部分

习惯于使用面向对象构建块(继承.多态等)的编程者可能会对这一方法的缺点及其他的可选做法视而不见,函数式编程使用不同的构建块来实现重用,其基于的是 更一般化的概念,比如说列表转换和可移植代码.函数式编程思想的这一部分内容比较了作为重用机制的经由继承的耦合和组合,指出了命令式编程和函数式编程之 间的主要区别之一. 在上一部分内容中,我说明了代码重用的不同做法.在面向对象的版本中,我提取出了重复的方法,把他们和一个受保护(protected)域一起移到 一个超类中.在函数式版本中,我把纯函数(不会带来

面向对象设计思想和函数式编程思想

1.函数式编程思想:核心主体是函数,函数可以作为参数,返回值,具有高度不可变性,是以函数为主体,如果传入参数是相等的,那么返回结果注定是相等. 2.面向对象编程思想:(1)封装:封装变化,可以做到重用,实现代码优雅简洁. (2) 继承: 子类继承父类,实现子类可以继承父类的方法和属性,同时可以自己扩展,实现了代码的可扩展性,让程序更加灵活. (3) 多态:多种形态.说白了就是两种体现形式:第一种就是向上转型,父类可以指向子类,实现多态. 第二种就是方法的重载,一个相同的方法作用给不同的对象,返回

js函数式编程(1)-纯函数

我将写的第一个主题是js的函数式编程,这一系列都是mostly adequate guide这本书的读书总结.原书在gitbook上,有中文版.由于原作者性格活泼,书中夹杂很多俚语,并且行文洒脱.中文译版难免有时需要思量一番,既然读了就写出来,能方便别人最好,也请读者指正.正文如下. 如果一个函数是纯函数,那么其不依赖外部环境,并且不产生副作用. 1.不依赖外部环境,反例如下: const a1 = 10; const aFunc1 = () => { // 依赖外部变量 return a1;

JS函数式编程 3.1 Javascript的函数式库

?? Functional Programming in Javascript 主目录第三章 建立函数式编程环境 Javascript的函数式库 据说所有的函数式程序员都会写自己的函数库,函数式Javascript程序员也不例外. 随着如今开源代码分享平台如GitHab.Bower和NPM的涌现,对这些函数库进行分享.变得及补充变得越来越容易. 现在已经有很多Javascript的函数式变成苦,从小巧的工具集到庞大的模块库都有. 每一个库都宣扬着自己的函数式编程风格.从一本正经的数学风格到灵活松