ECMAScript 6離我們?cè)絹?lái)越近了，作為它最重要的方言，Javascript也即將迎來(lái)語(yǔ)法上的重大變革，InfoQ特開(kāi)設(shè)“深入淺出ES6”專欄，來(lái)看一下ES6將給我們帶來(lái)哪些新內(nèi)容。
寫在前面
ES6 已經(jīng)提交給 Ecma 大會(huì)審查了，也就是說(shuō)，我們將迎來(lái)一大波 javascript 的最新標(biāo)準(zhǔn)，還有一些語(yǔ)法糖。ES6 中有很多值得我們關(guān)注的東西，下面是我發(fā)現(xiàn)的一些我們最常用的一些新特性，進(jìn)行記錄一下。
1. for-of循環(huán)
這個(gè)東西用來(lái)循環(huán)數(shù)組很爽，原因呢，是因?yàn)樗鼜浹a(bǔ)了目前 es5 中循環(huán)數(shù)組的一切缺陷。
比如 for-in，它會(huì)遍歷數(shù)組對(duì)象的附加屬性，而不僅僅是遍歷數(shù)組值。還有一點(diǎn)是，for-in 中的索引是 string 類型的,這一點(diǎn)尤其重要。
var arrObj=['alexchen',1,{}];
arrObj._name='attr-AlexChen';
for(var i in arrObj){
console.log(arrObj[i]) // 會(huì)把_name屬性也遍歷出來(lái)
console.log(typeof(i)) // 全部輸出 string
}
當(dāng)然我們還有 forEach() 函數(shù)，它也有問(wèn)題，比如你不能在里面 break return 之類的：
var arrObj = ['alexchen','boy','great'];
arrObj.forEach(function (v) {
if (v == 'boy') {
return 'can not return';
}
console.log(v) //會(huì)輸出alexchen great
})
這樣看起來(lái)要比 for-in 簡(jiǎn)便很多。但就像上面說(shuō)的一樣，它有也有不足的地方。那么我們來(lái)試試 for-of 吧：
var arrObj = ['alexchen',1,{}];
arrObj._name = 'attr-alexchen';
for (var i of arrObj) {
console.log(i);//這里只會(huì)輸出,alexchen,1,object{},不會(huì)輸出attr-alexchen
console.log(typeof(i))//這里會(huì)輸出 string,number,object
if (i == 1) {
break;
}
console.log(i)//只會(huì)輸出 alexchen，滿足條件之后就不在繼續(xù)循環(huán)，提高了效率并且可以自由控制跳出循環(huán)或繼續(xù)循環(huán)
}
可以看到：
當(dāng)使用 for-of 的時(shí)候，循環(huán)的是數(shù)組內(nèi)部的元素且不會(huì)出現(xiàn) for-in 中將附加屬性也遍歷的情況，其次，循環(huán)變量的類型和其在數(shù)組中的類型保持一致，而不是全部是 string 的情況。
就這兩點(diǎn)就值得我們選擇 for-of 而不是 forEach() 或 for-in 當(dāng)然，現(xiàn)在還有些瀏覽器不支持。不過(guò)以上代碼可以在最新版本的 FireFox 執(zhí)行成功并得到預(yù)期結(jié)果。當(dāng)然 for-of 并不是只在數(shù)組上使用，你可以用在任何類數(shù)組類型的對(duì)象上，比如 DOM NodeList， 字符串 等。
2. 模版字符串
這個(gè)東西也非常好玩，用在字符串拼接的地方。從名稱上我們就知道是干啥的了。在前端開(kāi)發(fā)過(guò)程中難免會(huì)遇到要?jiǎng)討B(tài)拼接字符串的情況(動(dòng)態(tài)dom生成，數(shù)據(jù)格式化)等：
(function sayHello(name, words) {
console.log(`hello: ${name},welcome es6,your words is: ${words}`); //
})('alexchen','im admin')//運(yùn)行之后將會(huì)輸出：hello: alexchen,welcome es6,your words is: im admin
注意，被當(dāng)作模版的字符串使用 ` 號(hào)包裹的。其中 $(paramenter) 是占位符,而且支持對(duì)象，eg:$(obj.name) 這種形式。與普通字符串相比模版字符串可以寫成多行而不需要用 + 連接：
hello:$(name),
welcome es6,
your words is $(words)
值得注意的是，模版字符串不會(huì)轉(zhuǎn)義特殊字符，因此需要自己處理其中的安全隱患。模版字符串并不能夠代替模版框架，原因是模版字符串沒(méi)有內(nèi)置的循環(huán)語(yǔ)法和條件語(yǔ)句。因此，對(duì)于常規(guī)的普通的字符串拼接，我們可以使用它來(lái)完成，會(huì)讓你的代碼看起來(lái)更酷一點(diǎn)。PS(除此之外，我覺(jué)得它并沒(méi)有什么卵用。ψ(╰_╯))
這里有更詳細(xì)的介紹來(lái)解決上面說(shuō)道的沒(méi)有內(nèi)置循環(huán)和判斷分支的問(wèn)題:
es6-模版字符串-mozilla
3. 默認(rèn)參數(shù)（Defaults parameters）
這個(gè)有點(diǎn)意思，是這樣的，我們都知道 js 函數(shù)是不需要給函數(shù)參數(shù)設(shè)置默認(rèn)值的，比如如下代碼會(huì)報(bào)錯(cuò)：
(function(a=0,b=0){return a+b;})(1,2)//不支持es6的瀏覽器下會(huì)報(bào)錯(cuò)的SyntaxError: Unexpected token =
這也就意味著，我們的參數(shù)不能給默認(rèn)值，如果需要給參數(shù)默認(rèn)值就需要在函數(shù)內(nèi)部判斷其是否為 undefined 的方式來(lái)處理。然而在 ES6 中呢，我們可以給參數(shù)設(shè)置默認(rèn)值，而不用在函數(shù)內(nèi)部去判斷后賦默認(rèn)值，不但可以賦值默認(rèn)值，還可以使用運(yùn)算表達(dá)式，如下：
(function testDefaultsParams(pars1 = "alexchen",
pars2 = (pars1 == "alexchen") ? "admin" : "not admin") {
console.log(`welcome ${pars1} ,u r ${pars2}!!`)//用到了上面說(shuō)的模版字符串
})();
/**參數(shù)為空時(shí)輸出，welcome alexchen ,u r admin!!,
如果第一個(gè)參數(shù)不是alexchen則輸出，welcome alexchen ,u r not admin!!**/
這種方式在編寫代碼時(shí)非常的簡(jiǎn)便，和動(dòng)態(tài)語(yǔ)言一樣，比如 c# 中。這樣既直觀，又方便。所以用起來(lái)還是很不錯(cuò)的。還一個(gè)剩余參數(shù)（Rest parameters），筆者沒(méi)發(fā)現(xiàn)有什么特別的用處，因此就不寫啦，感興趣的可以去看看
默認(rèn)參數(shù)和剩余參數(shù)-mozilla
ES6 中還有很多新特性和語(yǔ)法。感興趣的可以看一下 mozilla 團(tuán)隊(duì)的博客，里面有很詳細(xì)的介紹，而且是系列文章。
mozilla-ES6-系列介紹
好了，以上就是我在 ES6 中發(fā)現(xiàn)的三個(gè)比較實(shí)用的新東西，這三個(gè)應(yīng)該是日常開(kāi)發(fā)中用的最多的了,在此做個(gè)記錄。
關(guān)于ES6中非常實(shí)用的新特性介紹就給大家介紹這么多，希望對(duì)大家有所幫助！
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試