ES6特性總結（2）——語法二

前言

在上一篇中，咱們講到了一些有趣的新特性，包括let和const關鍵字（使得變量的做用域限制爲塊內），模板字符串的使用（擺脫繁瑣的「+」字符串拼接），以及數組和對象解構和簡寫規則。這一篇咱們會繼續進行語法部分的特性補全，主要講述一下for of循環，剩餘參數和spread關鍵字的使用。讓咱們開始吧！

1.for...of循環

在javascript中，咱們經常須要使用循環來進行一種迭代的操做（遍歷一個數組或對象）。在咱們最初學習javascript的時候，可能最常使用的也是最基礎的方式就是for循環。

const Heroes = ['spider man', 'iron man', 'thor', 'hulk', 'captain'];
for (let i = 0; i<Heroes.length; i++){
 console.log(Heroes[i]);
}

在最經常使用的for循環中，咱們須要專門爲它作兩件事情：首先是肯定一個索引的標誌，也就是咱們的i（之因此經常使用i，是由於能夠表示iterator的意思），其次還須要肯定結束的條件，得到length。當循環出現的狀況較多或者有更多層次的循環嵌套的時候，for循環會顯得至關冗餘和難看，那麼有什麼其餘方法呢？ for...in循環能夠省去上述的兩個步驟：

const Heroes = ['spider man', 'iron man', 'thor', 'hulk', 'captain'];
for (let hero in Heroes){
    console.log(Heroes[hero]);
}

能夠看到雖然去掉了計數器邏輯，但仍然須要index（本例中的hero）來進行訪問。特別地，若是你試圖給數組或對象原型上加入新的方法，那麼這些新加入的方法也會被for...in循環遍歷到，由於for...in會遍歷全部可枚舉的屬性：

const Heroes = ['spider man', 'iron man', 'thor', 'hulk', 'captain'];
Array.prototype.firstUpper = function () {
    console.log('why you count me in?');
};

for (let hero in Heroes){
    console.log(Heroes[hero]);
} 
//spider man
//iron man
//thor
//hulk
//captain
//[Function]

依然不是理想的狀況？那麼forEach()方法呢，我記得這是一個很是方便的函數！forEach()確實很方便，但問題是它僅僅是數組的方法，並非全部可迭代對象均可以使用，並且，forEach()方法不可中斷，當你須要根據條件跳出循環時，只能採起最原始的for循環。 這時咱們的主角for...of循環就登場了！做爲es6中的一大新特性，for...of循環能夠更好地支持咱們所須要的迭代方式。 for...of循環相比於for...in循環，去掉了索引標誌，咱們再也不須要index來進行索引了，而是直接能夠得到遍歷的值。同時for...of也會過濾掉遍歷對象中的方法，而僅僅返回值！

const Heroes = ['spider man', 'iron man', 'thor', 'hulk', 'captain'];
Array.prototype.firstUpper = function () {
    console.log('why you count me in?');
};

for (let hero of Heroes){
    console.log(hero);
}
//  spider man
//  iron man
//  thor
//  hulk
//  captain

2.展開運算符(spread)

咱們先來看一個關於數組的例子：

const Marvel = ['spider man', 'iron man', 'thor', 'hulk', 'captain'];
const DC = ['super man', 'spider man', 'wonder women', 'flash man'];

咱們有漫威和DC的超級英雄，當咱們須要把它們合成一個數組的時候，以往的作法是？ 沒錯，concat方法：

const Marvel = ['spider man', 'iron man', 'thor', 'hulk', 'captain'];
const DC = ['super man', 'spider man', 'wonder women', 'flash man'];
const Heroes = Marvel.concat(DC);

然而在es6中，有更加簡單的方法，來將數組展開爲一系列元素，這對於多層次的數組的合併是很是有用的！

const Marvel = ['spider man', 'iron man', 'thor', 'hulk', 'captain'];
const DC = ['super man', 'spider man', 'wonder women', 'flash man'];
const Heroes = [...Marvel, ...DC];

經過展開運算符「...」，能夠將數組拆開爲一個個單獨的元素，這樣咱們的「[ ]」就不復存在了，這些元素將任由咱們「處置」！

3.剩餘參數

咱們在剛剛說到的展開運算符中，使用...來將數組打碎成一排元素，知足咱們的須要。反過來，咱們也能夠用...來將一排元素變成數組！這就是剩餘參數的用處。 一樣是...操做符，咱們來結合以前學到的數組解構來實現一個例子：

const Info = ['Andy', 20, 'student', '2017-04-05', '2017-07-08', '2017-09-01'];
const [username, age, type, ...record] = Info;

這裏，咱們解構了數組Info，並將全部剩餘的日期做爲剩餘參數給了數組record，能夠獲得這樣的輸出：

console.log(username); // Andy
console.log(age); // 20
console.log(record); // [ '2017-04-05', '2017-07-08', '2017-09-01' ]

這裏Info數組的全部剩餘參數都變成了數組record的元素啦。 其實剩餘參數更經常使用的用法是用於可變參數函數！若是你是對javascript有必定積累的人，那你必定知道函數裏面的arguments對象，它是咱們以前用於處理參數個數不定的狀況時的首選。但如今咱們能夠用剩餘參數符號來完成這個操做，讓代碼變得更加簡單易懂！以一個求均值函數爲例：

function Average(...nums) {
    let total = 0;
    for (const num of nums) {
        total += num;
    }
    return (total/nums.length); // 4
}

這裏就是利用...nums來表示函數參數個數是不定的，在以往咱們須要使用arguments參數對象，相對晦澀，尤爲對於初學者來講。

OK，至此咱們就介紹完了es6裏的一系列新的語法特性，若是你對es6有更多的興趣，請關注下一篇博客，着重講述函數在es6中引入的一系列新變化！