ECMAScript 6 Iterator与for...of循环.pdf

ECMAScript 6 Iterator和for...of循环 1. Iterator （遍历器）的概念 2. 数据结构的默认Iterator接⼜ 3. 调⽤Iterator接⼜的场合 4 . 字符串的Iterator接⼜ 5. Iterator接⼜与Generator 函数 6. 遍历器对象的return() ，throw() 7 . for ...of循环 Iterator （遍历器）的概念 JavaScript原 的表⽰“集合”的数据结构，主要是数组 （rray ）和对象 （Object ）， ES6又添加了Map和Set 。这样就 了四种数据集合，⽤户还可以组合使⽤它们，定义 ⾃⼰的数据结构，⽐如数组的成员是Map ，Map 的成员是对象。这样就需要⼀种统⼀ 的接⼜机制，来处理所 不同的数据结构。 遍历器 （Iterator ）就是这样⼀种机制。它是⼀种接⼜，为各种不同的数据结构提供统 ⼀的访问机制。任何数据结构只要部署Iterator接⼜，就可以完成遍历操作 （即依次处 理该数据结构的所 成员）。 Iterator 的作⽤ 三个：⼀是为各种数据结构，提供⼀个统⼀的、简便的访问接⼜；⼆ 是使得数据结构的成员能够按某种次序排列；三是ES6创造了⼀种新的遍历命令 for...of循环，Iterator接⼜主要供for...of消费。 Iterator 的遍历过程是这样的。 （1）创建⼀个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本 质上，就是⼀个指针对象。 （2 ）第⼀次调⽤指针对象的next⽅法，可以将指针指向数据结构的第⼀个成员。 （3 ）第⼆次调⽤指针对象的next⽅法，指针就指向数据结构的第⼆个成员。 （4 ）不断调⽤指针对象的next⽅法，直到它指向数据结构的结束位置。 每⼀次调⽤next⽅法，都会返回数据结构的当前成员的信息。具体来说，就是返回 ⼀个包含value和done两个属性的对象。其中，value属性是当前成员的值，done 属性是⼀个布尔值，表⽰遍历是否结束。 下⾯是⼀个模拟next⽅法返回值的例⼦。 var it = makeIterator([a, b]); it.next() // { value: a, done: fal e } it.next() // { value: b, done: fal e } it.next() // { value: undefined, done: true } function makeIterator(array) { var nextIndex = 0; return { next: function() { return nextIndex array .length ? {value: array[nextIndex++], done: fal e} : {value: undefined, done: true}; } }; } 上⾯代码定义了⼀个makeIterator函数，它是⼀个遍历器⽣成函数，作⽤就是返回 ⼀个遍历器对象。对数组[a, b]执⾏这个函数，就会返回该数组的遍历器对象 （即指针对象）it。 指针对象的next⽅法，⽤来移动指针。开始时，指针指向数组的开始位置。然后， 每次调⽤next⽅法，指针就会指向数组的下⼀个成员。第⼀次调⽤，指向a；第⼆次 调⽤，指向b。 next⽅法返回⼀个对象，表⽰当前数据成员的信息。这个对象具 value和done两 个属性，value属性返回当前位置的成员，done属性是⼀个布尔值，表⽰遍历是否 结束，即是否还 必要再⼀次调⽤next⽅法。 总之，调⽤指针对象的next⽅法，就可以遍历事先给定的数据结构。 对于遍历器对象来说，done: fal e和value: undefined属性都是可以省略的， 因此上⾯的makeIterator函数可以简写成下⾯的形式。 function makeIterator(array) { var nextIndex = 0; return { next: function() { return nextIndex array .length ? {value: array[nextIndex++]} : {done: true}; } }; }