JavaScript ES6为JavaScript语言添加了许多新功能,其中一些功能比其他功能更具开创性和广泛应用。
例如
ES6 Classes之类的
东西
,虽然新颖,但只是在现有的方法基础上添加语法糖,以便在JavaScript中创建类,而像Generators这样的功能虽然功能非常强大,但却保留用于更专业的任务。
从过去12个月中处理各种JavaScript相关项目开始,这些是ES6的五大特性,我发现它们是不可或缺的,因为它们真正简化了JavaScript中常见任务的完成方式。
您的前五名可能与我的不同,如果他们是,我鼓励您在最后分享评论部分。
开始了!
-
箭头功能
-
承诺
-
异步功能
-
解构
-
默认和休息参数
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)
})</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>
|
在
内部
使用
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)
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)
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)
})</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>
|
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){
返回新的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(){
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>
|
上面的例子运行时回显“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
console.log(name)
console.log(业余爱好)
|
这里我用解构快速提取
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
console.log(n)
console.log(h)
|
嵌套对象解构
解构也适用于嵌套对象,我总是使用它来快速解决来自复杂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)
console.log(已创建)
console.log(已修改)
|
解构数组
数组上的解构与对象类似,除了左侧的花括号,而不是使用方括号:
|
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
console.log(a)
console.log(b)
|
使用逗号(,)解压缩其元素时,可以跳过某些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
console.log(a)
console.log(b)
|
对我来说,解构消除了传统方式提取和分配对象属性和数组值的所有摩擦。
要完全掌握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)
|
在ES6默认参数的详细信息
在这里
。
休息参数
ES6中的Rest参数使得将函数参数转换为数组以便于操作变得简单。
|
1
2
3
4
五
|
function
addit(...theNumbers){<font></font>
return
theNumbers.reduce((prevnum, curnum) => prevnum + curnum, 0)
}<font></font>
<font></font>
addit(1,2,3,4)
|
通过在命名参数前面添加3个点(...)作为前缀,在该位置及之后输入到函数中的参数将自动转换为数组。
如果没有Rest参数,我们必须像下面那样进行复杂的操作,首先
手动将参数转换为数组
:
|
1
2
3
4
五
6
|
function
addit(theNumbers){<font></font>
var
numArray = Array.prototype.slice.call(arguments)
return
numArray.reduce((prevnum, curnum) => prevnum + curnum, 0)<font></font>
}<font></font>
<font></font>
addit(1,2,3,4)
|
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) )
|
来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/69933200/viewspace-2648502/
,如需转载,请注明出处,否则将追究法律责任。