美文网首页
es6遍历器

es6遍历器

作者: tiancai啊呆 | 来源:发表于2018-05-19 14:11 被阅读12次

    介绍

    • 遍历器Iterator是一种接口,为各种不同的数据结构提供统一的访问机制,即for...of循环。
      任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。
    • ES6 规定,默认的 Iterator 接口部署在数据结构的Symbol.iterator属性。
      一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历的”,可以用for...of来进行遍历。
    • es6原生具备 Iterator 接口的数据结构有:数组,Map,Set,String,类数组对象。
      除此之外,其他数据结构的 Iterator 接口,都需要自己在Symbol.iterator属性上面部署,这样才会被for...of循环遍历。

    Symbol.iterator

    • Symbol.iterator属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。执行这个函数,就会返回一个遍历器对象。
    • Symbol.iterator方法的最简单实现,还是使用Generator 函数。

    遍历器对象

    该对象的根本特征就是具有next方法。每次调用next方法,都会返回一个代表当前成员的信息对象,具有value和done两个属性。其中,value属性是当前成员的值,done属性是一个布尔值,表示遍历是否结束。

    • next() //必须有
    let arr = ['a', 'b', 'c'];
    let iter = arr[Symbol.iterator]();
    console.log(iter.next())    //{ value: 'a', done: false }
    console.log(iter.next())    //{ value: 'b', done: false }
    console.log(iter.next())    //{ value: 'c', done: false }
    console.log(iter.next())    //{ value: undefined, done: true }
    
    let someString = "hi";
    console.log(typeof someString[Symbol.iterator])   //function
    var iterator = someString[Symbol.iterator]();
    console.log(iterator.next())  //{ value: 'h', done: false }
    console.log(iterator.next())   //{ value: 'i', done: false }
    console.log(iterator.next())    //{ value: undefined, done: true }
    
    • return() //可选
      如果for...of循环提前退出,就会调用return方法。
    • throw() //可选
      throw方法主要是配合 Generator 函数使用,一般的遍历器对象用不到这个方法。

    使用场合

    • 解构赋值会默认调用Symbol.iterator方法。
    • 扩展运算符会默认调用Symbol.iterator方法。
    • yield*后面跟的是一个可遍历的结构,它会调用该结构的遍历器接口。
    • 任何接受数组作为参数的场合,其实都调用了遍历器接口。

    for of 循环

    for...of循环内部调用的是数据结构的Symbol.iterator方法。优点如下:

    • 有着同for...in一样的简洁语法,但是没有for...in缺点。
    • 它可以与break、continue和return配合使用。
    • 提供了遍历所有数据结构的统一操作接口。
    const arr = ['red', 'green', 'blue'];
    arr.foo = 'hello';
    for (let a in arr) {
      console.log(a);   // 0 1 2 foo
    }
    for (let v of arr) {
        console.log(v);     // red green blue
    }
    //for...in循环读取键名,for...of循环读取键值。
    

    对于普通的对象,for...of结构不能直接使用,会报错,必须部署了 Iterator 接口后才能使用。

    相关文章

      网友评论

          本文标题:es6遍历器

          本文链接:https://www.haomeiwen.com/subject/fvktdftx.html