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 中發現的三個比較實用的新東西，這三個應該是平常開發中用的最多的了,在此作個記錄。