文档章节

ES6中的高阶函数:如同 a => b => c 一样简单

OneAPM蓝海讯通
 OneAPM蓝海讯通
发布于 2016/04/12 12:59
字数 2172
阅读 38
收藏 0

作者:Sequoia McDowell

2016年01月16日

ES6来啦!随着越来越多的代码库和思潮引领者开始在他们的代码中使用ES6,以往被认为是“仅需了解”的ES6特性变成了必需的代码常识。这不仅仅是新的语法学习 - 在许多范例中, ES6中新的语言特性可以让在ES5中写起来非常麻烦的表达变得更加简单,进而鼓励了新表达方式的使用。下面我们将关注一个这样简洁表达的使用范例:ES6中的箭头函数如何使高阶函数的书写更加简便。

高阶函数是至少具有以下两种功能之一的函数:

  1. 使用一个或多个函数作为实参
  2. 返回一个函数作为结果

本文的目的并不是说服你立即采用这种新方式,尽管笔者非常鼓励你尝试使用!本文旨在让你熟悉这种表达方式,这样当你在遇到其他人基于ES6写的代码库时,不会如笔者当初一样看着这些陌生代码挠头不解。如果你在此之前需要先复习一下箭头语法的知识,请先查阅这篇文章

希望你熟悉有返回值的箭头函数:

const square = x => x * x;

但是下面这两行代码是什么意思?

const has = p => o => o.hasOwnProperty(p);
const sortBy = p => (a, b) => a[p] > b[p];

“p 返回 o 返回 o.hasOwnProperty…”这句代码是什么意思?我们能这样用吗?

##理解语法

为了说明带箭头的高阶函数的书写规则,让我们一起来看一个经典示例:加法函数。在ES5中会这样写:

function add(x){
  return function(y){
     return y + x;
  };
}
var addTwo = add(2);
addTwo(3);          // => 5
add(10)(11);        // => 21 

我们的加法函数输入x,返回了一个输入y返回值是y + x的函数。那我们应该如何用箭头函数表达这个函数呢?已知...

  1. 箭头函数定义是一个表达式,并且
  2. 箭头函数隐式返回单一表达式结果

那么我们所要做的就是让另一个箭头函数作为我们箭头函数的函数体,因此表达方式如下:

const add = x => y => y + x;
// outer function: x => [inner function, uses x]
// inner function: y => y + x;

现在我们就可以通过一个与变量x相关的返回值创建内部函数:

const add2 = add(2);// returns [inner function] where x = 2
add2(4);            // returns 6: exec inner with y = 4, x = 2
add(8)(7);          // 15 

我们所写的加法函数并不是超级有用,但是它可以说明一个外函数如何输入一个以x为变量的参数函数,并在它返回的函数中引用此函数。

##用户分类

假如你在github上看到了一个ES6代码库,并且遇到了下面这样的代码:

const has = p => o => o.hasOwnProperty(p);
const sortBy = p => (a, b) => a[p] > b[p];
 
let result;
let users = [
  { name: 'Qian', age: 27, pets : ['Bao'], title : 'Consultant' },
  { name: 'Zeynep', age: 19, pets : ['Civelek', 'Muazzam'] },
  { name: 'Yael', age: 52, title : 'VP of Engineering'}
];
 
result = users
  .filter(has('pets'))
  .sort(sortBy('age')); 

这些代码又是什么意思?我们叫它箭头原型的排列和滤波方法,每一种方法都使用一个单功能参数,但是我们会调用返回函数的函数来筛选和排序,而不是编写表达式去做这些。

让我们来看一看,在下列每种情况下返回函数的表达方式。

###无高阶函数:

result = users
  .filter(x => x.hasOwnProperty('pets')) //pass Function to filter
  .sort((a, b) => a.age > b.age);        //pass Function to sort

###有高阶函数:

result = users
  .filter(has('pets'))  //pass Function to filter
  .sort(sortBy('age')); //pass Function to sort

在每个实例中,过滤过程都是通过检查对象是否含有名为“pets”的属性值的函数执行的。

##为什么它是有用的?

它的有效性出于以下几个原因:

  • 它减少了重复代码
  • 它简化了代码的可重用性
  • 它提升了代码含义的清晰度

