迭代器(Iterator)

  • Iterator 接口就是对象里面的一个属性 Symbol.iterator
  • 工作原理
  1.  // 声明一个数组
  2.   const xiyou = ['唐僧','孙悟空','猪八戒','沙僧']
  4.   // 使用 for...of 遍历数组
  5.   // for --> in 的话是保存键名 of 保存键值
  6.   // for(let v of xiyou) {
  7.   //   console.log(v)
  8.   // }
  9.   console.log(xiyou)
  11.   // 获取这个 iterator 这个对象 通过 Symbol(Symbol.iterator): ƒ values()
  12.   let iterator = xiyou[Symbol.iterator]()
  14.   console.log(iterator, typeof iterator)// Array Iterator {} "object"
  16.   // 调用对象的 next 方法
  17.   console.log(iterator.next()) // {value: "唐僧", done: false}
  18.   console.log(iterator.next()) // {value: "孙悟空", done: false}
  19.   console.log(iterator.next()) // {value: "猪八戒", done: false}
  20.   console.log(iterator.next()) // {value: "沙僧", done: false}
  21.   console.log(iterator.next()) // {value: undefined, done: true}

迭代器自定义遍历对象
  1. // 声明一个对象
  2.   const banji = {
  3.     name: '终极一班',
  4.     stus: [
  5.         'xiaoming',
  6.         'xiaoning',
  7.         'xiaotian',
  8.         'knight'
  9.     ],
  10.     [Symbol.iterator]() {
  11.       // 索引变量
  12.       let index = 0;
  13.       console.log('原先的this指向：',this) // {name: "终极一班", stus: Array(4), Symbol(Symbol.iterator): ƒ}
  14.       let _this = this
  15.       return {
  16.         next: function() {
  17.           if(index < _this.stus.length){
  18.             console.log('之后的this指向：',this) // {next: ƒ}
  19.             const result =  {value: _this.stus[index],done: false}
  20.             // 下标自增
  21.             index ++
  22.             // 返回结果
  23.             return result
  24.           }else {
  25.             return {value: undefined,done: true}
  26.           }
  27.         }
  28.       }
  29.     }
  30.   }
  33.   // 遍历这个对象
  34.   for(let v of banji) {
  35.     console.log(v)
  36.   }