【react】react18的学习(十二)– 底层原理(二)之 迭代器 iterator

迭代器iterator

是一种 ES6 规范,具有这种机制的数据结构才可以使用for of循环:返回每一项的值;

原型链具有Symbol.iterator属性的数据结构都具备;如数组、部分类数组、字符串等;

普通对象就不能用;

for-of循环原理:循环获取属性值;

  • 执行可迭代原型链上的Symbol.iterator方法,该方法返回一个包含next方法的对象;
  • 通过循环执行next方法,得到方法返回的对象,根据对象中值抛出返回值;
js 复制代码
let obj = {
  name: 'aa',
  age: 10,
}

Object.prototype[Symbol.iterator] = function iterator() {
  let self = this,
    index = -1,
    keys = Reflect.ownKeys(self)
  console.log(keys) //  ['name', 'age']
  return {
    next() {
      index++
      if (index > keys.length - 1) {
        return {
          done: true,
          value: undefined,
        }
      }
      return {
        done: false,
        value: self[keys[index]],
      }
    },
  }
}
for (const iterator of obj) {
  console.log(iterator) // aa 10
}
相关推荐
Gary Studio几秒前
rtos入门问题
学习
我命由我123457 分钟前
Photoshop - Photoshop 工具栏(64)计数工具
学习·职场和发展·求职招聘·职场发展·课程设计·学习方法·photoshop
科技林总10 分钟前
【系统分析师】9.2 数据安全与保密
学习
2501_9453184920 分钟前
产品经理系统学习AI的必要性与核心内容
人工智能·学习·产品经理
phltxy20 分钟前
Vue Router:从入门到实战
前端·javascript·vue.js
Zhencode44 分钟前
Vue3核心运行时之runtime-core
前端·javascript·vue.js
2501_901147831 小时前
DDP(分布式训练)核心知识点学习笔记
笔记·分布式·学习·面试
Asher阿舍技术站1 小时前
【AI基础学习系列】五、AIGC从创意到创造
人工智能·学习·aigc·进阶
随逸1771 小时前
《吃透防抖与节流:从原理到实战,彻底解决高频事件性能问题》
javascript
千寻girling1 小时前
面试官 : “ 请说一下 JS 的常见的数组 和 字符串方法有哪些 ? ”
前端·javascript·面试