• 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']
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    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 }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    迭代器工作原理

    过程

    • 遍历器对象本质是一个指针对象,指针对象里有个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()
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    // 2. object 默认是不可以被遍历的
      name: 'abc',
      cities:[ 'London', 'New York', 'Tokyo']
    }
    for (const v of obj) {
      console.log('v=',v)
    }
    // 报错: Uncaught TypeError: obj is not iterable
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    // 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
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
  • 相关阅读:
    给你一个整数 num ,返回 num 中能整除 num 的数位的数目
    Android 中USB-HID协议实现
    面试--springboot基础
    Unity中的序列化和反序列化
    Mock安装及应用
    每天一个数据分析题(一百六十六)
    IIC控制器(2):PS端
    信钰证券:中央汇金出手,金融板块沸腾,后续还有哪些可以期待?
    【Web UI自动化测试】Web UI自动化测试之框架篇(全网最全)
    Leetcode 1582. 二进制矩阵中的特殊位置
  • 原文地址:https://blog.csdn.net/qubes/article/details/134313472