JavaScript基本功之迭代器(iterator)的使用和原理

[[toc]]

iterator是什么

痛点

• JavaScript提供了四种数据集合，分别是array、object、map和set。
• 这四种数据集合的数据结构各不相同，但都可以被循环遍历，背后都离不开iterator(迭代器)的支撑。

总结

• Iterator是种机制，也可说是种接口，它为各种不同的数据结构提供了统一的访问机制。
• 任何数据结构只要配置了 Iterator 接口，就可以完成遍历操作

demo:for-of机制

• ES6 创造了新的遍历for…of循环
• iterator接口主要供for…of消费
• 也就是说: 数组内置了iterator属性，因此成为可迭代对象，从而可被for…of遍历

ps

• for…of ES6新增，遍历变量为 value
• for…in 遍历遍历为 key

// for-of可以遍历: Array，Map，Set，String 等
// 注: object 不可以，因为  obj is not iterable
const arr=['a','b','c'];
for (let i of arr){
    
    
    console.log(i)
    //a、b、c
}
const m=new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (let j of m){
    
    
    console.log(j)
    //[1, 'x'], [2, 'y'], [3, 'z']
}

demo:可迭代性

可迭代(iterable)意味着

• 数据支持for…of遍历
• 可以调用自身的symbol.iteration方法
• 在js里原生具备 Iterator 接口的数据结构有：Array、Map、Set、String、TypedArray、函数的 arguments 对象、NodeList 对象、

// 迭代器的next方法
let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();
// TEST 
console.log('iter=',iter) // iter={next:function}
console.log(iter.next()) // { value: 'a', done: false }
console.log(iter.next()) // { value: 'b', done: false }
console.log(iter.next()) // { value: 'c', done: false }
console.log(iter.next()) // { value: undefined, done: true }

迭代器工作原理

过程

• 遍历器对象本质是一个指针对象，指针对象里有个next方法
• 初始时用该next方法，移动指针使得指针指向数据的第一个元素
• 然后每调用一次next方法，指针就指向数据结构里的下一个元素，直到指向最后一个元素
• 不断调用next方法就可以实现遍历元素的效果了

next返回结果

• 每次调用next方法，都会返回所指向数据中的成员信息，包含value和done两个属性
• value属性是当前成员的值，done属性是布尔值，表示遍历是否结束

demo: 自定义迭代器

改写思路

• 数组默认iterator接口例如 arr = ['a','b','c']
• 实际内部相当于 {0:'a',1:'b',2:'c',length:3,[Symbol.iterator]: function}
• 自定义迭代器就是内部实现属性 [Symbol.iterator] 并返回 {next:function} 对象

// 1. 探究默认迭代器
const arr = ['a','b','c'] // 数组
const iter = arr[Symbol.iterator] // 迭代器方法
const iterResult = arr[Symbol.iterator]() // 执行迭代器返回值

// TEST 
console.log('arr=',arr)
console.log('iter=',iter)
console.log('iterResult',iterResult)
// arr= (3) ['a', 'b', 'c'] prototype包含属性 Symbol(Symbol.iterator): ƒ values()
// iter= ƒ values() { [native code] }
// iterResult Array Iterator {}  prototype包含属性 next: ƒ next()

// 2. object 默认是不可以被遍历的
  name: 'abc',
  cities:[ 'London', 'New York', 'Tokyo']
}
for (const v of obj) {
    
    
  console.log('v=',v)
}
// 报错: Uncaught TypeError: obj is not iterable

// 3. 自定义object内部迭代器，遍历object内部数组
const obj = {
    
    
  name: 'abc',
  cities:[ 'London', 'New York', 'Tokyo'],
  [Symbol.iterator](){
    
    
    let index = 0;
    let _self = this;
    return {
    
          
      next: function(){
    
    
        if(index >= _self.cities.length){
    
    
          return {
    
    value:undefined,done:true}
        }else{
    
    
          const result = {
    
    value: _self.cities[index], done:false}
          index++
          return result
        }
      }
    }
  }
}
for (const v of obj) {
    
    
  console.log('v=',v)
}
// v= London
// v= New York
// v= Tokyo