ES6 迭代器

204 阅读1分钟

迭代器(Iterator)就是一种机制。是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口,就可以完成遍历操作

作用:

  1. 为各种数据结构提供一个统一的、简便的访问接口
  2. 使得数据结构的成员能够按某种次序排列
  3. 供for...of消费 工作原理:
  4. 创建一个指针对象,指向当前数据结构的起始位置
  5. 第一次调用对象的next方法,指针自动指向数据结构的第一个成员
  6. 接下来不断调用next方法,指针一直往后移,直到指向最后一个成员
  7. 没调用next方法返回一个包含value和done属性的对象
let arr = ['a','b','c']
let keys = arr.keys()
let values = arr.values()
let entries = arr.entries()
console.log(keys,values,entries);  //结果都为Object [Array Iterator] {}
console.log(values.next());  //{ value: 'a', done: false }
console.log(values.next());  //{ value: 'b', done: false }
console.log(values.next());  //{ value: 'c', done: false }
console.log(values.next());  //{ value: undefined, done: true }
let item;
while (!(item=values.next()).done) {
    console.log(item.value);   //a  b  c
}
// for of 循环的实现(重构)
for(let entry of entries){
    console.log(entry);
}
// [ 0, 'a' ]
// [ 1, 'b' ]
// [ 2, 'c' ]

迭代器自定义遍历对象

const clazz = {
    name:'一年级1班',
    students:['zhangsan','lisi','wangwu','hhh'],
    [Symbol.iterator](){
        let index = 0;
        let _this = this;
        return {
            next:function(){
                if(index < _this.students.length){
                    const result = {value:_this.students[index],done:false};
                    index++;
                    // 返回结果
                    return result;
                }else{
                    return {value:undefined,done:true};
                }
            }
        };
    }
}
// 遍历这个对象
for(let v of clazz){
    console.log(v);
}