ES6-迭代器和生成器

news2024/11/19 9:30:01

 一、迭代器概念

遍历器( 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 属性的对象
 <script>
     //声明一个数组
     const xiyou = ['唐僧','孙悟空','猪八戒','沙僧'];

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

     //使用 for...in 遍历数组
     for(let v in xiyou){
        console.log(v);
     }

    </script>

 二、自定义迭代

 

 三、生成器

生成器函数返回的结果是迭代器对象,调用迭代器对象的 next 方法可以得到后面的值。
<script>
     //生成器其实就是一个特殊的函数
     //异步编程 之前用的纯回调函数 例如node fs ajax

     function * gen(){
        console.log("hello generator!")
     }

     let interator = gen();

     interator.next();

    </script>

代码说明:
1) * 的位置没有限制
2) 生成器函数返回的结果是迭代器对象,调用迭代器对象的 next 方法可以得到
yield 语句后的值
3) yield 相当于函数的暂停标记,也可以认为是函数的分隔符,每调用一次 next
方法,执行一段代码
4) next 方法可以传递实参,作为 yield 语句的返回值

 

 

 生成器函数的意义:新的异步编程的解决方案

异步编程:js是单线程,异步单线程,如js的文件搜索,网络操作(ajax、request),数据库操作等,都是异步的。

下图代码会一直回调,会越来越长,产生回调地狱

下图是用生成器完成的代码。

<body>

    <script>
     function one(){
        setTimeout(()=>{
            console.log(111);
            iteartor.next();
        },1000)
       
     }

     function two(){
        setTimeout(()=>{
            console.log(222);
            iteartor.next();
        },2000)
        
     }

     function three(){
        setTimeout(()=>{
            console.log(333);
            iteartor.next();
        },3000)
    
     }

     function * gen(){
        yield one();

        yield two();

        yield three();
     }

     //调用生成器函数
     let iteartor = gen();

     iteartor.next();

    </script>
    
</body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/492235.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

虹科方案 | 助力高性能视频存储解决方案-2

上篇文章《虹科方案 | 助力高性能视频存储解决方案-1》我们分享了虹科&ATTO 和 Avid 共同创建协作解决方案&#xff0c;助力高性能视频存储&#xff0c;今天我们再深入介绍一下我们的案例详情。 一、行业挑战 从高端广播设施到小型独立工作室的媒体后期制作环境都需要允许多…

【C++】STL标准库之list

STL标准库之list list类的简介常用的list类的接口构造迭代器容量访问修改 list和vector的区别 list类的简介 list是一种序列式容器&#xff0c;可以在任意位置插入和删除元素&#xff0c;并且其时间复杂度为O(1)&#xff0c;在底层&#xff0c;list是双向链表结构&#xff0c;…

《CTFshow-Web入门》08. Web 71~80

Web 71~80 web71知识点题解 web72知识点题解 web73题解 web74题解 web75知识点题解 web76题解 web77知识点题解 web78知识点题解 web79题解 web80知识点题解 ctf - web入门 web71 知识点 ob_get_contents()&#xff1a;得到输出缓冲区的内容。ob_end_clean()&#xff1a;清除…

程序员:面试造飞机,入职拧螺丝?真难···

刚开始工作的时候&#xff0c;我也想不通这个问题&#xff0c;甚至很鄙视这种现象。后面当了面试官&#xff0c;做到了公司中层管理&#xff0c;也会站在公司以及行业角度去重新思考这个问题。 为什么这种现象会越来越普遍呢&#xff1f;尤其在 IT 行业愈加明显。 面试看的是…

树与二叉树

我们之前讲过的链表和顺序表都是线性结构的数据结构&#xff0c;那么我们肯定会想有没有一种数据结构的形式不是线性结构而是其他的形式呢&#xff1f;今天我们就来学习一种新的数据结构——树形结构。 &#x1f335;初识树形结构 树形结构就是像我们上面的图形一样。因为像是…

Java从入门到转行

Java开发从入门到转行 Java基本介绍Java学习路线Java学习须知Java学习文档Java SEJava 对象与类Java 基本数据类型Java 变量类型Java 修饰符Java 运算符Java 循环结构Java 条件语句Java switch caseJava 数组Java 日期与时间Java 正则表达式Java 方法Java 流(Stream)、 File、 …

A Restful API

SpringBoot 定义Restful API 定义POJOOrderBuyer 定义RestfulControllerGet API for queryPost API for addPut API for updateDelete API for delete 定义AjaxResponse Patavariable RequestParm RequestBodyRequestHeader 定义POJO Order import java.util.Date; import ja…

工厂方法模式

// 简单工厂模式 #include <iostream> #include <string>// 抽象产品类 class Product { public:virtual ~Product() {}virtual std::string getName() 0; };// 具体产品类A class ProductA : public Product { public:std::string getName() {return "Produ…

