iterator遍历器

 

1、数组默认实现了迭代器,所以可以通过for of遍历

2、对象没有实现迭代器,所以不能通过for of 遍历

3、Array[Symbol.iterator] 对应是一个函数,这个函数返回一个对象,对象中有个next方法,next方法返回一个对象{value:"",done:false}

4、for...of,我们可以使用它来遍历数组,字符串,Set和Map结构,但for…of不遍历object对象

5、 for...of的原理就是:先调用可遍历对象的[Symbol.iterator]()方法,得到一个iterator遍历器对象,然后就在遍历器上不断调用next()方法,直到done的值为true的时候,就表

示遍历完成结束了。

迭代器实例与对象自定义迭代器实例:

    let obj = {
        name: "张三",
        age: 19
    }

    // for (let i of obj){
    //     console.log(i);//对象不能遍历
    // }

    let arr = [1, 2, 3, 4, 5]
    console.log(obj[Symbol.iterator])//对象不能遍历
    console.log(arr[Symbol.iterator])//返回一个函数

    console.log(arr[Symbol.iterator]())

    let iter = arr[Symbol.iterator]();//返回迭代器的实例 用next()方法
    console.log(iter.next());//1
    console.log(iter.next());//2
    console.log(iter.next());//3
    console.log(iter.next());//4
    console.log(iter.next());//5
    console.log(iter.next());//undefined
    console.log(iter.next());
    console.log(iter.next());



    //给对象加迭代器 自定义迭代器
    obj[Symbol.iterator] = function () {
        let index = 0;
        let keys = Object.keys(this);

        return {

            //this指向不是当前 解决箭头函数
            // next(){
            //     let value = this[keys[index]]
            //     let done = index===keys.length
            //     index++;
            //     return {
            //         value,
            //         done
            //     }
            // }
            // 箭头函数
            // next()函数遍历出属性名与值
            next: () => {
                let value = {
                    key: keys[index],//对象属性名
                    value: this[keys[index]]//对象属性值
                }
                let done = index === keys.length//长度
                console.log(done);
                index++;
                return {
                    value,
                    done
                }
            }
        }
    }
    for (var i in obj){
        console.log(i)
    }
    for (let item of obj) {
        console.log(item);
    }

  

 

 

 posted on 2020-09-02 20:58  wen22  阅读(228)  评论(0编辑  收藏  举报