Iterator接口

Iterator接口

• 只有包含Iterator接口的数据结构才能被循环遍历

• 这些数据结构的原型方法中都有Symbol.iterator()

• 通过调用Symbol.iterator()的next方法，就可以遍历到一个个元素

  //当数组还没遍历完，则返回一个对象，第一个值为属性值，第二个值为false
  {value: "plum", done: false}
  //当数组遍历完，返回的对象中，第一个值为undefined，第二个值为true
  {value: undefined, done: true}

   

通过数组的entries方法获得Iterator

• 通过调用数组的entries方法获得Iterator接口，是一个数组,其中包含了对象

  fruits.entries()===>Array Iterator{}

• Iterator的next方法，获取其中的每一个对象

  • 每个对象中，第一个值为数组。包含此属性值在原本数组中的索引，和此属性值

  • 第二个值为布尔类型，判断接口是否结束

    {value: Array(2), done: false}
    value: (2) [0, "apple"]
    done: false

    //遍历到最后一项的后一项，此时接口结束，第一个值为undefined,第二个值为true
    iterator.next()
    {value: undefined, done: true}
    value: undefined
    done: true
    __proto__: Object

通过数组的keys方法获得Iterator接口

• 返回值是对象，第一个值为索引值，第二个值为判断是否遍历结束的布尔值

const key = colors.keys()
key.next()
//{value: 0, done: false}
key.next()
//{value: 1, done: false}
key.next()
//{value: 2, done: false}
key.next()
//{value: undefined, done: true}

通过数组的value方法获得Iterator接口

• 返回值是对象，第一个值为属性值，第二个值为判断是否遍历结束的布尔值

value.next()
//{value: "plum", done: false}
value.next()
//{value: "skyblue", done: false}
value.next()
//{value: "purple", done: false}
value.next()
//{value: undefined, done: true}

向数组原型中添加方法

Array.prototype.values = function () {
    //设置遍历次数为0
    let i = 0;
    //将this传给item
    let item = this;
    return {
        //返回一个next方法
        next() {
            // done 值为遍历次数是否大于等于 数组长度 即是否遍历结束
            const done = i >= item.length;
            // value 值为 先判断是否完成遍历，若完成，返回undefined，否则返回数组中的相应值
            value = done ? 'undefined' : item[i++];
            return {
                //其中返回两个值
                value,
                done
            }
        }
    }
}