【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
}
相关推荐
用户90443816324603 小时前
90%前端都踩过的JS内存黑洞:从《你不知道的JavaScript》解锁底层逻辑与避坑指南
前端·javascript·面试
im_AMBER4 小时前
Leetcode 74 K 和数对的最大数目
数据结构·笔记·学习·算法·leetcode
DBA小马哥4 小时前
Oracle迁移实战:如何轻松跨越异构数据库的学习与技术壁垒
数据库·学习·oracle·信创·国产化平替
PPPPickup4 小时前
easychat项目复盘---获取联系人列表,联系人详细,删除拉黑联系人
java·前端·javascript
老前端的功夫4 小时前
前端高可靠架构:医疗级Web应用的实时通信设计与实践
前端·javascript·vue.js·ubuntu·架构·前端框架
【上下求索】4 小时前
学习笔记095——Ubuntu 安装 lrzsz 服务?
运维·笔记·学习·ubuntu
脾气有点小暴5 小时前
前端页面跳转的核心区别与实战指南
开发语言·前端·javascript
2401_834517075 小时前
AD学习笔记-27 泪滴的添加和移除
笔记·学习
San30.6 小时前
深入 JavaScript 内存机制:从栈与堆到闭包的底层原理
开发语言·javascript·udp
Fantastic_sj6 小时前
Vue3相比Vue2的改进之处
前端·javascript·vue.js