查看: 2318|回复: 0

[JavaScript/JQuery] JavaScript ES6 最值得掌握的5个特性

发表于 2018-2-14 08:00:02

JavaScript ES6 添加了一系列新的语言特性,其中一些特性比其它更具有开创性以及更广的可用性。比如像 ES6 类 这样的特性,虽然新奇,但其实仅仅是在 JavaScript 中创建类的已有方法之上的一种语法糖。而像生成器(generator)这样的功能,虽然非常强大,但却是为了针对性的任务所保留的。

从在过去的12个月里所从事的不同 JavaScript 相关项目中,我发现有 5 个 ES6 特性是不可或缺的,因为它们真正简化了 JavaScript 普通任务的完成方式。你心中的前 5 名可能和我的不一样,如果是的话,我希望你能在结尾的评论区分享它们。

让我们正式开始!

箭头函数(Arrow Functions)

Promises

异步函数(Async Functions)

解构(Destructuring)

默认和剩余参数(Default and Rest Parameters) 1) JavaScript 箭头函数

在 ES6 JavaScript 中,我最喜欢的新增特性之一并不是一个全新特性,而是一个我每次使用都能让我微笑的新语法。我说的就是箭头函数,它提供了一种极致优雅和简洁的方式来定义匿名函数。

简而言之,箭头函数就是丢掉了关键字 function,然后用一个箭头 => 来分离一个匿名函数的参数部分和函数体:

(x, y) => x * y;

这相当于:

  1. function(x, y){
  2. return x * y;
  3. }
复制代码

或者:

  1. (x, y) => {
  2. var factor = 5;
  3. var growth = (x-y) * factor;
  4. }
复制代码

完全等价于:

  1. function(x, y){
  2. var factor = 5;
  3. var growth = (x-y) * factor;
  4. }
复制代码

在使用传统的匿名函数时,箭头函数还消除了一个关键的错误源,即函数内的 this 对象的值。使用箭头函数,this 是基于词法绑定,这仅仅是意味着它的值被绑定到父级作用域的一种奇特的方式,并且永远不会改变。如果一个箭头函数定义在一个自定义对象 countup 中,this 值毫无疑问地指向 countup。比如:

  1. var countup = {
  2. counter: 15,
  3. start:function(){
  4. window.addEventListener('click', () => {
  5. alert(this.counter) // correctly alerts 15 due to lexical binding of this
  6. })
  7. }
  8. };
  9. countup.start();
复制代码

对比传统匿名函数,this 的值在哪变化取决于它被定义的上下文环境。当在上面的例子中尝试引用 this.counter,结果将返回 undefined,这种行为可能会把很多不熟悉动态绑定的复杂性的人搞糊涂。使用箭头函数,this 的值总是可预测并且容易推断的。

对于箭头函数的详细讲解, 请看 "Overview of JavaScript Arrow Functions".

2) JavaScript Promises

JavaScript ES6 Promises 使异步任务的处理方式变成线性, 这是大多数现代Web应用程序中的一项任务。 而不是依靠回调函数 —— 通过JavaScript框架(如jQuery)普及。JavaScript Promises 使用一个中心直观的机制来跟踪和响应异步事件。它不仅使调试异步代码变得更容易,而且使得编写它也是一种乐趣。

所有 JavaScript Promise 都是通过 Promise() 构造函数开始和结束:

  1. const mypromise = new Promise(function(resolve, reject){
  2. // 在这编写异步代码
  3. // 调用 resolve() 来表示任务成功完成
  4. // 调用 reject() 来表示任务失败
  5. })
复制代码

在内部使用 resolve() 和 reject() 方法,当一个 Promise 被完成或拒绝时,我们可以分别向一个 Promise 对象发出信号。 then() 与 catch() 方法随后可以被调用,用以处理完成或拒绝 Promise 后的工作。

我用下面一个被注入 XMLHttpRequest 函数的 Promise 的变种,来一个接一个的检索外部文件内容:

  1. function getasync(url) {
  2. return new Promise((resolve, reject) => {
  3. const xhr = new XMLHttpRequest()
  4. xhr.open("GET", url)
  5. xhr.onload = () => resolve(xhr.responseText)
  6. xhr.onerror = () => reject(xhr.statusText)
  7. xhr.send()
  8. })
  9. }
  10. getasync('test.txt').then((msg) => {
  11. console.log(msg) // echos contents of text.txt
  12. return getasync('test2.txt')
  13. }).then((msg) => {
  14. console.log(msg) // echos contents of text2.txt
  15. return getasync('test3.txt')
  16. }).then((msg) => {
  17. console.log(msg) // echos contents of text3.txt
  18. })
复制代码

要掌握 JavaScript Promises 的关键点,例如 Promise 链和并行执行 Promise,请阅读 "Beginner's Guide to Promises".

3) JavaScript 异步函数

除了 JavaScript Promise,异步函数进一步重写了传统的异步代码结构,使其更具可读性。每当我向客户展示带有async 编程功能的代码时,第一个反应总是令人惊讶,随之而来的是了解它是如何工作的好奇心。

一个异步函数由两部分构成:

1) 一个以 async 为前缀的常规函数

  1. async function fetchdata(url){
  2. // Do something
  3. // Always returns a promise
  4. }
复制代码

2) 在异步函数(Async function)内,使用 await 关键字调用异步操作函数

