【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
}
相关推荐
Linux_cy6 小时前
服务器管理工具哪个好用?我用了七八个
运维·服务器·javascript·python·ssh·面板·gmssh
变与不变8066 小时前
jQuery细节以及使用应用场景
前端·javascript·jquery
Young Doro7 小时前
独立性检测学习任务
人工智能·学习·数据挖掘
卡卡~~9 小时前
“101计划”核心课程实践教材《数据实验结构指导-C++语言版》题目集
开发语言·c++·学习·算法
lengxuenong10 小时前
树状数组 · 信息学学习手册1-求和3个模板
c++·学习·算法·青少年编程
lanxiaoqing0211 小时前
演讲训练的第一步:先敢说,再会说
人工智能·学习·学习方法·口才
m4Rk_13 小时前
【论文阅读】Agent记忆机制(109):MemComposer——用强化学习学会选哪些记忆、选多少以及怎样排序
论文阅读·人工智能·学习·开源·github
zhangdaliangmvp13 小时前
快速排序的学习理解:从基础分治到三路划分优化
c++·学习·算法
叼烟扛炮13 小时前
Linux 学习笔记(四):文件检索与管道重定向
linux·笔记·学习
এ慕ོ冬℘゜13 小时前
ES Promise.all/ Promise.race
前端·javascript·elasticsearch