Swiper总结

文章目录 Swiper总结概述使用简单使用自动切换分页器样式切换效果预览视差效果延迟加载自适应高度放大缩小 案例tab切换引导页 Swiper总结 概述 Swiper是纯javascript打造的滑动特效插件&#xff0c;面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触…

第三节课 Linux文件权限

Linux是多人多任务的操作系统&#xff0c;因此可能常常会有多人使用一台机器&#xff0c; 为了考虑每个人的隐私、方便用户合作&#xff0c;每个文件都有三类用户&#xff0c;权限是基于这三类用户设定的&#xff1a; 1) 文件拥有者&#xff08;user&#xff09; 2) 组用户&a…

SpringBoot 自定义注解实现Redis缓存功能

背景 最近小A的公司要做一个大屏可视化平台&#xff0c;主要是给领导看的&#xff0c;领导说这个项目要给领导演示&#xff0c;效果好不好直接关系到能不能拿下这个项目&#xff0c;领导还补了一句“这项目至少是百万级的&#xff0c;大伙要全力以赴”&#xff0c;早上小A还想…

走近大数据——什么是大数据、计算架构的发展

文章目录 一、什么是大数据二、大数据计算架构的发展1.RDBMS阶段2.Hadoop Map-Reduce阶段3.Spark阶段4.Flink阶段 参考 一、什么是大数据 大数据是指无法在有限时间内用常规软件工具对其进行获取、存储、管理和处理的数据集合。 大数据的特点&#xff1a; 海量化&#xff1a;数…

少年不懂孔乙己,读懂已是书中人

文章目录 前言梗从何来互联网文学背后的焦虑给学弟学妹的建议 前言 《孔乙己》是近代文学巨匠鲁迅所著的短篇小说。 大概故事讲的是孔乙己是站着喝酒而穿长衫的&#xff08;那时候穿长衫的人代表着有知识&#xff09;唯一人&#xff0c;穿的虽然是长衫&#xff0c;可是又脏又破…

SpringMVC概述

SpringMVC概述 1. SpringMVC概述1.1 SpringMVC概述 2. 入门案例【重点】2.1 实现步骤2.2 代码实现【第一步】创建web工程&#xff08;Maven结构&#xff09;【第二步】设置tomcat服务器&#xff0c;加载web工程【第三步】导入坐标&#xff08;SpringMVCServlet&#xff09;【第…

璞华助力“数字人社”,为成都市人社数字化建设提供多方位的产品与技术支持!

新的时期&#xff0c;人力资源和社会保障事业进入新一轮的制度创新和加快发展阶段。把对各项人力资源和社会保障业务的支持和服务纳入信息化建设&#xff0c;通过 “数字人社”信息化建设项目&#xff0c;是充分利用新一代信息技术&#xff0c;有效整合各类信息资源&#xff0c…

ChatGPT背后的打工人:你不干,有的是AI干

AI“出圈” 如今&#xff0c;数字技术发展速度惊人&#xff0c;AI提高了社会生产效率&#xff0c;更真切地冲击到原有的生产秩序。 年初AI技术的爆发&#xff0c;让国内看到了进一步降本增效的希望。 国内多家互联网企业相继推出类ChatGPT产品&#xff0c;复旦大学邱锡鹏教授…

清洁赛道新势力,米博凭“减法”突围?

在五四青年节这个特殊的日子&#xff0c;方太旗下的高端智能清洁品牌“米博”发布了新一代无滚布洗地机7系列。 5月4日晚&#xff0c;米博以“减法生活&#xff0c;净请7代”为主题&#xff0c;举办了新品发布会。在发布会上&#xff0c;从小红书翻红的董洁作为方太集团米博产…

持之以恒奖牌来啦,带你提前看~

加油&#xff0c;让我们继续持之以恒吧&#xff01;

Flutter 中使用 dart:html 的条件导入

Flutter 中使用 dart:html 的条件导入 Flutter 是一个跨平台的 UI 框架&#xff0c;可以让你用一套代码开发 Android、iOS、Web 和桌面应用。但是&#xff0c;不同的平台有不同的特性和限制&#xff0c;所以有时候你可能需要根据平台来导入不同的库或代码。这时候&#xff0c;…

社交“搭子”火了!小红书数据分析,品牌正用“陪伴”种草?

找搭子&#xff0c;年轻人在搞一种很新的社交 朋友&#xff0c;你找搭子了吗&#xff1f;近期&#xff0c;“搭子”这种新型社交关系走红&#xff0c;饭搭子、奶茶搭子、厕所搭子、旅游搭子……遍布于各式各样的场景中&#xff0c;主打的就是一个垂直细分领域的精准陪伴。“搭子…