ES6 Iterator接口与for...of循环详解

ES6 Iterator接口与for...of循环详解

本文通过具体实例分析ES6中Iterator（遍历器）与for...of循环的使用方法，供读者参考学习。

Iterator接口与for...of循环遍历机制

Iterator的基本概念

1. Iterator的基本概念

遍历器（Iterator）是一种接口规范，旨在为不同的数据结构提供统一的访问方式。JavaScript中部分数据结构原生具备Iterator接口。为了深入理解这一概念，我们可以手动实现一个Iterator。

var it = simIteractor(['hi','ES5']);
console.log(it.next()); //Object {value: "hi", done: false}
console.log(it.next()); //Object {value: "ES5", done: false}
console.log(it.next()); //Object {value: undefined, done: true}
function simIteractor(array){
    var nextIndex = 0;
    return{
      next: function(){
        return nextIndex < array.length ? {value: array[nextIndex++], done: false} : {value: undefined, done:true};
      }
    };
}

ES6中具备Iterator接口的数据结构

2. ES6中规定，默认的Iterator接口部署在数据结构的Symbol.iterator属性上。换言之，只要一个数据结构拥有Symbol.iterator属性，它就被视为可遍历对象。在ES6标准中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象（如arguments）、以及Set和Map。

3. 在讨论可遍历性时，需要区分不同的遍历方法。

for...in与for...of的区别

for...in循环：该循环专为普通对象设计，用于遍历字符串类型的键名，因此不适用于数组的遍历。

for...of循环：用于遍历数据集合，例如获取数组中的值。for...of循环还可以遍历其他类型的集合对象。

for...of循环不仅支持数组，还支持大多数类数组对象，例如DOMNodeList。

for...of循环同样支持字符串遍历，它将字符串视为一系列Unicode字符进行遍历：

or (var chr of "abc"){
  alert(chr); //依次弹出a,b,c
}

它同样支持Map和Set对象遍历。如果你不知道Map 请看 https://www.jb51.net/article/110048.htm，如果你不知道Set 请看 https://www.jb51.net/article/110052.htm 。

希望本文所述内容对大家理解ECMAScript程序设计有所帮助。