【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
}
相关推荐
宝绿特塑业再生科技7 小时前
改性HDPE再生颗粒在户外家具挤出发泡板材中的色差控制与高品质价值重构
经验分享·科技·学习·生活·1024程序员节·户外家具
paopaokaka_luck9 小时前
宠物门店经营管理系统(销售与库存联动、进货自动记账、 退换与退款关联、员工个人业绩、ECharts 经营分析、滞销识别与客户分层、宠物档案年龄计算)
前端·javascript·spring boot·mysql·echarts·mybatis·1024程序员节
andrsted9 小时前
练题簿在线免费刷题:让整理过的资料,变成能反复练习的题库
学习·微信小程序·小程序·学习方法·刷题·1024程序员节
空中湖9 小时前
用 React 写数据大屏:为什么我不建议用图表库
前端·react.js·前端框架
Alsn8610 小时前
Windows 安装 Ollama 及本地模型部署
学习·1024程序员节
欣欣之王来了11 小时前
原始HTML插值:v-html指令的使用与安全风险
前端·学习·架构·项目·vue3教程
鶴哥只手遮天13 小时前
jQuery 4.0 源码架构与工程实践-第 10 章 尺寸、几何与显隐
前端·javascript·jquery
知识分享小能手13 小时前
C学习教程,从入门到精通,C语言学生信息管理系统 — 知识点详解(18)
c语言·学习·1024程序员节
破芽14 小时前
learn-claude-code-s05-s11-学习笔记
笔记·学习
pipixia2003314 小时前
C++ 面试高频:namespace 的 6 个知识点,从 using 到匿名命名空间
c语言·学习·算法·嵌入式·命名空间·c++面试·匿名命名空间