ES6特性總結(2)——語法二

前言

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

1.for...of循環

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

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循環能夠省去上述的兩個步驟:es6

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也會過濾掉遍歷對象中的方法,而僅僅返回值!ide

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中,有更加簡單的方法,來將數組展開爲一系列元素,這對於多層次的數組的合併是很是有用的!prototype

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

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

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中引入的一系列新變化!

相關文章
相關標籤/搜索