js迭代器模式

以前JS原生的集合类型数据结构,只有Array(数组)和Object(对象);

而ES6中,又新增了Map和Set。四种数据结构各自有着自己特别的内部实现,但我们仍期待以同样的一套规则去遍历它们,所以ES6在推出新数据结构的同时也推出了一套统一的接口机制------迭代器(Iterator)。

ES6约定,任何数据结构只要具备Symbol.iterator属性(这个属性就是Iterator的具体实现,它本质上是当前数据结构默认的迭代器生成函数),就可以被遍历------准确地说,是被for...of...循环和迭代器的next方法遍历。 事实上,for...of...的背后正是对next方法的反复调用。

js 复制代码
// 定义一个迭代器对象

const iterator = {

    next() {

      // 返回当前迭代的元素和是否完成迭代的标志

      return { value: 1, done: false };

    }

  };

  // 使用迭代器对象进行迭代

  let result = iterator.next();

  while (!result.done) {

    console.log(result.value);

    result = iterator.next();

  }
相关推荐
java1234_小锋17 分钟前
Vue3专题 - 条件渲染
前端·javascript·vue.js
嘟嘟071725 分钟前
从零理解 useRef:React 中操作 DOM 与持久化变量的唯一桥梁
javascript
名字还没想好☜30 分钟前
React 用 Portal + Context 实现全局 Toast:一次调用、自动消失与队列管理
前端·javascript·react.js·react·next.js
嘟嘟071738 分钟前
摘要 手把手实现路由鉴权守卫,逐行拆解 ProtectRoute、localStorage、Navigate state、useLocation、FormDat
javascript
肉肉不吃 肉1 小时前
无渲染组件和组合式函数
前端·javascript·vue.js
其美杰布-富贵-李1 小时前
01 从项目结构开始认识 Vue 3
javascript·vue.js·ecmascript
sugar__salt1 小时前
前端路由技术详解:从传统多页到 React SPA 的完整进化之路
前端·javascript·react.js·前端框架
就不掉头发1 小时前
C++函数模板
java·开发语言·c++
用户84298142418101 小时前
JS代码压缩实测:可减小体积、提高执行效率!
前端·javascript·后端
我是苏苏1 小时前
WPF开发01:基础控件及常用模板篇
开发语言·c#·html·wpf