iterator

最新推荐文章于 2025-09-07 20:32:33 发布

转载最新推荐文章于 2025-09-07 20:32:33 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/renzhiwei2017/p/7396683.html

文章标签：

#数据结构与算法

本文介绍ES6中迭代器（Iterator）的概念及其在Array、Map和Set等集合类型中的应用。此外还介绍了生成器（Generator）的概念，以及如何使用生成器创建迭代器。最后探讨了ES6中的for...of循环与Iterator接口的关系。

iterator-generator

遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iteratore类型。
所有的iterator对象都有next()方法，会返回一个结果对象。该结果对象拥有两个属性，value和done.
下面的例子模拟生成iterator

var it = makeIterator(['a', 'b']);

it.next() // { value: "a", done: false }
it.next() // { value: "b", done: false }
it.next() // { value: undefined, done: true }

function makeIterator(array) {
  var nextIndex = 0;
  return {
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
    }
  };
}

上例可以看出，要生成一个iterator很复杂。幸好ES6专门提供了generator用来生成iterator.

generator

generator 是一个返回迭代器的函数，与普通函数不同的是声明generators函数要在function后面添加"*",同时函数内部使用es6新增加的关键字yield来控制next()方法的返回值。

// generator 函数
function *createIterator(){
    yield 1;
    yield 2;
    yield 3;
}

// 创建迭代器
let iterator = createIterator();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3
console.log(iterator.next().value); // undefined

从上述代码可以看出每次的yield使用都可以阻止代码的执行，当迭代器调用next()方法后才会继续执行。
也可以使用函数表达式的形式创建generator函数。

let createIterator = function *(items){
    for(let i=0;i<items.length;i++){
        yield items[i];
    }
}
let iterator = createIterator([1,2,3]);
console.log(iterator.next()); // "{value:1,done:false}"
console.log(iterator.next()); // "{value:2,done:false}"
console.log(iterator.next()); // "{value:3,done:false}"
console.log(iterator.next()); // "{value:undefined,done:true}"
console.log(iterator.next()); // "{value:undefined,done:true}"

注意：关键字yield只能在generator函数内部使用，即使在生成器内部的函数中也不行。如下代码：

function *createIterator(items){
    items.forEach(function(item){
        yield item + 1;
    })
}

let iterator = createIterator([1,2,3]);
console.log(iterator.next()); // "Uncaught SyntaxError: Unexpected identifier"

在对象中创建生成器。

var o  = {
    createIterator: function *(items) {
        for(let i =0; i<items.length; i++) {
            yield items[i];
        }
    }
};
let iterator = o.createIterator([1,2,3]);

ES6写法：

var o  = {
    *createIterator(items) {
        for(let i =0; i<items.length; i++) {
            yield items[i];
        }
    }
};
let iterator = o.createIterator([1,2,3]);

iterator与for...of

Iterator 接口的目的，就是为所有数据结构，提供了一种统一的访问机制，即for...of循环。当使用for...of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。
一种数据只要部署了Iterator接口，就认为这种数据是可遍历的（iterable）。默认的Iterator接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。
Symbol.iterator属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。属性名Symbol.iterator，它是一个表达式，返回Symbol对象的iterator属性，这是一个预定义好的、类型为 Symbol 的特殊值，所以要放在方括号内。

const obj={
    [Symbol.iterator]: function() {
        return {
            next: function() {
                return {
                    value: 1,
                    done: true
                }
            }
        }
    }
}
obj[Symbol.iterator]().next();  //  {value: 1, done: true}

上面代码，obj具有Symbol.iterator属性，是可遍历的。执行这个属性，会返回一个遍历器对象。该对象的根本特征就是具有next方法。每次调用next方法，都会返回一个代表当前成员的信息对象，具有value和done两个属性。
Array，Map，Set，String，TypedArray，函数的arguments对象,NodeList对象都具有Iterator接口。可以被for...of遍历。
注意：对象（Object）没有默认部署 Iterator 接口。

let values = [1, 2, 3];
for (let num of values) {
    console.log(num);   // 1 2 3
}

for...of首先调用values数组的Symbol.iterator的方法，获取一个迭代器。然后iterator.next()被调用，迭代器的value属性被读出并放入了num变量。num 变量的值开始为 1 ，接下来是2，最后变成 3 。当结果对象的done变成true，循环就退出了。

上例的代码也可采用下面的方法：

let values = [1, 2, 3];
let iter = values[Symbol.iterator]();
iter.next();    //  {value: 1, done: false}
iter.next();    //  {value: 2, done: false}
iter.next();    //  {value: 3, done: false}
iter.next();    //  {value: undefined, done: true}

ES5中有for...in遍历对象，那么for...in和for...of有什么区别呢？
for ... in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。当我们手动给Array对象添加了额外的属性后，for ... in循环将带来意想不到的意外效果：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    console.log(x); // '0', '1', '2', 'name'
}

采用for...of的写法

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    console.log(x); // 'A', 'B', 'C'
}

结论：for...in遍历的实际是key,而for...of遍历的是value。

集合的迭代器

entries() ：返回一个包含键值对的迭代器；
values() ：返回一个包含集合中的值的迭代器；
keys() ：返回一个包含集合中的键的迭代器。

entries()

let colors = [ "red", "green", "blue" ];
let tracking = new Set([1234, 5678, 9012]);
let data = new Map();

data.set("title", "Understanding ES6");
data.set("format", "ebook");

for (let entry of colors.entries()) {
    console.log(entry);
}

for (let entry of tracking.entries()) {
    console.log(entry);
}

for (let entry of data.entries()) {
    console.log(entry);
}

以上代码输出结果：

[0, "red"]
[1, "green"]
[2, "blue"]
[1234, 1234]
[5678, 5678]
[9012, 9012]
["title", "Understanding ES6"]
["format", "ebook"]

values()

注意：数组不支持values()

let colors = [ "red", "green", "blue" ];
let tracking = new Set([1234, 5678, 9012]);
let data = new Map();

data.set("title", "Understanding ES6");
data.set("format", "ebook");

for (let value of colors.values()) {
    console.log(value);
}

for (let value of tracking.values()) {
    console.log(value);
}

for (let value of data.values()) {
    console.log(value);
}

以上代码输出结果：

TypeError: colors.values(...)[Symbol.iterator] is not a function
1234
5678
9012
"Understanding ES6"
"ebook"

keys()

let colors = [ "red", "green", "blue" ];
let tracking = new Set([1234, 5678, 9012]);
let data = new Map();

data.set("title", "Understanding ES6");
data.set("format", "ebook");

for (let key of colors.keys()) {
    console.log(key);
}

for (let key of tracking.keys()) {
    console.log(key);
}

for (let key of data.keys()) {
    console.log(key);
}

以上代码输出结果：