• Iterator接口(遍历器)和for/of循环


    在javascript中表示“集合”的数据结构,主要有Array,Object,Map,Set。

    Iterator(遍历器)接口是为各种不同的数据结构提供了统一的访问机制。任何数据结构具有Iterator接口,就可以完成遍历操作(依次排序进行遍历)。

    Iterator遍历的过程:

    创建一个指针对象,指向数据结构的初始位置——调用指针对象的next方法,指向数据结构成员——不断调用next方法,直到指向数据结构的结束位置。

    var it = makeIterator(['a','b']);
    
    function makeIterator(array){
       var nextIndex = 0;
       return{
           next:function(){
               return nextIndex < array.length ? 
               {value:array[nextIndex++],done:false} : 
               {value:undefined,done:true}
           }
       }
    }
    
    it.next() 

    默认的Iterator接口
    Iterator借口的目的在于:为所有数据结构,提供统一的访问机制。即用for/of循环,当使用for/of进行遍历的时候,该循环会自动去寻找Iterator接口。

    默认的Iterator接口部署在数据结构的Symbol.iterator属性,一个数据结构只要有Symbol.Iterator属性,就是“可遍历的”,Symbol.iterator属性本身是一个函数,执行这个函数,返回 一个遍历器。

    ES6中原生具备Iterator接口的数据结构如下:

    Array  Map  Set  String  TypedArray  函数的arguments对象  NodeList对象

    let arr = [1,2,3,4,5]
    let iter = arr[Symbol.iterator]();
    iter.next()

    一个对象具备Iterator接口,必须在Symbol.iterator的属性上部署遍历器生成方法(原型链上的对象具有该方法也可)

    只要某个数据结构部署了Iterator接口,就可以使用拓展运算符将其转化为数组。

    let arr = [...iterator];
    
    var str = 'hello';
    [...str]  //["h", "e", "l", "l", "o"]

    yield* 后面跟的是一个可遍历的结构,它会调用该结构的遍历器接口。

    let generator = function* (){
        yield 1;
        yield* [2,3,4];
        yield 5;
    }
    var it = generator();
    it.next();  //{value: 1, done: false}
    it.next()   //{value: 2, done: false}
    it.next()   //{value: 3, done: false}
    it.next()   //{value: 4, done: false}
    it.next()   //{value: 5, done: false}
    it.next()   //{value: undefined, done: true}

    数组的遍历会调用遍历器接口,所以任何接受数组作为参数的场合,其实都调用了Iterator接口,如下:

    for/of    Array.from()   Map()    Set()   WeakMap()   WeakSet()  Promise.all()  Promise.rece()

    1,字符串的Iterator接口

    var str = 'hi';
    typeof str[Symbol.iterator]    //'function'
    
    var a = str[Symbol.iterator]();
    a.next()   //{value: "h", done: false}
    a.next()   //{value: "i", done: false}
    
    [...str]     //["h", "i"]

    以前字符串转化为数组:str.split(""),ES6中可以使用Iterator进行遍历加入数组中,相当简洁。

     这里写一个能用for/of进行遍历对象的方法键值的方法:

    function* entries(obj) {
      for (let key of Object.keys(obj)) {
        yield [key, obj[key]];
      }
    }
    
    for (let [key, value] of entries(obj)) {
      console.log(key, '->', value);
    }
    // a -> 1
    // b -> 2
    // c -> 3

    其他遍历方法的比较:

    forEach内部写break命令不奏效,会报错,return语句是可以写的。

    for/in是用来遍历对象的键名,数组的索引,主要适用于遍历对象。

    for/of主要是用来遍历数组的值,可以搭配break,continue,return等,提供了遍历所有数据结构的统一操作接口。

  • 相关阅读:
    LINQ 笔记
    关于:last-child的一点见解
    webpack 配置IP 和端口号
    echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍
    关于offsetWidth innerWidth的使用
    关于mobiscroll插件的使用
    关于取url或者微信中参数的js
    上传图片
    使用默认图片替代某张图为空时的情况
    在数组中计算和的最大最小值
  • 原文地址:https://www.cnblogs.com/tangjiao/p/9046429.html
Copyright © 2020-2023  润新知