【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
}
相关推荐
今儿敲了吗13 小时前
23| 画展
c++·笔记·学习·算法
我 see your eyes14 小时前
工作软件学习
学习
Never_Satisfied16 小时前
在JavaScript / HTML中,数组查找第一个符合要求元素
开发语言·javascript·html
HelloReader17 小时前
Tauri 2 创建项目全流程create-tauri-app 一键脚手架 + Tauri CLI 手动接入
前端·javascript·vue.js
锅包一切17 小时前
在蓝桥杯边练边学Rust:2.原生类型
开发语言·学习·蓝桥杯·rust
小嘉丶学长17 小时前
【跟小嘉学习经济学】一、微观经济学概述
学习
shix .17 小时前
旅行网站控制台检测
开发语言·前端·javascript
逆境不可逃18 小时前
【从零入门23种设计模式03】创建型之建造者模式(简易版与导演版)
java·后端·学习·设计模式·职场和发展·建造者模式
专业开发者18 小时前
Wi-Fi 技术学习:基于 IEEE 802.11ax 的 MU-OFDMA 触发帧结构与抓包解析
学习
henry10101018 小时前
DeepSeek生成的网页小游戏 - 迷你高尔夫
前端·javascript·游戏·html