想象一下我们只想过滤出有宠物和有职位的用户,我们可以在其中添加另一个函数:

result = users
  .filter(x => x.hasOwnProperty('pets'))
  .filter(x => x.hasOwnProperty('title'))
  ...

这里的重复只是徒增杂乱:它的简明度没有提升,只是写了更多代码妨碍视线。下面是可实现同样功能的使用了has函数的代码:

result = users
  .filter(has('pets'))
  .filter(has('title'))
  ...

这段代码更加短小精悍且易于书写,还可以减少打错字的情况。笔者同时认为这段代码大大增加了阅读清晰度,一眼就能读出代码的含义。 至于函数重用性,如果需要在很多地方过滤出有宠物的用户或者有职位的用户,你可以创建如下函数,并按需重用:

const hasPets = has('pets');
const isEmployed = has('title');
const byAge = sortBy('age');
 
let workers = users.filter(isEmployed);
let petOwningWorkers = workers.filter(hasPets);
let workersByAge = workers.sort(byAge);

我们也可以使用已给出的函数来获得单返回值,并不仅仅是用于过滤数组:

let user = {name: 'Assata', age: 68, title: 'VP of Operations'};
if(isEmployed(user)){   // true
  //do employee action
}
hasPets(user);          // false
has('age')(user);       //true

##更进一步

让我们来写一个能检查对象拥有一个有固定主键的过滤函数。has函数可检查主键,然而我们需要知道两项值(主键和键值),而不是一项,来同时检查值。下面请看一种方法:

//[p]roperty, [v]alue, [o]bject:
const is = p => v => o => o.hasOwnProperty(p) && o[p] == v;
 
// broken down:
// outer:  p => [inner1 function, uses p]
// inner1: v => [inner2 function, uses p and v]
// inner2: o => o.hasOwnProperty(p) && o[p] = v;

此处,叫做“is”的函数可执行以下三件事:

  1. 取一个属性名并且返回一个函数,该函数……
  2. 取一个函数值返回一个函数,该函数……
  3. 取一个对象,并检测该对象是否有特定函数值的特定属性,最终返回一个布尔值。

下面是一个使用is函数来过滤用户的示例:

const titleIs = is('title');
// titleIs == v => o => o.hasOwnProperty('title') && o['title'] == v;
 
const isContractor = titleIs('Contractor');
// isContractor == o => o.hasOwnProperty('contractor') && o['title'] == 'Contractor';
 
let contractors = users.filter(isContractor);
let developers  = users.filter(titleIs('Developer'));
 
let user = {name: 'Viola', age: 50, title: 'Actress', pets: ['Zak']};
isEmployed(user);   // true
isContractor(user); // false 

##书写风格说明

看一眼下面这个函数,记下你弄清楚函数意义的时间:

const i = x => y => z => h(x)(y) && y[x] == z;

现在请再看一下同功能仅在书写风格中略微不同的函数:

const is = prop => val => obj => has(prop)(obj) && obj[prop] == val;

可见,书写一行越简洁越好的函数的编码趋势是以牺牲可读性为代价的。请克制自己这样做的冲动!简短却无意义的变量名的确看起来很漂亮,但是让人难以理解函数的功能。起一个包含多个词的有意义的变量名和函数名,其实是在帮你自己和同事理解函数功能。

##还有一件事...

如果你想以年龄降序排序而不是升序排列,该怎么做呢?或者说查找不是雇员的用户该怎么做呢?我们需要去写一个新的functionssortByDesc 或者notHas程序吗?当然不用!我们可以将已有的返回布尔值的函数封装起来,用一个反转其布尔值的函数来实现上述功能,反之亦然。

//take args, pass them thru to function x, invert the result of x
const invert = x => (...args) => !x(...args);
const noPets = invert(hasPets);
 
let petlessUsersOldestFirst = users
  .filter(noPets)
  .sort(invert(sortBy('age')));

##总结

函数式编程在编程界的势头越来越强劲,而ES6使得在JavaScript中采用这种编程思想更加容易。如果你在JavaScript编程过程中还没遇到过函数式编程风格的代码,你很可能在接下来的几个月里就能遇到。这意味着即便你不喜欢这种风格,理解它的基础知识也是非常重要的,有的知识在这里已经提到过了。希望这篇文章提出的概念能够帮你在实际遇到ES6代码时准备好前提知识,更希望它能鼓励你尝试这种编程风格!

OneAPM 助您轻松锁定 .NET 应用性能瓶颈,通过强大的 Trace 记录逐层分析,直至锁定行级问题代码。以用户角度展示系统响应速度,以地域和浏览器维度统计用户使用情况。想阅读更多技术文章,请访问 OneAPM 官方博客 本文转自 OneAPM 官方博客 原文链接:https://strongloop.com/strongblog/higher-order-functions-in-es6easy-as-a-b-c/

© 著作权归作者所有

OneAPM蓝海讯通
粉丝 94
博文 631
码字总数 1266889
作品 0
海淀
私信 提问
js 中的多个连续的箭头函数与柯里化

本文写于去年7月 2. 图文无关 高阶函数 高阶函数定义:将函数作为参数或者返回值是函数的函数。 所以高阶函数分两种: 是我们常见的 sort,reduce 等函数。 返回值是函数的函数。 一般而言,我...

SimplyY
2017/05/09
0
0
你不知道的JavaScript(中卷)|语法

语句和表达式 开发人员常常将“语句”和“表达式”混为一谈。 JavaScript中表达式可以返回一个结果值: 这里,36是一个表达式(结果为18)。第二行的a也是一个表达式,第三行的b也是。表达式...

xpwei
2017/11/03
0
0
【ES6基础】箭头函数(Arrow functions)

ES6中,除了let和const新特性,箭头函数是使用频率最高的新特性了。如果你曾经了解如日中天的JavaScript衍生语言CoffeeScript, 就会清楚此特性并非ES6独创。箭头函数顾名思义是使用箭头(=>)...

03/04
0
0
带着三个问题深入浅出React高阶组件

前言 "高阶"二字听起来非常唬人,因为大学高数课上的高阶方程让人抓狂,从而让第一次接触"高阶组件"概念的人们误以为又是什么高深的思想和复杂的逻辑。但相信在你学习完成后和生产环境大量使...

ssssyoki
2018/10/29
0
0
浅谈JavaScript中的继承

近期,公司的业务处于上升期,对人才的需求似乎比以往任何时候都多。作为公司的前端,有幸窥探到了公司的前端面试题目,其中有一题大概是这样的(别激动,题目已经改了) 请用你自己的方式来...

lanzhiheng
2018/05/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Python 周刊第 418 期

新闻 PyCon US 2020 开始接受财务赞助! https://pycon.blogspot.com/2019/10/financial-aid-launches-for-pycon-us-2020.html2020年 Python 美国开发者大会,tips: 中国也有,可以赞助国内的...

iCodeBugs
17分钟前
3
0
ThreadLocal源码阅读

首先,从set方法入手, // ThreadLocalpublic void set(T value) { Thread t = Thread.currentThread(); ThreadLocalMap map = getMap(t);//这里可以看出,从Threa......

小海bug
26分钟前
3
0
成长之路 万事知行合一

思想决定行为,行为决定习惯,习惯决定性格,性格决定命运。 很多道理,不管是前辈给你指点说的也好,还是你自己看一些书籍学到的也好,如果不能够做到,就连那些不知道这个道理的人都不如。...

T型人才追梦者
30分钟前
3
0
uml图六种箭头的含义

在看一些技术博客的时候,经常会见到博客里画上很多uml图。因为经常会被这几种表达关系的箭头搞混,这里我就把常见的6种箭头表达的含义理一下。 泛化 概念:泛化是一种一般与特殊、一般与具体...

1只特立独行的猪
36分钟前
3
0
【在 Nervos CKB 上做开发】Nervos CKB 脚本编程简介[3]:自定义代币

原文作者:Xuejie 原文链接:https://xuejie.space/2019_09_06_introduction_to_ckb_script_programming_udt/ Nervos CKB 脚本编程简介[3]:自定义代币 CKB 的 Cell 模型和 VM 支持许多新的用...

NervosCommunity
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部