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