【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
}
相关推荐
fake_ss1985 小时前
AI时代学习全栈项目开发的新范式
java·人工智能·学习·架构·个人开发·学习方法
Upsy-Daisy6 小时前
AI Agent 项目学习笔记(二):Spring AI 与 ChatClient 主链路解析
人工智能·笔记·学习
C+++Python7 小时前
C++ 进阶学习完整指南
java·c++·学习
sulikey9 小时前
个人Linux操作系统学习笔记2 - gcc与库的理解
linux·笔记·学习·操作系统·gcc·
张元清9 小时前
useEffect 之外:专门处理异步、深比较和 SSR 的 Effect Hook
前端·javascript·面试
南浦别a9 小时前
第102天--时隔多日的书写
学习·程序人生
Jackyzhe9 小时前
从零学习Kafka:消费者组重平衡
分布式·学习·kafka
吃好睡好便好9 小时前
在Creo中如何把新建零件文件时的默认模板设置为公制单位
学习·3d·信息可视化
优橙教育9 小时前
5G网络优化关键参数解读:从入门到实战
网络·学习·5g
XinZong9 小时前
OpenClaw 中最经典的 6 款skill,真正能进工作流的 skills
javascript·后端