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

转载于:https://my.oschina.net/u/3724328/blog/1588090