DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> ES6中非常實用的新特性介紹
ES6中非常實用的新特性介紹
編輯:關於JavaScript     

ECMAScript 6離我們越來越近了,作為它最重要的方言,Javascript也即將迎來語法上的重大變革,InfoQ特開設“深入淺出ES6”專欄,來看一下ES6將給我們帶來哪些新內容。

寫在前面

ES6 已經提交給 Ecma 大會審查了,也就是說,我們將迎來一大波 javascript 的最新標准,還有一些語法糖。ES6 中有很多值得我們關注的東西,下面是我發現的一些我們最常用的一些新特性,進行記錄一下。

1. for-of循環

這個東西用來循環數組很爽,原因呢,是因為它彌補了目前 es5 中循環數組的一切缺陷。

比如 for-in,它會遍歷數組對象的附加屬性,而不僅僅是遍歷數組值。還有一點是,for-in 中的索引是 string 類型的,這一點尤其重要。

var arrObj=['alexchen',1,{}];
arrObj._name='attr-AlexChen';
for(var i in arrObj){
console.log(arrObj[i]) // 會把_name屬性也遍歷出來 
console.log(typeof(i)) // 全部輸出 string
}

當然我們還有 forEach() 函數,它也有問題,比如你不能在裡面 break return 之類的:

var arrObj = ['alexchen','boy','great'];
arrObj.forEach(function (v) {
if (v == 'boy') {
return 'can not return';
}
console.log(v) //會輸出alexchen great
})

這樣看起來要比 for-in 簡便很多。但就像上面說的一樣,它有也有不足的地方。那麼我們來試試 for-of 吧:

var arrObj = ['alexchen',1,{}];
arrObj._name = 'attr-alexchen';
for (var i of arrObj) {
console.log(i);//這裡只會輸出,alexchen,1,object{},不會輸出attr-alexchen
console.log(typeof(i))//這裡會輸出 string,number,object
if (i == 1) {
break;
}
console.log(i)//只會輸出 alexchen,滿足條件之後就不在繼續循環,提高了效率並且可以自由控制跳出循環或繼續循環
}

可以看到:

當使用 for-of 的時候,循環的是數組內部的元素且不會出現 for-in 中將附加屬性也遍歷的情況,其次,循環變量的類型和其在數組中的類型保持一致,而不是全部是 string 的情況。

就這兩點就值得我們選擇 for-of 而不是 forEach() 或 for-in 當然,現在還有些浏覽器不支持。不過以上代碼可以在最新版本的 FireFox 執行成功並得到預期結果。當然 for-of 並不是只在數組上使用,你可以用在任何類數組類型的對象上,比如 DOM NodeList, 字符串 等。

2. 模版字符串

這個東西也非常好玩,用在字符串拼接的地方。從名稱上我們就知道是干啥的了。在前端開發過程中難免會遇到要動態拼接字符串的情況(動態dom生成,數據格式化)等:

(function sayHello(name, words) { 
console.log(`hello: ${name},welcome es6,your words is: ${words}`); //
})('alexchen','im admin')//運行之後將會輸出:hello: alexchen,welcome es6,your words is: im admin

注意,被當作模版的字符串使用 ` 號包裹的。其中 $(paramenter) 是占位符,而且支持對象,eg:$(obj.name) 這種形式。與普通字符串相比模版字符串可以寫成多行而不需要用 + 連接:

hello:$(name),
welcome es6,
your words is $(words)

值得注意的是,模版字符串不會轉義特殊字符,因此需要自己處理其中的安全隱患。模版字符串並不能夠代替模版框架,原因是模版字符串沒有內置的循環語法和條件語句。因此,對於常規的普通的字符串拼接,我們可以使用它來完成,會讓你的代碼看起來更酷一點。PS(除此之外,我覺得它並沒有什麼卵用。ψ(╰_╯))

這裡有更詳細的介紹來解決上面說道的沒有內置循環和判斷分支的問題:

es6-模版字符串-mozilla

3. 默認參數(Defaults parameters)

這個有點意思,是這樣的,我們都知道 js 函數是不需要給函數參數設置默認值的,比如如下代碼會報錯:

(function(a=0,b=0){return a+b;})(1,2)//不支持es6的浏覽器下會報錯的SyntaxError: Unexpected token =

這也就意味著,我們的參數不能給默認值,如果需要給參數默認值就需要在函數內部判斷其是否為 undefined 的方式來處理。然而在 ES6 中呢,我們可以給參數設置默認值,而不用在函數內部去判斷後賦默認值,不但可以賦值默認值,還可以使用運算表達式,如下:

(function testDefaultsParams(pars1 = "alexchen",
pars2 = (pars1 == "alexchen") ? "admin" : "not admin") {
console.log(`welcome ${pars1} ,u r ${pars2}!!`)//用到了上面說的模版字符串
})();
/**參數為空時輸出,welcome alexchen ,u r admin!!,
如果第一個參數不是alexchen則輸出,welcome alexchen ,u r not admin!!**/

這種方式在編寫代碼時非常的簡便,和動態語言一樣,比如 c# 中。這樣既直觀,又方便。所以用起來還是很不錯的。還一個剩余參數(Rest parameters),筆者沒發現有什麼特別的用處,因此就不寫啦,感興趣的可以去看看

默認參數和剩余參數-mozilla

ES6 中還有很多新特性和語法。感興趣的可以看一下 mozilla 團隊的博客,裡面有很詳細的介紹,而且是系列文章。

mozilla-ES6-系列介紹

好了,以上就是我在 ES6 中發現的三個比較實用的新東西,這三個應該是日常開發中用的最多的了,在此做個記錄。

關於ES6中非常實用的新特性介紹就給大家介紹這麼多,希望對大家有所幫助!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved