• es6+最佳入门实践(9)


    9.Iterator和for...of

    9.1.Iterator是什么?

    Iterator又叫做迭代器,它是一种接口,为各种不同的数据结构提供统一的访问机制。这里说的接口可以形象的理解为USB接口,有了这个接口可以做不同的事情,在编程中所说的接口最终都是要通过一段代码块来实现这个接口功能的。而Iterator接口提供的统一访问机制主要表现为遍历操作,任何数据类型只要具有Iterator接口,就可以完成遍历操作(遍历操作指依次处理该数据结构的所有成员),总结起来就是说我们需要一种统一的机制来依次处理某种数据结构的所有成员,这种处理机制就是Iterator所做的事情

    下面我们来实现这种机制,它需要具备依次处理数据结构的所有成员,那意味着我们执行一次方法就可以处理一个成员

    function Iterator(arr) {
        var index = 0;
        return {
            next: function () {
                if(index < arr.length){
                    return {value: arr[index++]}
                }else {
                    return {done: false}
                }
            }
        }
    }
    var it = Iterator([1,2,3]);
    console.log(it.next());
    console.log(it.next());
    console.log(it.next());
    console.log(it.next());    function Iterator(arr) {
        var index = 0;
        return {
            next: function () {
                if(index < arr.length){
                    return {value: arr[index++]}
                }else {
                    return {done: false}
                }
            }
        }
    }
    var it = Iterator([1,2,3]);
    console.log(it.next());
    console.log(it.next());
    console.log(it.next());
    console.log(it.next());
    

    一种数据结构只要部署了Iterator接口,我们就称这种数据结构是可以迭代的,在ES6中,只要是一个数据结构具有了Symbol.iterator属性,那么就认为是可迭代的,其实,Symbol.iterator就是一个函数,实现的功能和我们上面手写的功能差不多。

    在ES6中,有些数据结构原生就具备了Iterator接口,例如:Array、Map、Set、String等

    let arr = [1,2,3,4];
    let it = arr[Symbol.iterator]()
    console.log(it.next())
    console.log(it.next())
    console.log(it.next())
    console.log(it.next())
    console.log(it.next())
    

    Iterator的应用场景举例:

    1.在解构赋值的时候默认调用Iterator接口

    let arr = [1, 2, 3];
    let [x, y, z] = arr;
    console.log(x, y, z)
    

    2.扩展运算符使用等时候也默认调用Iterator接口

    let st = 'nodeing'
    console.log([...st])
    

    9.2.for...of方法

    在ES6中,引入了for...of循环,作为遍历所有数据结构的统一方法,在for...of循环内部也是调用数据结构的Symbol.iterator方法

    let st = 'nodeing';
    
    for (let a of st){
        console.log(a)
    }
    

    注意:对象是不可迭代的

    //对象是不可迭代的
    let obj = {
        name: 'xiaoqiang',
        age: 18
    };
    // obj is not iterable
    for (let a of obj){
        console.log(a)
    }
    

    视频教程地址:http://edu.nodeing.com/course/50

  • 相关阅读:
    thinkPHP框架学习笔记
    ajax的项目实操(只用于记录部分文件未引入)
    js中两个感叹号的原理与用法分析(转载记录没找到原帖)
    html5+css3学习笔记-prefixfree前缀补全插件
    背景图动起来就这么简单!
    flash设计师罢工,小前端顶上
    onbeforeunload与a标签在IE中的冲突bug(转载)
    js自定义的简易滚动条
    2020牛客国庆集训派对day2
    马拉车算法 Manacher
  • 原文地址:https://www.cnblogs.com/dadifeihong/p/10358128.html
Copyright © 2020-2023  润新知