js实现一个简单的迭代器

简单模式

function myIterator(arr) {
    let nextIndex = 0;
    return {
      next() {
        return {
          value: arr[nextIndex++],
          done: arr.length < nextIndex
        };
      }
    };
}
const iterator = myIterator([1,234,12,4312,423]);
undefined
iterator.next() // {value: 1, done: false}
iterator.next() // {value: 234, done: false}
iterator.next() // {value: 12, done: false}
iterator.next() // {value: 4312, done: false}
iterator.next() // {value: 423, done: false}
// 完成
iterator.next() // {value: undefined, done: true}

数组、字符串、Set、 Map 对象的默认 iterator 

对象模式

// 假设 obj 就是其中的对象 他有一个 Symbol的属性(方法) Symbol.me_iterator = Symbol('me_iterator')
function myIterator() {
    const arr = Object.values(this); // 提取当前 对象的value 数组
    let nextIndex = 0; // 设置一个 指针 变量
    return {
      next() {
        return {
          value: arr[nextIndex++], // 每一次会迭代一个数 (js 当 数组 越界会返回 undefined)
          done: arr.length < nextIndex // 当nextIndex 大于 values 的长度就会返回true
        };
      }
    };
}
const obj = {
  [Symbol.me_iterator]:myIterator,
  a:'123',
  b:342,
  c:0
}
const it = obj[Symbol.me_iterator]();
it.next()
结果:
  {value:'123',done:false} // 
  ....
  {value:undefined,done:true}

ps: 解构 默认会调用 iterator 接口(也就是带有 Symbol.iterator 属性的接口) for...of 同样也是这个接口 只要带有这个接口就可以通过of 遍历

Generator 函数模式

 function* myIterator() {
  const arr = Object.values(this); // 提取当前 对象的value 数组
  for (item in arr) {
    yield arr[item];
  }
}
const obj = {
  [Symbol.iterator]: myIterator,
  a: '123',
  b: 342,
  c: 0
}
for (item of obj) { console.log(item) } 

for...of 自动调用 迭代器

发表评论

请先登陆