Iterator接口和for...of循环_前端iterator里用循环-CSDN博客

本文链接：https://blog.csdn.net/xiaxiaoxian/article/details/79633166

本文介绍JavaScript中数组的内置迭代器接口使用方法，并演示如何为对象自定义迭代器接口，实现for...of循环遍历。

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

// 数组已经帮我们内置这个Iterator接口

let arr = ['hello','world'];
  let map = arr[Symbol.iterator](); // 数组直接调用iterator接口，返回一个对象map
  console.log(map.next()); // {value: "hello", done: false} done:循环没有下一步状态：true没有，false:有状态，循环并没有结束
  console.log(map.next()); // {value: "world", done: false}
  console.log(map.next()); // {value: undefined, done: true}

for...of循环，就是不断的调用Iterator接口。

object数据结构没有实现Iterator接口。

自定义实现object的Iterator接口

let obj ={
    start: [1,5,7],
    end:[8,4,3],
    [Symbol.iterator](){
      let self = this;
      let index = 0;
      let arr = self.start.concat(self.end);
      let len = arr.length;
      return {
        next(){
          if(index<len){
            return{
              value:arr[index++],
              done:false
            }
          }else{
            return {
              value:arr[index++],
              done:true
            }
          }
        } 
      }
    }
  }

  for(let key of obj){  // for...of 背后用的就是iterator接口
    console.log(key);  // 1 5 7 8 4 3
  }

let arr = ['xixiaoxian','jamin'];
  for(let value of arr){
    console.log(value);  // xixiaoxian   jamin
  }