【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
}
相关推荐
晴天小庭12 分钟前
Sael——基于Jev的AI中转站的安全风控网关,现已开源
人工智能·后端·react.js
代码山河29 分钟前
Java学习路线图:2026年最新版,从入门到架构师
java·学习·架构·教程·面向对象·项目
sunoo-22935 分钟前
【嵌入式Linux驱动学习】Day1-Day2 全流程梳理:环境搭建→U-Boot→内核→根文件系统→驱动基础
linux·运维·驱动开发·笔记·学习·阿里云·恩智浦
我命由我1234542 分钟前
Photoshop - Photoshop 使用简单的选择工具
学习·职场和发展·产品运营·求职招聘·职场发展·学习方法·photoshop
UIU1141 小时前
头文件可以防什么错?运用头文件做声明
c++·学习·c#
OpsEye1 小时前
兼顾数据安全与成本,私有化 AI 网关正在成为企业标配
javascript·ai编程
我命由我123451 小时前
Photoshop - Photoshop 使用工具
学习·职场和发展·产品运营·求职招聘·职场发展·产品经理·学习方法
铁皮饭盒1 小时前
还是网页端, 46mb模型, 抠图功能升级了, 抠任意主体, 还是不要显卡, 不要python, 满意吗?
前端·javascript·后端
外收内放1 小时前
Python基础语法练习题(53-54)
python·学习
欣欣之王来了1 小时前
Python入门:Jupyter Notebook安装与使用指南
学习·架构·面向对象·项目·python教程