JavaScript学习之ES6 ES2015学记笔记（一）-迭代器(for in,for of 异同)

本文记录Javascript学习过程中的ES6新特性的使用

ES6是什么？ECMAScript的第六个版本（1、2、3、5、6）

增加了一些例如箭头函数 a=>a+1;字符串插值、代理Proxy、Promise等新特性

 

1、ES6之Iterators(迭代器)

原始版本：

for(var i = 0;i<array.length;i++){
        console.log(array[i]);
}

ES5版本：

array.forEach(function(value)){
    console.log(value);
}

缺陷：

• 不能用Break中断循环，
• 也不能用return返回外层函数

for in 版本：

for(var index in array){
    console.log(array[index]);
}

缺陷：

• index不是实际的数字而是字符串“0”，“1”，“2”，此时如果用字符串算数计算：“2”+1 = “21”转换为字符串
• for-in循环体除了会遍历数组元素外，还会遍历自定义属性。如var array= [];array[0] = 0 ; array[1] = 2;array.exapmle
• 在遍历过程中循环将额外执行一次，遍历“array.example”的索引。数组原型链上的属性都能被访问到。
• 在某些情况下，这段代码可能按照随机顺序遍历数组元素
• for-in 是为普通对象设计的，币可以遍历得到字符串类型的key,因此不适用于数组遍历

推荐的for-of：

for(var value of array){
    console.log(value);
}

优点：

• 这是最简洁、最直接的遍历数组元素的语法
• 这个方法避开了 for-in 循环的所有缺陷
• 与 forEach()不同的是，它可以正确响应 break、 continue 和 return 语句
• for-in 循环用来遍历对象属性。
• for-of 循环用来遍历数据—例如数组中的值。

for-of循环也可以遍历其他的集合

• 支持数组、还支持大多数类数组对象如DOM的NodeList对象；
• 支持字符串遍历，他将字符串视为一系列的Unicode字符来进行遍历

for(var char of ""){ console.log(char);}

• 同样支持Map和Set对象遍历
• Map和Set是ES6中的新类型 例如：Set对象可以自动去重复 

• // 基于单词数组创建一个 set 对象
  var uniqueWords = new Set(words);
  
  //遍历
  for(var word of uniqueWords){ console.log(word);}

Map对象则是键值对（key-Value）形式组成的，因此需要解构（destructuring）

for (var [key, value] of phoneBookMap) {
console.log(key + "'s phone number is: " + value);}

深入理解

for-of 循环语句通过方法调用来遍历各种
集合。数组、 Maps 对象、 Sets 对象以及其它在我们讨论的对象有一个共同点，它们都有一个迭代器方法

当你为对象添加 myObject.toString()方法后，就可以将对象转化为字符串，同样地，
当你向任意对象添加 myObject[Symbol.iterator]()方法，就可以遍历这个对象了。
 

//JQuery中的each() 扩展 for-of循环
// 因为 jQuery 对象与数组相似
// 可以为其添加与数组一致的迭代器方法
jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

在 ES6 标准中使用 symbol 来作为方法名，而不是使用字符串（Symbol为ES6新特性）

上述代码通过引用symbol实现了ES6中的for-of。所以拥有[Symbol.iterator]()的对象都可以迭代。

迭代器对象

        for-of 循环首先调用集合的[Symbol.iterator]()方法，紧接着返回一个新的迭代器对
象。迭代器对象可以是任意具有.next()方法的对象； for-of 循环将重复调用这个方法，
每次循环调用一次。
 

    var zeroesForeverIterator = {
        [Symbol.iterator]: function () {
        return this;
                },
        next: function () {
        return {done: false, value: 0};
        } };

        每一次调用.next()方法，它都返回相同的结果，返回给 for-of 循环的结果有两种可
能： (a) 我们尚未完成迭代； (b) 下一个值为 0。这意味着(value of zeroesForeverIterator)
{}将会是一个无限循环。
        迭代器对象也可以实现可选的.return()和.throw(exc)方法。如果 for-of 循环过早退出
会调用.return()方法，异常、 break 语句或 return 语句均可触发过早退出。如果迭代器需
要执行一些清洁或释放资源的操作，可以在.return()方法中实现。大多数迭代器方法无
须实现这一方法。 .throw(exc)方法的使用场景就更特殊了： for-of 循环永远不会调用它。
 

写一个简单的for-of循环然后按照下面的方法调用重写被迭代的对象

//for-of 循环
for(VAR of ITERABLE) {   //sentence}

//instance
var $iterator = ITERABLE[Symbol.iterator]();
var $result = $iterator.next();
while(!$result.done){
    VAR = $result.value;
    //sentence
    $result = $iterator.next();
}

 

 

参考资料《深入浅出ES6》《ES6-in-depth》