首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

ECMAScript 6 中的函数增强-1

ECMAScript 6 中的函数增强-1

欢迎继续阅读这个向 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 的数组形式存在,即使没有传递其他参数。
返回列表