一个例子胜过千言万语。下面是基于上面示例重写的 Promise,以便使用 Async functions代替:

  1. function getasync(url) { // same as original function
  2. return new Promise((resolve, reject) => {
  3. const xhr = new XMLHttpRequest()
  4. xhr.open("GET", url)
  5. xhr.onload = () => resolve(xhr.responseText)
  6. xhr.onerror = () => reject(xhr.statusText)
  7. xhr.send()
  8. })
  9. }
  10. async function fetchdata(){ // main Async function
  11. var text1 = await getasync('test.txt')
  12. console.log(text1)
  13. var text2 = await getasync('test2.txt')
  14. console.log(text2)
  15. var text3 = await getasync('test3.txt')
  16. console.log(text3)
  17. return "Finished"
  18. }
  19. fetchdata().then((msg) =>{
  20. console.log(msg) // logs "finished"
  21. })
复制代码

上面的例子运行时会输出“test.txt”,“test2.txt”,“test3.txt”,最后是“Finished”。

如你所见,在异步函数中,我们把异步函数 getasync() 当作是同步函数调用 - 没有 then() 方法或回调函数通知进行下一步。无论何时遇到关键字 await,执行都会暂停,直到 getasync() 解决,然后再转到异步函数中的下一行。结果与纯粹的基于 Promise,使用一串 then 方法的方式一样。

要掌握异步函数,包括如何 await 并行执行函数,请阅读 "Introduction to JavaScript Async Functions- Promises simplified"

4) JavaScript 解构

除了箭头函数,这是我每天使用最多的 ES6 功能。ES6 解构并非一个新功能,而是一个新的赋值语法,可以让您快速解压缩对象属性和数组中的值,并将它们分配给各个变量。

  1. var profile = {name:'George', age:39, hobby:'Tennis'}
  2. var {name, hobby} = profile // destructure profile object
  3. console.log(name) // "George"
  4. console.log(hobby) // "Tennis"
复制代码

这里我用解构快速提取 profile 对象的 name 和 hobby 属性 。

使用别名,你可以使用与你正在提取值的对象属性不同的变量名:

  1. var profile = {name:'George', age:39, hobby:'Tennis'}
  2. var {name:n, hobby:h} = profile // destructure profile object
  3. console.log(n) // "George"
  4. console.log(h) // "Tennis"
复制代码

嵌套对象解构

解构也可以与嵌套对象一起工作,我一直使用它来快速解开来自复杂的JSON请求的值:

  1. var jsondata = {
  2. title: 'Top 5 JavaScript ES6 Features',
  3. Details: {
  4. date: {
  5. created: '2017/09/19',
  6. modified: '2017/09/20',
  7. },
  8. Category: 'JavaScript',
  9. },
  10. url: '/top-5-es6-features/'
  11. };
  12. var {title, Details: {date: {created, modified}}} = jsondata
  13. console.log(title) // 'Top 5 JavaScript ES6 Features'
  14. console.log(created) // '2017/09/19'
  15. console.log(modified) // '2017/09/20'
复制代码

解构数组

数组的解构与在对象上的工作方式类似,除了左边的花括号使用方括号代替:

  1. var soccerteam = ['George', 'Dennis', 'Sandy']
  2. var [a, b] = soccerteam // destructure soccerteam array
  3. console.log(a) // "George"
  4. console.log(b) // "Dennis"
复制代码

你可以跳过某些数组元素,通过使用逗号(,):

  1. var soccerteam = ['George', 'Dennis', 'Sandy']
  2. var [a,,b] = soccerteam // destructure soccerteam array
  3. console.log(a) // "George"
  4. console.log(b) // "Sandy"
复制代码

对我而言,解构消除了传统方式提取和分配对象属性和数组值的所有摩擦。要充分掌握ES6解构的复杂性和潜力,请阅读"Getting to Grips with ES6: Destructuring".

5) 默认和剩余参数(Default and Rest Parameters)

最后,我最想提出的ES6的两个特性是处理函数参数。几乎我们在JavaScript中创建的每个函数都接受用户数据,所以这两个特性在一个月中不止一次地派上用场。

默认参数(Default Parameters)

我们都使用过一下模式来创建具有默认值的参数:

  1. function getarea(w,h){
  2. var w = w || 10
  3. var h = h || 15
  4. return w * h
  5. }
复制代码

有了ES6对默认参数的支持,显式定义的参数值的日子已经结束:

  1. function getarea(w=10, h=15){
  2. return w * h
  3. }
  4. getarea(5) // returns 75
复制代码

关于 ES6 默认参数的更多详情 在这.

剩余参数(Rest Parameters)

ES6中的 Rest Parameters 使得将函数参数转换成数组的操作变得简单。

  1. function addit(...theNumbers){
  2. // get the sum of the array elements
  3. return theNumbers.reduce((prevnum, curnum) => prevnum + curnum, 0)
  4. }
  5. addit(1,2,3,4) // returns 10
复制代码

通过在命名参数前添加3个点 ...,在该位置和之后输入到函数中的参数将自动转换为数组。

没有 Rest Parameters, 我们不得不做一些复杂的操作比如 手动将参数转换为数组 :

  1. function addit(theNumbers){
  2. // force arguments object into array
  3. var numArray = Array.prototype.slice.call(arguments)
  4. return numArray.reduce((prevnum, curnum) => prevnum + curnum, 0)
  5. }
  6. addit(1,2,3,4) // returns 10
复制代码

Rest parameters 只能应用于函数的参数的一个子集,就像下面这样,它只会将参数从第二个开始转换为数组:

  1. function f1(date, ...lucknumbers){
  2. return 'The Lucky Numbers for ' + date + ' are: ' + lucknumbers.join(', ')
  3. }
  4. alert( f1('2017/09/29', 3, 32, 43, 52) ) // alerts "The Lucky Numbers for 2017/09/29 are 3,32,43,52"
复制代码

对于 ES6 中 Rest Parameters 完整规范,看这里.

结论

你同意我所说的 ES6 特性的前五名吗?哪个是你最常用的,请在评论区和大家分享。

原文链接Top five features in JavaScript ES6 Worth Mastering

译文出自众城翻译,译文地址



回复

使用道具 举报