完整word版ES6十大特性.docx
- 文档编号:25244301
- 上传时间:2023-06-06
- 格式:DOCX
- 页数:22
- 大小:181.51KB
完整word版ES6十大特性.docx
《完整word版ES6十大特性.docx》由会员分享,可在线阅读,更多相关《完整word版ES6十大特性.docx(22页珍藏版)》请在冰豆网上搜索。
完整word版ES6十大特性
如果你还不知道什么是ES6的话,它是JavaScript一个新的实现,如果你是一个忙碌的JavaScript开发者(但谁不是呢),那么继续读下去吧,看看当今最热门的语言——JavaScript的新一代实现中,最棒的十个特性。
这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序):
1.默认参数
2.模版表达式
3.多行字符串
4.拆包表达式
5.改进的对象表达式
6.箭头函数 =&>
7.Promise
8.块级作用域的let和const
9.类
10.模块化
注意:
这个列表十分主观并且带有偏见,其他未上榜的特性并不是因为没有作用,我这么做只是单纯的希望将这份列表中的项目保持在十个。
首先,一个简单的JavaScript时间线,不了解历史的人也无法创造历史。
1.1995年:
JavaScript以LiveScript之名诞生
2.1997年:
ECMAScript标准确立
3.1999年:
ES3发布,IE5非常生气
4.2000年-2005年:
XMLHttpRequest,熟知为AJAX,在如OutlookWebAccess(2002)、Oddpost(2002)、Gmail(2004)、GoogleMaps(2005)中得到了广泛的应用
5.2009年:
ES5发布(这是我们目前用的最多的版本),带来了forEach / Object.keys/ Object.create(特地为DouglasCrockford所造,JSON标准创建者),还有JSON标准。
历史课上完了,我们回来讲编程。
1.ES6中的默认参数
还记得我们以前要这样子来定义默认参数:
JavaScript
1
2
3
4
5
6
varlink=function(height,color,url){
varheight=height||50
varcolor=color||'red'
varurl=url||'http:
//azat.co'
...
}
这样做一直都没什么问题,直到参数的值为0,因为0在JavaScript中算是false值,它会直接变成后面硬编码的值而不是0本身。
当然了,谁要用0来传值啊(讽刺脸)?
所以我们也忽略了这个瑕疵,沿用了这个逻辑,否则的话只能…..没有否则!
在ES6中,我们可以把这些默认值直接放在函数签名中。
JavaScript
1
2
3
varlink=function(height=50,color='red',url='http:
//azat.co'){
...
}
对了,这个语法和Ruby很像!
2.ES6中的模版表达式
模版表达式在其他语言中一般是为了在模版字符串中输出变量,所以在ES5中,我们非得把字符串破开变成这样:
JavaScript
1
2
varname='Yournameis'+first+''+last+'.'
varurl='http:
//localhost:
3000/api/messages/'+id
幸运的是在ES6中我们有了新语法,在反引号包裹的字符串中,使用${NAME}语法来表示模板字符:
JavaScript
1
2
varname=`Yournameis${first}${last}`
varurl=`http:
//localhost:
3000/api/messages/${id}`
3.ES6中的多行字符串
另一个好吃的语法糖就是多行字符串,以前我们的实现是像这样的:
JavaScript
1
2
3
4
5
6
7
8
varroadPoem='Thentooktheother,asjustasfair,nt'
+'Andhavingperhapsthebetterclaimnt'
+'Becauseitwasgrassyandwantedwear,nt'
+'Thoughasforthatthepassingtherent'
+'Hadwornthemreallyaboutthesame,nt'
varfourAgreements='Youhavetherighttobeyou.n
Youcanonlybeyouwhenyoudoyourbest.'
但是在ES6中,只要充分利用反引号。
JavaScript
1
2
3
4
5
6
7
8
varroadPoem=`Thentooktheother,asjustasfair,
Andhavingperhapsthebetterclaim
Becauseitwasgrassyandwantedwear,
Thoughasforthatthepassingthere
Hadwornthemreallyaboutthesame,`
varfourAgreements=`Youhavetherighttobeyou.
Youcanonlybeyouwhenyoudoyourbest.`
4.ES6中的拆包表达式
拆包可能是一个比较难理解的概念,因为这里面真的是有魔法发生。
假如说你有一个简单的赋值表达式,把对象中的house的mouse赋值为house和mouse的变量。
JavaScript
1
2
3
vardata=$('body').data(),//假设data中有mouse和house的值
house=data.house,
mouse=data.mouse
另一个拆包的实例(Node.js):
JavaScript
1
2
3
4
5
varjsonMiddleware=require('body-parser').json
varbody=req.body,//body中有用户名和密码值
username=body.username,
password=body.password
但是在ES6中我们可以用以下语句替换:
JavaScript
1
2
3
4
5
var{house,mouse}=$('body').data()//我们会拿到house和mouse的值的
var{jsonMiddleware}=require('body-parser')
var{username,password}=req.body
甚至在数组中也能用,简直疯狂!
JavaScript
1
2
var[col1,col2] =$('.column'),
[line1,line2,line3,,line5]=file.split('n')
习惯拆包语法可能需要一些时间,但是这绝对是糖衣炮弹。
5.ES6中改进的对象表达式
你能用对象表达式所做的是超乎想象的!
类定义的方法从ES5中一个美化版的JSON,进化到ES6中更像类的构造。
这是一个ES5中典型的对象表达式,定义了一些方法和属性。
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
varserviceBase={port:
3000,url:
'azat.co'},
getAccounts=function(){return[1,2,3]}
varaccountServiceES5={
port:
serviceBase.port,
url:
serviceBase.url,
getAccounts:
getAccounts,
toString:
function(){
returnJSON.stringify(this.valueOf())
},
getUrl:
function(){return'http:
//'+this.url+':
'+this.port},
valueOf_1_2_3:
getAccounts()
}
如果你想做的好看一点,我们可以用Object.create方法来让 serviceBase 成为 accountServiceES5 的 prototype 从而实现继承。
JavaScript
1
2
3
4
5
6
7
8
9
varaccountServiceES5ObjectCreate=Object.create(serviceBase)
varaccountServiceES5ObjectCreate={
getAccounts:
getAccounts,
toString:
function(){
returnJSON.stringify(this.valueOf())
},
getUrl:
function(){return'http:
//'+this.url+':
'+this.port},
valueOf_1_2_3:
getAccounts()
}
我知道 accountServiceES5ObjectCreate 和 accountServiceES5 是不完全相同的。
因为一个对象 accountServiceES5 会有如下所示的 __proto__ 属性:
但对于这个示例,我们就把这两者考虑为相同的。
所以在ES6的对象表达式中,我们把getAccounts:
getAccounts简化为getAccounts,,并且我们还可以用__proto__直接设置prototype,这样听起来合理的多。
(不过并不是用proto)
JavaScript
1
2
3
4
5
varserviceBase={port:
3000,url:
'azat.co'},
getAccounts=function(){return[1,2,3]}
varaccountService={
__proto__:
serviceBase,
getAccounts,
还有,我们可以调用 super 和动态索引(valueOf_1_2_3)
JavaScript
1
2
3
4
5
6
7
8
//续上段代码
toString(){
returnJSON.stringify((super.valueOf()))
},
getUrl(){return'http:
//'+this.url+':
'+this.port},
['valueOf_'+getAccounts().join('_')]:
getAccounts()
};
console.log(accountService)
这是对老旧的对象表达式一个很大的改进!
6.ES6中的箭头函数
这或许是我最想要的一个特性,我爱CoffeeScript就是因为他胖胖的箭头(=&>相对于-&>),现在ES6中也有了。
这些箭头最神奇的地方在于他会让你写正确的代码。
比如,this在上下文和函数中的值应当是相同的,它不会变化,通常变化的原因都是因为你创建了闭包。
使用箭头函数可以让我们不再用that=this或者self=this或者_this=this或者.bind(this)这样的代码,比如,这些代码在ES5中就特别丑。
JavaScript
1
2
3
4
var_this=this
$('.btn').click(function(event){
_this.sendData()
})
这是在ES6中去掉_this=this之后:
JavaScript
1
2
3
$('.btn').click((event)=>{
this.sendData()
})
可惜的是,ES6委员会觉得再加上瘦箭头(-&>)的话就对我们太好了,所以他们留下了一个老旧的function。
(瘦箭头在CoffeeScript中的作用就像ES5/6中一样)
JavaScript
1
2
3
4
5
6
7
8
9
10
varlogUpperCase=function(){
var_this=this
this.string=this.string.toUpperCase()
returnfunction(){
returnconsole.log(_this.string)
}
}
logUpperCase.call({string:
'es6rocks'})()
在ES6中我们无需_this
JavaScript
1
2
3
4
5
6
varlogUpperCase=function(){
this.string=this.string.toUpperCase()
return()=>console.log(this.string)
}
logUpperCase.call({string:
'es6rocks'})()
注意,在ES6中你可以合理的把箭头函数和旧式 function 函数混用。
当箭头函数所在语句只有一行时,它就会变成一个表达式,它会直接返回这个语句的值。
但是如果你有多行语句,你就要明确的使用return。
这是ES5中利用messages数组创建一个数组的代码:
JavaScript
1
2
3
4
varids=['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
varmessages=ids.map(function(value){
return'IDis'+value//显式返回
});
在ES6中会变成这样:
JavaScript
1
2
varids=['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
varmessages=ids.map(value=>`IDis${value}`)//隐式返回
注意到我用了字符串模版吗,又一个从CoffeeScript中来的功能,我爱它们!
在只有一个参数的函数签名中,括号是可有可无的,但是如果多于一个参数时就要加上。
JavaScript
1
2
varids=['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
varmessages=ids.map((value,index,list)=>`IDof${index}elementis${value}`)//隐式返回
7.ES6中的Promise
Promise是一个有争议的话题。
现在有很多Promise实现,语法也大致相同,比如q/ bluebird/ deferred.js/ vow/ avow/ jquerydeferred等等。
其他人说我们并不需要Promise,异步,回调和generator之类的就很好。
庆幸的是,现在在ES6中终于有一个标准的Promise实现。
我们来看一个相当微不足道的延迟异步执行,用setTimeout实现
JavaScript
1
2
3
setTimeout(function(){
console.log('Yay!
')
},1000)
我们可以用ES6中的Promise重写:
JavaScript
1
2
3
4
5
varwait1000= newPromise(function(resolve,reject){
setTimeout(resolve,1000)
}).then(function(){
console.log('Yay!
')
})
或者用ES6的箭头函数:
JavaScript
1
2
3
4
5
varwait1000= newPromise((resolve,reject)=>{
setTimeout(resolve,1000)
}).then(()=>{
console.log('Yay!
')
})
到现在为止,我们只是单纯增加了代码的行数,还明显没有带来任何好处,你说的对。
但是如果我们有更多复杂的逻辑内嵌在setTimeout()中的回调时好处就来了:
JavaScript
1
2
3
4
5
6
setTimeout(function(){
console.log('Yay!
')
setTimeout(function(){
console.log('Wheeyee!
')
},1000)
},1000)
可以用ES6中的Promise重写:
JavaScript
1
2
3
4
5
6
7
8
9
10
varwait1000= ()=>newPromise((resolve,reject)=>{setTimeout(resolve,1000)})
wait1000()
.then(function(){
console.log('Yay!
')
returnwait1000()
})
.then(function(){
console.log('Wheeyee!
')
});
还是无法相信Promise比普通回调要好?
我也不信。
我想一旦知道了回调这个方法它就会在你脑中萦绕,额外的复杂的Promise也没有必要存在了。
不论怎么说,ES6中的Promise是为会欣赏的人准备的,Promise有一个不错的失败-捕捉回调机制,看看这篇文章吧,里面有更多关于Promise的信息。
ES6Promise介绍
8.块级作用域的let和const
你可能早就听过对ES6中的let那些奇怪的传说,我记得我第一次到伦敦时为那些TOLET牌子感到非常困惑。
但是ES6中的let和出租无关,这不算是语法糖,它很复杂。
let是一个更新的var,可以让你把变量作用域限制在当前块里。
我们用{}来定义块,但是在ES5中这些花括号起不到任何作用。
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
functioncalculateTotalAmount(vip){
varamount=0
if(vip){
varamount=1
}
{//让块来的更疯狂
varamount=100
{
varamount=1000
}
}
returnamount
}
console.log(calculateTotalAmount(true))
运行结果将会是1000。
天啊!
这是多大的一个Bug。
在ES6中,我们用let来限制变量作用域为函数内。
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
functioncalculateTotalAmount(vip){
varamount=0//或许应该用let,但你可以混用
if(vip){
letamount=1//第一个数量为0
}
{//更多的块
letamount=100//第一个数量为0
{
letamount=1000//第一个数量为0
}
}
returnamount
}
console.log(calculateTotalAmount(true))
运行结果是0,因为在if块中也有let。
如果什么都没有的话(amount=1),那么结果将会是1。
说到const,事情就简单多了。
他仅仅产生是一个不可变的变量,并且他的作用域也像let一样只有块级。
为了演示,这里有定义了一堆常量,并且由于作用域的原因,这些定义都是有效的。
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
functioncalculateTotalAmount(vip){
constamount=0
if(vip){
constamount=1
}
{//更多的块
constamount=100
{
constamount=1000
}
}
returnamount
}
console.log(calculateTotalAmount(true))
依我愚见,let和const让这门语言变得更加复杂,没有这些的时候我们只有一条路可以走,但是现在可以要考虑更多的情景。
;-(
9.ES6中的类
如果你喜欢面向对象编程,那么你会特别喜欢这个特性。
他让你编写和继承类时就跟在Facebook上发一个评论这么简单。
在ES5中,因为没有class关键字(但它是毫无作用的保留字),类的创建和使用是让人十分痛苦的事情。
更惨的是,很多伪类的实现像pseude-classical, classical, functional让人越来越摸不着头脑,为JavaScript的信仰战争火上浇油。
我不会给你展示在ES5中怎么去编写一个类(是啦是啦从对象可以衍生出来其他的类和对象),因为有太多方法去完成。
我们直接看ES6的示例,告诉你ES6的类会用prototype来实现而不是function。
现在有一个baseModel类,其中我们可以定义构造函数和getName()方法。
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
classbaseModel{
constructor(options={},data=[])
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 完整 word ES6 特性