首页 > 其他分享 >ES6之迭代器

ES6之迭代器

时间:2022-11-19 22:36:42浏览次数:51  
标签:ES6 遍历 console log 迭代 next let iterator

迭代器 遍历器(Iterator)就是一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。 1) ES6 创造了一种新的遍历命令 for...of 循环,Iterator 接口主要供 for...of 消费 2) 原生具备 iterator 接口的数据(可用 for of 遍历) a) Array b) Arguments c) Set d) Map e) String f) TypedArray g) NodeList 3) 工作原理 a) 创建一个指针对象,指向当前数据结构的起始位置 b) 第一次调用对象的 next 方法,指针自动指向数据结构的第一个成员 c) 接下来不断调用 next 方法,指针一直往后移动,直到指向最后一个成员 d) 每调用 next 方法返回一个包含 value 和 done 属性的对象 注: 需要自定义遍历数据的时候,要想到迭代器

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>迭代器</title>
</head>
<body>
    <script>
        //声明一个数组
        const xiyou = ['唐僧','孙悟空','猪八戒','沙僧'];

        //使用 for...of 遍历数组
       
        console.log("let of遍历结果:");
        for(let v of xiyou){
            console.log(v);//  值
        }

        console.log("let in遍历结果:");
        for(let v in xiyou){
            console.log(v);// 索引值
        }

        let iterator = xiyou[Symbol.iterator]();

        //调用对象的next方法
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
    </script>
</body>
</html>

 

结果:

 

 

自定义遍历数据

比如定义一个对象,但是我想要通过for..of实现遍历,那么可以根据上面的工作原理来定义自己的规则来返回遍历结果:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义遍历数据</title>
</head>

<body>
    <script>
        //声明一个对象
        const banji = {
            name: "终极一班",
            stus: [
                'xiaoming',
                'xiaoning',
                'xiaotian',
                'knight'
            ],
            [Symbol.iterator]() {
                //索引变量
                let index = 0;
                //
                let _this = this;
                return {
                    next: function () {
                        if (index < _this.stus.length) {
                            const result = { value: _this.stus[index], done: false };
                            //下标自增
                            index++;
                            //返回结果
                            return result;
                        }else{
                            return {value: undefined, done: true};
                        }
                    }
                };
            }
        }

        //遍历这个对象 
        for (let v of banji) {
            console.log(v);
        }
    </script>
</body>

</html>

 

结果:

  

标签:ES6,遍历,console,log,迭代,next,let,iterator
From: https://www.cnblogs.com/anjingdian/p/16907361.html

相关文章

  • ES6之Symbol
    Symbol基本使用ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。它是JavaScript语言的第七种数据类型,是一种类似于字符串的数据类型。Symbol特点1)Symbol......
  • python-迭代器
     迭代的概念使用for循环遍历取值的过程叫做迭代,比如:使用for循环遍历列表获取值的过程#Python中的迭代forvaluein[2,3,4]:print(value)复制代码1.2......
  • 二叉树的前、中、后序遍历(迭代版)
    //前序遍历顺序:中-左-右,入栈顺序:中-右-左classSolution{publicList<Integer>preorderTraversal(TreeNoderoot){List<Integer>result=newArrayL......
  • ES6 语法 浅析
    ECMAScript6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript2015(ES2015)。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业......
  • ES6中setTimeout函数的this
    在编程的过程中有同学遇到不太清楚ES6中​​this​​指向的问题,代码抽象如下:functionmyFunction(){varmthis=this;setTimeout(()=>{//this=mthisco......
  • Java——集合——Collection集合——Iterator接口介绍&迭代器的代码实现&迭代器的实现
                                                       ......
  • ES6中setTimeout函数的this
    在编程的过程中有同学遇到不太清楚ES6中this指向的问题,代码抽象如下:functionmyFunction(){varmthis=this; setTimeout(()=>{//this=mthiscons......
  • ES6之 ...扩展运算符
    <script>//『...』扩展运算符能将『数组』转换为逗号分隔的『参数序列』//声明一个数组...consttfboys=['易烊千玺','王源','王俊......
  • ES6之rest参数
     (1)//ES6引入rest参数,用于获取函数的实参,用来代替arguments//ES5获取实参的方式functiondate(){console.log(arguments);......
  • ES6之函数参数默认值
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>函数......