下面是10個(gè)ES6最佳特性,排名不分先后:
1.函數(shù)參數(shù)默認(rèn)值
2.模板字符串
3.多行字符串
4.解構(gòu)賦值
5.對(duì)象屬性簡(jiǎn)寫(xiě)
6.箭頭函數(shù)
7.Promise
Let與Const
類(lèi)
模塊化
為函數(shù)的參數(shù)設(shè)置默認(rèn)值:
functionfoo(height, color)
{
varheight = height ||50;
varcolor = color ||'red';
//...
}
這樣寫(xiě)一般沒(méi)問(wèn)題棠枉,但是潦闲,當(dāng)參數(shù)的布爾值為false時(shí),是會(huì)出事情的牵啦!比如,我們這樣調(diào)用foo函數(shù):
foo(0,"","")
因?yàn)?b>0的布爾值為false妄痪,這樣height的取值將是50哈雏。同理color的取值為‘red’衫生。
functionfoo(height =50, color ='red')
{
// ...
}
使用+號(hào)將變量拼接為字符串:
varname ='Your name is '+ first +' '+ last +'.'
將變量放在大括號(hào)之中:
varname =`Your name is${first}${last}.`
ES6的寫(xiě)法更加簡(jiǎn)潔、直觀彭羹。
使用“\n\t”將多行字符串拼接起來(lái):
varroadPoem ='Then took the other, as just as fair,\n\t'
+'And having perhaps the better claim\n\t'
+'Because it was grassy and wanted wear,\n\t'
+'Though as for that the passing there\n\t'
+'Had worn them really about the same,\n\t'
將多行字符串放在反引號(hào)``之間就好了:
varroadPoem =`Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`
當(dāng)需要獲取某個(gè)對(duì)象的屬性值時(shí)泪酱,需要單獨(dú)獲扰梢蟆:
vardata = $('body').data();// data有house和mouse屬性
varhouse = data.house;
varmouse = data.mouse;
一次性獲取對(duì)象的子屬性:
var{ house, mouse} = $('body').data()
對(duì)于數(shù)組也是一樣的:
var[col1, col2]? = $('.column');
對(duì)象中必須包含屬性和值墓阀,顯得非常多余:
varbar ='bar';
varfoo =function()
{
// ...
}
varbaz = {
bar: bar,
foo: foo
};
對(duì)象中直接寫(xiě)變量毡惜,非常簡(jiǎn)單:
varbar ='bar';
varfoo =function()
{
// ...
}
varbaz = { bar, foo };
普通函數(shù)體內(nèi)的this,指向調(diào)用時(shí)所在的對(duì)象斯撮。
functionfoo()
{
console.log(this.id);
}
varid =1;
foo();// 輸出1
foo.call({id:2});// 輸出2
箭頭函數(shù)體內(nèi)的this,就是定義時(shí)所在的對(duì)象帕膜,而不是調(diào)用時(shí)所在的對(duì)象作瞄。
varfoo =()=>{
console.log(this.id);
}
varid =1;
foo();// 輸出1
foo.call({id:2});// 輸出1
嵌套兩個(gè)setTimeout回調(diào)函數(shù):
setTimeout(function()
{
console.log('Hello');// 1秒后輸出"Hello"
setTimeout(function()
{
console.log('Fundebug');// 2秒后輸出"Fundebug"
},1000);
},1000);
使用兩個(gè)then是異步編程串行化种蝶,避免了回調(diào)地獄:
varwait1000 =newPromise(function(resolve, reject)
{
setTimeout(resolve,1000);
});
wait1000
.then(function()
{
console.log("Hello");// 1秒后輸出"Hello"
returnwait1000;
})
.then(function()
{
console.log("Fundebug");// 2秒后輸出"Fundebug"
});
var定義的變量未函數(shù)級(jí)作用域:
{
vara =10;
}
console.log(a);// 輸出10
let定義的變量為塊級(jí)作用域盯滚,因此會(huì)報(bào)錯(cuò):(如果你希望實(shí)時(shí)監(jiān)控JavaScript應(yīng)用的錯(cuò)誤,歡迎免費(fèi)使用Fundebug)
{
leta =10;
}
console.log(a);// 報(bào)錯(cuò)“ReferenceError: a is not defined”
const與let一樣,也是塊級(jí)作用域。
使用構(gòu)造函數(shù)創(chuàng)建對(duì)象:
functionPoint(x, y)
{
this.x = x;
this.y = y;
this.add =function()
{
returnthis.x +this.y;
};
}
varp =newPoint(1,2);
console.log(p.add());// 輸出3
使用Class定義類(lèi),更加規(guī)范根资,且你能夠繼承:
classPoint
{
constructor(x, y)
{
this.x = x;
this.y = y;
}
add()
{
returnthis.x +this.y;
}
}
varp =newPoint(1,2);
console.log(p.add());// 輸出3
JavaScript一直沒(méi)有官方的模塊化解決方案架专,開(kāi)發(fā)者在實(shí)踐中主要采用CommonJS和AMD規(guī)范。而ES6制定了模塊(Module)功能嫂冻。
Node.js采用CommenJS規(guī)范實(shí)現(xiàn)了模塊化胶征,而前端也可以采用,只是在部署時(shí)需要使用Browserify等工具打包桨仿。這里不妨介紹一下CommenJS規(guī)范睛低。
module.js中使用module.exports導(dǎo)出port變量和getAccounts函數(shù):
module.exports = {
port:3000,
getAccounts:function(){
...
}
}
main.js中使用require導(dǎo)入module.js:
varservice =require('module.js')
console.log(service.port)// 輸出3000
ES6中使用export與import關(guān)鍵詞實(shí)現(xiàn)模塊化。
module.js中使用export導(dǎo)出port變量和getAccounts函數(shù):
exportvarport =3000
exportfunctiongetAccounts(url){
...
}
main.js中使用import導(dǎo)入module.js,可以指定需要導(dǎo)入的變量:
import{port, getAccounts}from'module'
console.log(port)// 輸出3000
也可以將全部變量導(dǎo)入:
import*asservicefrom'module'
console.log(service.port)// 3000