ES6 学习笔记-迭代器和 for-of 循环

Author Avatar
Splendour 11月 17, 2015

ES5 的 for-in 循环遍历数组的缺点

for (var index in myArray) { // 千万别这样做
  console.log(myArray[index]);
}
  • 给 index 赋值的不是数字而是字符串 “0” “1” 等，有可能在无意间进行了 “2” + 1 = “21” 这样的计算
  • for-in 循环体会遍历自定义属性
  • 在某些情况下，数组顺序会被打乱！
  • for-in 是为普通对象设计的，不适用于数组的遍历

ES6 的 for-of 循环

for (var value of myArray) {
  console.log(value);
}
  • 这是最简洁的遍历数组的方法
  • 避开了 for-in 循环的所有缺陷
  • 可以正确响应 break、continue 和 return 语句
  • 可以遍历其他的集合
    • 类数组对象，例如 DOM NodeList 对象
    • 字符串遍历，将字符串视为一系列的 Unicode 字符来遍历
    • 支持 Map 和 Set 对象遍历
      // Map 对象的遍历
for (var word of uniqueWords) {
console.log(word);
}
// Set 对象的遍历
for (var [key, value] of phoneBookMap) {
console.log(key + "'s phone number is: " + value);
}
    • 不支持普通对象，但也可以用以下方法来遍历普通对象
      for (var key of Object.keys(someObject)) {
console.log(key + ": " + someObject[key]);
}

      迭代器对象

  • for-of 循环首先调用集合的[Symbol.iterator]()方法，紧接着返回一个新的迭代器对象。
  • 迭代器对象可以是任意具有.next()方法的对象；for-of 循环将重复调用这个方法，每次循环调用一次。
  • 一个最简单的迭代器如下：
    var zeroesForeverIterator = {
[Symbol.iterator]: function () {
  return this;
},
next: function () {
  return {done: false, value: 0};
}
};
  • 每一次调用.next()方法，它都返回相同的结果，返回给 for-of 循环的结果就告诉它循环是否结束，若未结束则下一个值是多少
  • 迭代器对象也可以实现可选的.return()和.throw(exc)方法
    • 如果 for-of 循环过早退出会调用.return()方法，异常、break 语句或 return 语句均可触发过早退出。
    • 如果迭代器需要执行一些清洁或释放资源的操作，可以在.return()方法中实现。
Powered by Hexo