【react】react18的学习（十二）– 底层原理（二）之迭代器 iterator

ANKG

于 2023-07-23 19:37:12 发布

阅读量759

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js 学习 javascript

本文链接：https://blog.youkuaiyun.com/zhangank/article/details/131883210

react 专栏收录该内容

18 篇文章

订阅专栏

迭代器是ES6规范的一部分，允许数据结构如数组、类数组和字符串等使用for-of循环。这个机制依赖于对象的Symbol.iterator属性，该属性定义了迭代过程。当执行for-of循环时，它会调用这个方法并返回一个包含next方法的对象。每次循环，next方法被调用以获取下一项的值，直到所有项遍历完毕。在示例中，普通对象通过添加Symbol.iterator方法实现了自定义迭代。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

迭代器iterator

是一种 ES6 规范，具有这种机制的数据结构才可以使用for of循环：返回每一项的值；
原型链具有Symbol.iterator属性的数据结构都具备；如数组、部分类数组、字符串等；
普通对象就不能用；

for-of循环原理：循环获取属性值；

执行可迭代原型链上的Symbol.iterator方法，该方法返回一个包含next方法的对象;
通过循环执行next方法，得到方法返回的对象，根据对象中值抛出返回值；

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
}