ES6基础教程（第十一节）——迭代器

上一节我们学习了 for...of，但是却没有用它来遍历对象，这节课我们用它遍历对象来引出迭代器的概念：

//定义一个的Object对象

let obj = {"name":"超级棒"};

//咱们来for...of一下

for(let v of obj){

console.log(v);

}

//结果：报错

//错误提示：obj[Symbol.iterator]不是一个function

既然报错了，其实这正是我们要的效果，要想能够被 for...of正常遍历的，都需要实现一个遍历器Iterator，而数组之类的数据结构的原型中就有 Symbol.iterator方法，而Object对象并没有实现这个接口，使得它无法被 for...of，但是却没有用它来遍历对象，这节课我们用它遍历对象来引出迭代器的概念：

//数组

Array.prototype[Symbol.iterator];

//结果：function values(){...}

//字符串

String.prototype[Symbol.iterator];

//结果：function Symbol.iterator{...}

//Set结构

Set.prototype[Symbol.iterator];

//结果：function values(){...}

//Map结构

Map.prototype[Symbol.iterator];

//结果：function entries(){...}

//Object对象

Object.prototype[Symbol.iterator];

//结果：undefined

Iterator遍历器的原理：

当可遍历对象被 for...of遍历的时候，Symbol.iterator就会被调用，返回一个iterator对象。其中还有一个很重要的方法：next( )；

//数组：一个可遍历对象

let arr = ['a','b','c'];

//调用数组的Symbol.iterator()方法

let iter = arrSymbol.iterator;

iter.next();

//结果：{value: "a", done: false}

iter.next();

//结果：{value: "b", done: false}

iter.next();

//结果：{value: "c", done: false}

iter.next();

//结果：{value: undefined, done: true}

先调用可遍历对象的 Symbol.iterator方法，得到一个iterator遍历器对象，然后就在遍历器上不断调用 next( )方法，直到done的值为true的时候，就表示遍历完成结束了。

如何让对象也能够支持 for...of呢？让我们给它造一个就搞定了：

//定义一个的Object对象

let obj = {

0:"我是0",

1:"我是1",

2:"我是2",

length:3,

//添加[Symbol.iterator]方法

[Symbol.iterator] : function() {

    let _this = this;

    let index = 0;

    return {

        next:() => {

            let value = _this[index];

            let done = (index >= _this.length);

            index++;

            return {value,done}

        }

    }

}

};

//咱们来for...of一下

for(let v of obj){

console.log(v);

}

//结果："我是0"

// "我是1"

// "我是2"

小结：Iterator遍历器为各种数据结构提供一个统一的遍历接口，使得 for...of能够轻松简便地访问数据成员。 数据结构实现了Iterator接口，我们称之为可遍历对象。我们也可以自己创建可遍历对象并自定义遍历行为。

公众号