欢迎继续阅读这个向 JavaScript 开发人员介绍 ECMAScript 6 的文章系列。在 中,学习了 6 种语言更新,它们解决了 JavaScript 中长期存在的问题,或者使编写某些功能变得更容易。这些更新中包含新的解构赋值运算,可在变量声明中使用该运算将数组或对象解构为它的构成部分。如果尚未阅读第 1 部分,应该立刻阅读该部分;我假设您拥有一些在这里讨论的背景知识。
关于本系列ECMAScript 6 于 2015 年 6 月被采纳,是第一个为某种语言编写的 JavaScript 标准,它不只是帮助将现代 Web 联系在一起,而且为现代 Web 提供了强大的支持。在本 中,编程语言导师 Ted Neward 将介绍正成为您最喜欢的 Web 开发工具中的标准的新功能和语法,还将展示如何恰当地将它们引入您自己的代码中。
第 2 部分专门介绍将改变您使用 JavaScript 中的函数的方式的语言更新。在这一部分中,我们将介绍函数定义和调用语法,您将进一步了解解构赋值(这一次在函数定义中)。我还将介绍新的箭头函数语法和生成器函数,后者给经典的迭代器和古老的for 循环带来了有趣的转机。
函数声明中的解构JavaScript 的新解构赋值得名于数组或对象可以 “解构” 并提取出组成部分的概念。在 中,我们学习了如何在局部变量中使用解构。它在函数参数声明中也很有用。
如果某个函数需要一个对象,您可以在函数开始之前,利用解构功能提取出该对象的相关部分。可通过向函数的参数添加解构语法来实现此目的,如清单 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!"
|
基本上讲:如果在调用位置指定了一个参数,那么该参数将接受传递的值;如果未指定值,则会分配默认值。
与 中介绍的一些更新一样,新的默认参数实质上就是语法糖。在以前的 ECMAScript 版本中,您可能这样编写它:
清单 3. 旧式默认参数var sayHello = function(message) {
if (message === undefined) {
message = "Hello world!";
}
console.log(message);
}
sayHello(); // prints "Hello world!"
sayHello("Howdy!"); // prints "Howdy!"
|
新语法更短且表达能力更强,而且标准化了许多程序员多年来执行的工作。
剩余参数(Rest parameters)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 的数组形式存在,即使没有传递其他参数。 |