ITPub博客

首页 > 应用开发 > Javascript > JavaScript ES6值得掌握的五大功能

JavaScript ES6值得掌握的五大功能

Javascript 作者:cenfeng 时间:2019-06-24 11:43:28 0 删除 编辑

JavaScript ES6为JavaScript语言添加了许多新功能,其中一些功能比其他功能更具开创性和广泛应用。 例如 ES6 Classes之类的 东西  ,虽然新颖,但只是在现有的方法基础上添加语法糖,以便在JavaScript中创建类,而像Generators这样的功能虽然功能非常强大,但却保留用于更专业的任务。

从过去12个月中处理各种JavaScript相关项目开始,这些是ES6的五大特性,我发现它们是不可或缺的,因为它们真正简化了JavaScript中常见任务的完成方式。 您的前五名可能与我的不同,如果他们是,我鼓励您在最后分享评论部分。

开始了!

  1. 箭头功能

  2. 承诺

  3. 异步功能

  4. 解构

  5. 默认和休息参数

1)JavaScript箭头功能

ES6 JavaScript中我最喜欢的一个新功能并不是一个新功能,而是一个令人耳目一新的新语法集,每次我使用它时都会在我脸上露出笑容。 我在谈论Arrow函数,它提供了一种在JavaScript中定义匿名函数的极其优雅和简约的方法。

简而言之,Arrow函数会删除“  function ”关键字,并使用箭头( => )  将函数 的 参数部分与  匿名  函数 的函数BODY 分开  :

1
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >(x,y)=> x * y;</font></font>

这相当于:

