第 2 部分专门介绍将改变您使用 JavaScript 中的函数的方式的语言更新。在这一部分中,我们将介绍函数定义和调用语法,您将进一步了解解构赋值(这一次在函数定义中)。我还将介绍新的箭头函数语法和生成器函数,后者给经典的迭代器和古老的for 循环带来了有趣的转机。
JavaScript 的新解构赋值得名于数组或对象可以 “解构” 并提取出组成部分的概念。在 第 1 部分 中,我们学习了如何在局部变量中使用解构。它在函数参数声明中也很有用。 如果某个函数需要一个对象,您可以在函数开始之前,利用解构功能提取出该对象的相关部分。可通过向函数的参数添加解构语法来实现此目的,如清单 1 所示。
清单 1. 函数声明中的解构
let person = { firstName: "Ted", lastName: "Neward", age: 45, favoriteLanguages: [ "ECMAScript", "Java", "C#", "Scala", "F#" ] } function displayDetails({firstName, age}) { console.log(`${firstName} is ${age} years old`); } displayDetails(person);
displayDetails 函数仅关心传入的对象的 firstName 和 age 字段。向对象语法添加一个解构赋值,可在函数调用中有效地提取出这些值。调用语法本身保持不变,这使得重构遗留代码来使用新语法变得更容易。
也可以在函数中使用解构数组语法,但它没有您即将看到的其他一些功能那么令人印象深刻。
ECMAScript 对函数参数执行了一些语法改动。具体地讲,它为函数调用引入了默认参数值、剩余参数和展开运算符。我之前已经提到过,大部分更改都是 ECMAScript 开发人员已使用多年的约定之上的语法糖(syntactic sugar)。现在它们是成熟的语言功能,您可以使用更少的代码完成相同的工作。
我们首先将介绍默认参数,这可能是 3 个概念中最容易理解的概念。
除了允许使用解构语法之外,ECMAScript 6 现在还提供了与一些 C 族语言中类似的默认参数值语法。即使您之前从未看到过默认参数,也很容易理解它们:
清单 2. 默认参数
let sayHello = function(message = "Hello world!") { console.log(message);}sayHello(); // prints "Hello world!"sayHello("Howdy!"); // prints "Howdy!"
基本上讲:如果在调用位置指定了一个参数,那么该参数将接受传递的值;如果未指定值,则会分配默认值。
与 第 1 部分 中介绍的一些更新一样,新的默认参数实质上就是语法糖。在以前的 ECMAScript 版本中,您可能这样编写它:
清单 3. 旧式默认参数
var sayHello = function(message) { if (message === undefined) { message = "Hello world!"; } console.log(message);}sayHello(); // prints "Hello world!"sayHello("Howdy!"); // prints "Howdy!"
新语法更短且表达能力更强,而且标准化了许多程序员多年来执行的工作。
ECMAScript 库中的一种更常见的做法是,定义函数或方法来接受一个或多个固定参数,后跟一组通过用户定义方式细化或修改调用的可选参数。在过去,可以通过访问静默构建并传递给每个函数调用的内置 arguments 参数来实现此目的:
清单 4. 旧式可选参数
function greet(firstName) { var args = Array.prototype.slice.call(arguments, greet.length); console.log("Hello",firstName); if (args !== undefined) args.forEach(function(arg) { console.log(arg); });}greet("Ted");greet("Ted", "Hope", "you", "like", "this!");
使用新的剩余参数语法,您可以将可选的参数捕获到一个局部数组变量中。然后按上面的相同方式使用它们,而无需执行修改:
清单 5. 剩余参数
function greet(firstName, ...args) { console.log("Hello",firstName); args.forEach(function(arg) { console.log(arg); });}greet("Ted");greet("Ted", "Hope", "you", "like", "this!");
请注意,剩余参数(第一个清单中的 args)不需要测试存在与否;该语言可确保它将以长度为 0 的数组形式存在,即使没有传递其他参数。
展开运算符(Spread operator)在某些方面与剩余参数的概念正好相反。剩余参数将会收集传入某个给定调用的一些可选值,展开运算符获取一个值数组并 “展开” 它们,基本上讲,就是解构它们以用作被调用的函数的各个参数。
展开运算符的最简单用例是将各个元素串联到一个数组中:
清单 6. 使用展开运算符进行串联
let arr1 = [0, 1, 2];let arr2 = [...arr1, 3, 4, 5];console.log(arr2); // prints 0,1,2,3,4,5
如果没有展开运算符语法,您需要提取第一个数组中的每个元素并附加到第二个数组,然后才添加剩余元素。
也可以在函数调用中使用展开运算符;事实上,这是您最有可能使用它的地方:
清单 7. 函数调用中的展开运算符
function printPerson(first, last, age) { console.log(first, last age);}let args = ["Ted", "Neward", 45];printPerson(...args);
请注意,不同于剩余参数,展开运算符是在调用点上使用,而不是在函数定义中使用。
除了参数更改之外,ECMAScript 6 在函数语法和语义上也进行了重大改动。本节将介绍最重要的更新。只需记住,JavaScript 程序中的原始语法仍然可行。如果您最初感觉这种新语法不方便或不够直观,您可以逐步适应它的使用。
随着 Scala 和 F# 等新函数语言被大众接受,旧语言已开始采用它们的一些优秀功能。其中一项功能是箭头函数语法,这是一种用于创建函数字面量的速记符号。从 ECMAScript 6 开始,您可以使用所谓的粗箭头(与细箭头相对)创建函数字面量,就像这样:
清单 8. 创建函数字面量的箭头语法
let names = ["Ted","Jenni","Athen"];names.forEach((n) => console.log(n));
如果尝试过使用 C#、Java 8、Scala 或 F# 进行函数编程,您可能非常熟悉这种语法。即使您不熟悉它,箭头函数也很容易理解:箭头前的括号将参数捕获到函数主体,箭头本身表示函数主题的开头。如果主体仅包含一条语句或表达式,则不需要使用花括号。如果主体包含多条语句或表达式,那么可以通过在箭头后输入花括号来表示它们:
清单 9. 表示多条语句或表达式
let names = ["Ted","Jenni","Athen"];names.forEach((n) => { console.log(n)});
如果只有一个参数,您可以选择完全省略括号,如下所示。(就个人而言,我甚至在只有一个参数时也使用括号,但这只是仁者见仁,智者见智的的审美偏好。)
清单 10. 单个参数
names.forEach(n => console.log(n));
箭头函数不能直接取代函数关键字。一般而言,您应该继续使用 function 定义方法(即与一个对象实例关联的函数)。为与对象无关的场景保留箭头函数,比如 Array.forEach 或 Array.map 调用的主体。因为箭头函数对待 this 的方式与普通函数不同,所以在方法定义中使用它们可能导致意料之外的结果。
另请注意,如果箭头函数的主体是只有一个值的单个表达式,则无需显式返回,而是应该将单一表达式隐式返回给箭头函数的调用方。但是,如果主体不只一条语句或表达式,则必须使用花括号,而且所有返回的值都必须通过常用的 “return” 语法发回给调用方。 ‘this’ 的新定义
在开始设计 ECMAScript 6 之前很长一段时间,程序员很难确定 ECMAScript 的 this 参数指向哪里。从表面上看,与其他 C 族语言一样,this 参数引用的对象上会调用一个方法,如下所示:
清单 11. ‘this’ 引用一个对象实例
let bob = { firstName: "Bob", lastName: "Robertson", displayMe: function() { for (let m in this) { console.log(m,"=",this[m]); } }};bob.displayMe();
上面的参数显然引用了实例 bob,而且忠实地打印出 firstName、lastName 和 displayMe 方法(因为它也是该对象的成员)的名称和值。
当从一个存在于全局范围的函数引用 this 时,情况会变得有点怪异:
清单 12. ‘this’ 引用一个全局范围对象
let displayThis = function() { for (let m in this) { console.log(m); }};displayThis();
对于缺乏经验的开发人员,ECMAScript 将全局范围定义为一个对象,所以当在全局范围内的函数使用时,this 引用全局范围对象,在上面的情况中,它忠实地打印出全局范围的每个成员,包括顶级全局变量、函数和对象(比如上面的示例中的 “console”)。
出于这个原因,我们也可以在两种不同的上下文中重用该函数,知道它每次将或多或少执行一些我们期望的操作:
清单 13. 重用全局范围函数
let displayThis = function() { for (let m in this) { console.log(m); }};displayThis(); // this == global objectlet bob = { firstName: "Bob", lastName: "Robertson", displayMe: displayThis};bob.displayMe(); // this == bob
可能此语法有点奇怪,但只要您理解了规则,就不是问题。直到您尝试使用 ECMAScript 构造函数作为对象类型时,情况才会真正偏离主题:
清单 14. 一个过度使用的 ‘this’
function Person() { // The Person() constructor defines "this" as an instance // of itself this.age = 0; setInterval(function growUp() { // In non-strict mode, the growUp() function defines "this" // as the global object; thus, "this.age" refers to a global // "age" value, not the one defined on the instance of Person this.age++; }, 1000);}var p = new Person();// Every second, p.age is supposed to go up by one.// But because the "this" in the "growUp" function literal// refers to the global object, and not "p", p.age will// never change from 0.
为了解决与 this 相关的定义问题,箭头函数拥有所谓的词法 this 绑定。这意味着箭头函数在定义函数时使用 this 值,而不是在执行它时。
采用规则:完全理解新 this 规则可能需要一段时间。新箭头函数规则并不总是这么直观。作为开发人员,可以计划对 “内联” 函数使用箭头函数,对方法使用传统函数。如果这么做,各个方面都应按预期工作。
或许理解这一区别的最简单方法是借助一个旧的 Node.js 对象 EventEmitter。回想一下,EventEmitter(获取自 events 模块)是一个简单的发布-订阅式消息系统:您可以在某个特定事件名称上的发射器上注册回调,当该事件被 “发出” 时,则按注册的顺序触发回调。
如果向 EventEmitter 注册一个遗留函数,捕获的 this 将是在运行时确定的参数。但是如果您向 EventEmitter 注册一个箭头函数,this 将在定义箭头函数时绑定:
清单 15. ‘this’ 被箭头函数绑定
let EventEmitter = require('events');let ee = new EventEmitter();ee.on('event', function() { console.log("function event fired", this);});ee.on('event', () => { console.log("arrow event fired", this);});var bob = { firstName: "Bob", lastName: "Robertson"};bob.handleEventLegacy = function() { console.log("function event fired", this);};bob.handleEventArrow = () => { console.log("arrow event fired", this);};ee.on('event', bob.handleEventLegacy);ee.on('event', bob.handleEventArrow);ee.emit('event');
在触发函数事件时,this 被绑定到 EventEmitter 本身,而箭头事件未绑定到任何目标(它们分别打印一个空对象)。
生成器函数旨在生成一个值流供其他方使用。许多函数语言都使用了生成器,它们在其中可能名为流 或序列。现在 ECMAScript 中也引入了它们。
要了解生成器的实际工作原理,需要稍作解释。首先,想象一组简单的名称:
清单 16. 一个简单的集合
var names = ["Ted", "Charlotte", "Michael", "Matthew"];
现在假设我们希望一个函数返回每个名称,每个函数调用一次返回一个名称,直到全部返回:
清单 17. 一个返回每个名称的函数
var getName = (function() { var current = 0; return function() { if (current > names.length) return undefined; else { var temp = names[current]; current++; return temp; } };})();console.log(getName()); // prints Tedconsole.log(getName()); // prints Charlotteconsole.log(getName()); // prints Michaelconsole.log(getName()); // prints Matthewconsole.log(getName()); // prints undefined
起初,上面的函数返回函数的方式可能看起来很陌生。这是必要的,因为 getName 函数需要在多个函数调用中跟踪它的状态。在类似 C 的语言中,可以将状态存储在 getName 函数内的静态变量中,但像类似的 Java 和 C# 一样,ECMAScript 不支持在函数中使用静态变量。在这种情况下,我们将使用闭包,以便函数字面量在返回后继续绑定到 “当前” 变量,使用该变量存储自己的状态。
要理解的重要一点是,此函数不会一次获取一个有限的值序列(采用返回数组的形式),它一次获取一个元素,直到没有剩余的元素。
但是如果要返回的元素永远用不完,该怎么办?
与在名称数组上使用迭代器相比,似乎前面的代码示例没有多大改进。毕竟,这就是迭代器的用途:让各个元素能够访问一个集合的内容。重要的变化表现在原始数组不再可见,甚至不再是数组时:
清单 18. 一个有限的流
var getName = (function() { var current = 0; return function() { switch (current++) { case 0: return "Ted"; case 1: return "Charlotte"; case 2: return "Michael"; case 3: return "Matthew"; default: return undefined; } };})();
从技术上讲,您看到的仍是一个迭代器,但它的实现看起来与来自样本的迭代器截然不同;这里没有集合,只有一组硬编码的值。
从本质上讲,它是一个没有关联集合的迭代器,这突出了一个重要的事实:我们的函数生成的值的来源 现在深度封装在离调用方很远的地方。这进而引入了一个更有趣的想法:调用方可能不知道最初没有集合,不知道生成的值永无止境。这就是一些语言所称的无限流。 斐波纳契数列(全球每种函数语言的 “Hello World” 等效程序)就是这样一个无限流:
清单 19. 斐波纳契数的无限流
var fibo = (function() { var prev1 = undefined; var prev2 = undefined; return function() { if (prev1 == undefined && prev2 == undefined) { prev1 = 0; return 0; } if (prev1 == 0 && prev2 == undefined) { prev1 = 1; prev2 = 0; return 1; } else { var ret = prev1 + prev2; prev2 = prev1; prev1 = ret; return ret; } };})();
无限流 是一个从不会用完要返回的值的流。在这种情况下,斐波拉契数列没有逻辑终点。
JavaScript 中的反应式编程非常复杂。如果您打算了解更多的信息,可以访问 JavaScript 反应式编程 GitHub 页面。
尽管起初看起来很奇怪,但无限流的概念是其他一些基于 ECMAScript 的有趣技术(比如反应式编程)的核心。想想如果我们将用户事件(比如移动鼠标、单击按钮和按键)视为无限流,函数从流中获取每个事件并进行处理,结果会怎样?
构建无限流所需的代码量非常大,所以 ECMAScript 6 定义了一种新语法(和一个新关键字)来让代码更加简洁。在这里可以看到,我重写了清单 17 中的示例:
清单 20. 一个使用生成器的有限值流
function* getName() { yield "Ted"; yield "Charlotte"; yield "Michael"; yield "Matthew";}let names = getName();console.log(names.next().value);console.log(names.next().value);console.log(names.next().value);console.log(names.next().value);console.log(names.next().value);
同样地,该函数将按顺序打印出每个名称。当它用完所有名称时,它会不停地打印 “undefined”。在语法上,yield 关键字看起来类似于 return,但事实上,它表示 “返回但记住我在此函数中的位置,以便下次调用它时,从离开的位置开始执行。”这显然比传统的 return 更复杂。
生成器的使用与第一个示例稍微不同:我们捕获了 getName 函数的返回值,然后像迭代器一样使用该对象。这是 ECMAScript 6 中的一个特意的设计决定。从技术上讲,生成器函数返回一个 Generator 对象,该对象用于从生成器函数获取各个值。新语法旨在尽可能地模拟迭代器。
谈到迭代器,还有最后一个需要知道的语法更改。
经典的 for 循环在 ECMAScript 6 具有了新形式,这是由于添加了一个辅助关键字:of。在许多方面,新语法与 for-in 没多大区别,但它支持生成器函数。
返回到清单 19 中的斐波纳契数列,这是向函数添加 for-of 关键字时发生的情况:
清单 21. 斐波纳契数列中的 ‘for of’
function* fibo() { // a generator function yield 0; yield 1; let [prev, curr] = [0, 1]; while (true) { [prev, curr] = [curr, prev + curr]; yield curr; }}for (let n of fibonacci()) { console.log(n); // By the way, this is an infinite stream, so this loop // will never terminate unless you break out of it}
for-of 和 for-in 之间存在着细微区别,但在大多数情况下,您可以使用 for-of 直接取代旧语法。它添加了隐式使用生成器的能力 — 就像我们在无限流示例中使用 getName() 执行的操作一样。
现在,您已注意到 ECMAScript 6 绝对不是一个简单的勘误版本。我们这里介绍的许多功能都源自函数编程概念,但不要被这种现象所欺骗:ECMAScript 6 远不止是一种函数语言。采用一些函数功能可以使编写 ECMAScript 代码变得更容易,但要实现此目的,您不需要知道单子 (monads)、独异点 (monoids) 和范畴论。在大多数情况下,流行的态度是:如果它适合您,则使用它;如果不适合,还有其他许多选择。
所以如果您从未执行过任何函数编程,不要紧张 — 您可以对 ECMAScript 6 浅尝辄止,绝不会深陷其中。
无论如何,本系列的下一篇文章又会让我们回到原点,介绍 ECMAScript 6 中新的基于类的语法和对象增强。