【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
}
相关推荐
一楼的猫21 分钟前
AI写作检测机制技术深度解析:200+维度检测、叙事指纹与网文AI辅助怎么过审
人工智能·学习·安全·chatgpt·ai写作
报错小能手1 小时前
OpenTenBase学习——分布式数据库 / 集群主流架构分类
学习
我是大卫2 小时前
React源码解析-第三部分:协调与提交
前端·react.js·源码
神奇的代码在哪里2 小时前
AI编程时代,PPT已成为过去,单个HTML文件创造无限可能
javascript·html·powerpoint·ai编程·ppt
Highcharts2 小时前
从 ECharts 平滑迁移 Highcharts的配置映射与踩坑手册
前端·javascript
用户852495071842 小时前
从零打造 Agent 智能体:LLM + Tool + Memory,让大模型真正帮你干活
javascript·后端
灵性(๑>ڡ<)☆2 小时前
Java学习笔记 --面向对象进阶
java·笔记·学习
大爱编程♡2 小时前
Vue3基础
前端·javascript·vue.js
weedsfly2 小时前
防抖与节流:从原理到 React Hook 封装
前端·javascript·面试
甜味弥漫2 小时前
React 从类组件到 Hooks:为什么 Hooks 改变了 React?
前端·javascript·react.js