1
2
3
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > function (x,y){</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     返回x * y;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font>

要么:

1
2
3
4
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >(x,y)=> {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     var factor = 5;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     var growth =(xy)* factor;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font>

这与:

1
2
3
4
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > function (x,y){</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     var factor = 5;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     var growth =(xy)* factor;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font>

使用传统的匿名函数时,箭头函数也会删除错误的关键源,这是 this 函数内部 “  ”对象的值。 使用箭头函数,“  this ”是词法绑定的,这  只是一种说法,它的值与父作用域绑定,并且从不改变。 如果   在自定义对象“  ”中 定义 了  箭头 函数,则“  countup ”的值 this 指向“  countup ” - 不需要猜测。 例如:

1
2
3
4
五
6
7
8
9
10
11
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > var countup = {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     柜台:15,</font></font><font></font>
      <font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     开始:函数(){</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
         window.addEventListener( 'click' ,()=> {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
             alert( this .counter) //由于词法绑定而正确警告15</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
         })</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     }</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
};</font></font><font></font>
  <font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
countup.start();</font></font>

将其与传统的匿名函数进行比较,其中“  this ”  的值 根据其定义的上下文而变化。 this.counter 在上述情况下 尝试引用时的结果 将返回 undefined ,这种行为可能会混淆许多不熟悉动态错综复杂的行为捆绑。 使用箭头功能,“  this ”  的值 始终可预测且易于推断。

有关Arrow Functions的完整细节,请参阅“  JavaScript箭头函数概述  ”。

2)JavaScript承诺

JavaScript ES6 Promises简化了异步任务的处理方式,这是在大多数现代Web应用程序中发挥作用的任务。 JavaScript Promises不是依赖于JavaScript框架(如jQuery)所推广的回调函数,而是使用一种集中的,直观的机制来跟踪和响应异步事件。 它不仅使调试异步代码变得更加容易,而且编写它也是一种乐趣。

所有JavaScript Promise都由 Promise()  构造函数 生存和死亡 :

1
2
3
4
五
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >const mypromise = new Promise( function (resolve,reject){</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
  //在这里运行的异步代码</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  //调用resolve()表示任务已成功完成</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
  //调用reject()表示任务失败 </font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
})</font></font>

在 内部 使用 resolve() 和 reject() 方法,我们可以分别在履行和拒绝承诺时向Promise对象发出信号。 在 then() 与 catch() 随后方法可以调用采取fullfilled或拒绝承诺的善后工作。

我一直使用以下Promise注入的XMLHttpRequest函数的变体来顺序检索外部文件的内容,一个接一个地检索:

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > function getasync(url){</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     返回新的Promise((resolve,reject)=> {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
         const xhr = new XMLHttpRequest()</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
         xhr.open(“GET”,url)</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
         xhr.onload =()=> resolve(xhr.responseText)</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
         xhr.onerror =()=>拒绝(xhr.statusText)</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
         xhr.send()</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     })</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
getasync( 'test.txt' )。then((msg)=> {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     console.log(msg) //回显text.txt的内容</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
     return getasync( 'test2.txt' )</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
})。then((msg)=> {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     console.log(msg) //回显text2.txt的内容</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
     return getasync( 'test3.txt' )</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
})。then((msg)=> {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     console.log(msg) //回显text3.txt的内容</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
})</font></font>

要掌握JavaScript Promises的关键方面,例如链接Promise和并行执行Promise,请阅读“  Beginner's Promises to Promises  ”。

3)JavaScript异步函数

与JavaScript Promises一起,Async函数进一步重写了传统异步代码的构造,因此它更易读,更易于理解。 每当我向客户展示编写 async  功能的 客户代码时 ,第一反应总是令人惊讶,接着是好奇心,以了解它是如何工作的。

异步功能由两部分组成:

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

1
2
3
4
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >async function fetchdata(url){</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     // 做一点事</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
     //总是返回一个承诺</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
     }</font></font>

2) await 在主Async函数中 使用 异步函数调用前 的 关键字。

一个例子胜过千言万语。 以下是基于Promise的示例的重写,以使用  Async函数 :

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > function getasync(url){ //与原始函数相同</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
     返回新的Promise((resolve,reject)=> {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
         const xhr = new XMLHttpRequest()</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
         xhr.open(“GET”,url)</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
         xhr.onload =()=> resolve(xhr.responseText)</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
         xhr.onerror =()=>拒绝(xhr.statusText)</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
         xhr.send()</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     })</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
async function fetchdata(){ //主异步函数</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
     var text1 = await getasync( 'test.txt' )</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     执行console.log(文本)</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     var text2 = await getasync( 'test2.txt' )</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     执行console.log(文本2)</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     var text3 = await getasync( 'test3.txt' )</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     执行console.log(文字3)</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     返回“完成”</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
fetchdata()。then((msg)=> {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     console.log(msg) //记录“已完成”</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
})</font></font>

上面的例子运行时回显“test.txt”,“test2.txt”,“test3.txt”的内容,最后按顺序“完成”。

正如您所看到的,在 异步 函数 内部 ,我们将异步函数 getasync() 称为 同步函数 -  无需 then()  方法或回调函数来指示下一步。 只要  await 遇到关键字,执行就会暂停,直到  getasync() 解决,然后再转到Async函数中的下一行。 结果与纯粹的基于Promised的方法相同,使用一系列 then() 方法。

要掌握异步函数,包括如何 await  并行 执行 函数,请阅读“  简化JavaScript异步函数简介  ”。

4)JavaScript解构

在Arrow Functions旁边,这是我每天使用最多的ES6功能。 ES6 Destructuring不是一个新功能,而是一种新的赋值语法,它允许您快速从对象属性和数组中解压缩值并将它们分配给单个变量。

1
2
3
4
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > var profile = {name: 'George' ,年龄:39岁,爱好: '网球' }</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
var {name,hobby} = profile // destructure profile object</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
console.log(name) //“George”</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
console.log(业余爱好) //“网球”</font></font>

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

使用别名,您可以使用不同的变量名称与相应的对象属性相比,您从以下位置提取值:

1
2
3
4
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > var profile = {name: 'George' ,年龄:39岁,爱好: '网球' }</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
var {name:n,hobby:h} = profile // destructure profile object</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
console.log(n) //“乔治”</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
console.log(h) //“网球”</font></font>

嵌套对象解构

解构也适用于嵌套对象,我总是使用它来快速解决来自复杂JSON请求的值:

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > var jsondata = {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     标题:“5大JavaScript ES6功能”,</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     细节: {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
         日期:{</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
             创建: '2017/09/19' ,</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
             修改: '2017/09/20' ,</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
         },</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
         分类: 'JavaScript' ,</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     },</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     url: '/ top-5-es6-features /' </font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
};</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
var {title,Details:{date:{created,modified}}} = jsondata</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
console.log(title) //'前5个JavaScript ES6功能'</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
console.log(已创建) //'2017/09/19'</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
console.log(已修改) //'2017/09/20'</font></font>

解构数组

数组上的解构与对象类似,除了左侧的花括号,而不是使用方括号:

1
2
3
4
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > var soccerteam = [ 'George' , 'Dennis' , 'Sandy' ]</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
var [a,b] = soccerteam // destructure soccerteam array</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
console.log(a) //“乔治”</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
console.log(b) //“Dennis”</font></font>

使用逗号(,)解压缩其元素时,可以跳过某些Array元素:

1
2
3
4
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > var soccerteam = [ 'George' , 'Dennis' , 'Sandy' ]</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
var [a,b] = soccerteam // destructure soccerteam array</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
console.log(a) //“乔治”</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
console.log(b) //“桑迪”</font></font>

对我来说,解构消除了传统方式提取和分配对象属性和数组值的所有摩擦。 要完全掌握ES6解构的复杂性和潜力,请阅读“  掌握ES6: 解构 ”。

5)默认和休息参数

最后,我想提出的ES6的下两个特性主要是处理函数参数。 我们在JavaScript中创建的几乎所有函数都接受用户数据,因此这两个功能在满月时不止一次派上用场。

默认参数

在创建具有应具有默认值的参数的函数时,我们都使用了以下模式:

1
2
3
4
五
function getarea(w,h){<font></font>
var w = w || 10<font></font>
var h = h || 15<font></font>
return w * h<font></font>
}

借助ES6对默认参数的支持,显式定义的参数值的测试日期结束:

1
2
3
4
function getarea(w=10, h=15){<font></font>
return w * h<font></font>
}<font></font>
getarea(5) // returns 75

在ES6默认参数的详细信息  在这里 。

休息参数

ES6中的Rest参数使得将函数参数转换为数组以便于操作变得简单。

1
2
3
4
五
function addit(...theNumbers){<font></font>
     return theNumbers.reduce((prevnum, curnum) => prevnum + curnum, 0) // get the sum of the array elements<font></font>
}<font></font>
<font></font>
addit(1,2,3,4) // returns 10

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

如果没有Rest参数,我们必须像下面那样进行复杂的操作,首先  手动将参数转换为数组 :

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

Rest参数只能应用于函数参数的一个子集,如下所示,它只将参数从第2个开始转换为数组:

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


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/69933200/viewspace-2648502/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-06-18

  • 博文量
    125
  • 访问量
    129474