美文网首页
ES6复习-iterator

ES6复习-iterator

作者: 黄同学2019 | 来源:发表于2020-04-25 20:36 被阅读0次

Iterator 概念:iterator是一种接口机制,为各种不同的数据结构提供统一的访问机制

作用

  • 为各种数据结构,提供一个统一的、简便的访问接口;
  • 使得数据结构的成员能够按某种次序排列
  • ES6 创造了一种新的遍历命令for...of循环,Iterator接口主要供 for...of消费。

工作原理

  • 创建一个指针对象(遍历器对象),指向数据结构的起始位置
  • 第一次调用 next 方法,指针自动指向数据结构的第一个成员
  • 接下来不断调用 next 方法,指针会一直往后移动,直到指向最后一个成员
  • 每调用next方法返回的是一个包含value和done的对象
{
  value: 当前成员的值,
  done: 布尔值
}
  • value表示当前成员的值,done对应的布尔值表示当前的数据的结构是否遍历结束。
  • 当遍历结束的时候返回的value值是undefined,done值为false

自己实现一个 iterator

看代码:


 /**
  * 自己实现一个 迭代器
  *
  * @param {*} source
  * @returns
  */
 function myIterator(source) {
   let nextIndex = 0
   return {
     next: function() {
       return nextIndex < source.length ? {
          value: source[nextIndex++],
          done: false,
        } 
        : {
          value: undefined,
          done: true,
        }
     }
   }
 }

 // test iterator

 const arr = [1,2,3, {name: 'Tom', age: 18}, 'hello, tom']
 const testIteratorObj = myIterator(arr)
 console.log(testIteratorObj.next())
 console.log(testIteratorObj.next())
 console.log(testIteratorObj.next())
 console.log(testIteratorObj.next())
 console.log(testIteratorObj.next())
 console.log(testIteratorObj.next())

// 结果:
// { value: 1, done: false }
// { value: 2, done: false }
// { value: 3, done: false }
// { value: { name: 'Tom', age: 18 }, done: false }
// { value: 'hello, tom', done: false }
// { value: undefined, done: true }

拓展

以下类型数据具备 iterator 接口——可以用 for...of 遍历

  • Array
  • arguments
  • Set 容器
  • Map 容器
  • String

注意: 没有 Object,对象没有 iterator 接口

这里,说明下 arguments 的用法,看代码:

// 不用定义参数,使用 arguments 获取到
function fun() {
  for (let i in arguments) {
    console.log(arguments[i])
  }
}

fun(1, 'b', 3, {name: 'Tom'}, false)
// 结果
// 1
// b
// 3
// { name: 'Tom' }
// false

更多学习资料,参考:

相关文章

  • ES6复习-iterator

    Iterator 概念:iterator是一种接口机制,为各种不同的数据结构提供统一的访问机制 作用 为各种数据结...

  • es6解读6- Iterator 和 for...of 循环

    es6 Iterator 和 for...of 循环 什么是Iterator接口 ES6中内置了一些Symbol,...

  • Generator(二)

    内建Iterator Iterator是ES6的重要组成部分,因此,对许多内建类型你不需要自己创建迭代器,ES6已...

  • 『ES6脚丫系列』遍历器iterator

    『ES6脚丫系列』遍历器iterator本文内容如下: 具有iterator接口的数据结构 【01】原生就具有It...

  • es 常用基础小节--(二)

    上次突然来活儿,现在接着继续: 3.iterator iterator迭代器是另外4个ES6常用特性的实现基础(解...

  • es6解读6- Iterator 和 for...of 循环

    什么是Iterator接口 ES6中内置了一些Symbol,其中最重要的一个恐怕就是Symbol.iterator...

  • JS Iterator(遍历器)

    ES6 规定,默认的 Iterator 接口部署在数据结构的 Symbol.iterator 属性,或者说,一个数...

  • Design 类

    1.Zigzag Iterator(281. leetcode) -1.这里会复习到 java 的iterator...

  • JS新特性

    ES ES5 ES6 箭头函数 Promise Symbol属性 Iterator Generator async...

  • [JavaScript] generator

    ES6中的generator返回一个iterator/iterable,由“function*”定义,genera...

网友评论

      本文标题:ES6复习-iterator

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