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中非常實用的新特性介紹就給大家介紹這麼多，希望對大家有幫助！