189 8069 5689

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

作者：Sequoia McDowell

创新互联主营鄯善网站建设的网络公司,主营网站建设方案,App定制开发,鄯善h5小程序开发搭建,鄯善网站营销推广欢迎鄯善等地区企业咨询

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/

+


当前题目：ES6中的高阶函数：如同a=>b=>c一样简单
分享URL：http://cdxtjz.com/article/gddsoe.html

其他资讯