ES6(三):Iterator、Generator、类的用法、类的继承

一、迭代器Iterator

迭代器是访问数据的一个接口,是用于遍历数据结构的一个指针,迭代器就是遍历器

const items=['one','two','three'];//创建新的迭代器const it=items[Symbol.iterator]();console.log(it.next());

done:返回false表示遍历继续,返回true表示遍历完成

二、生成器Generator

1.generator

generator函数可以通过yield关键字将函数挂起来(只能在函数内部使用)。

它跟普通函数的区别是,他得在function后面加*,调用该函数将会返回一个遍历器对象

generator函数是分段执行的,遇到yield就暂停执行,而next()是恢复执行,把你上一个结果给你返回出来

function* func(){console.log('start');const x=yield '2';console.log('continue'+x);const y=yield '3';console.log('continue'+y);console.log(x+y);return x+y;}const fn=func();console.log(fn.next());console.log(fn.next(2));console.log(fn.next(3));console.log(fn.next());

x它不是yield的返回值,它是当next调用,恢复当前yield传入的实参

(1)遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。
(2)下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式。
(3)如果没有再遇到新的yield表达式,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值。
(4)如果该函数没有return语句,则返回的对象的value属性值为undefined。

所以遇到第一个next的时候,start先输出,然后直接到了第一个yield 2,直接输出2

第二个next,传入了实参2,被x接收,输出continue2,又遇到了yield,直接输出后面的3

第三个next,传入了实参3,被y接收,后面输出x加y为5,然后直接ruturn了5(ruturn输出的效果和yield一样{}

最后的next后面都没有东西了,输出undefined done完成

function* foo(x) {var y = 2 * (yield (x + 1));var z = yield (y / 3);return (x + y + z);
}var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}  
a.next() // Object{value:NaN, done:true}   var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false } 
b.next(13) // { value:42, done:true } 

再来一个例子,就是每次返回的时候都是yield后面的值,传参数的时候都是给上一个yield,比如说y=2*yield、、、,传12的时候就是2*12

再比如传13的时候就是z=yield、、、,就是z=13

function* dataConsumer() {console.log('Started');console.log(`1. ${yield}`);console.log(`2. ${yield}`);return 'result';
}let genObj = dataConsumer();
genObj.next();
// Started
genObj.next('a')
// 1. a
genObj.next('b')
// 2. b

yield每次后面都没有值,所以没有返回{}啥的

2.使用场景:

(1)为不具备iterator 接口的对象提供遍历操作

之前说有Symbol.iterator接口的就可以进行遍历,那么没有这个接口的怎么进行遍历呢?

function* func(obj){//来构建一个让它有接口用const ks=Object.keys(obj);//获取对象当中所有的k保存到数组[name,age]for(const k of ks){yield [k,obj[ks]];}}const obj={name:'ttt',age:18}//这个对象就是一个没有iterator接口的对象obj[Symbol.iterator]=func;console.log(obj);for (let [key, value] of o[Symbol.iterator](o)) {  console.log(`${key}:${value}`); //name:ttt   age:18
} 

以上代码可以让一个没有iterator接口的对象实现遍历

弹幕说学了ajax再来看,先放一下之后再回来看

(2)让异步代码同步化

定义三个函数:加载中、加载完成、界面隐藏

如果直接调用的话,页面加载完成会最后出现,因为它是个异步

用yield将showData函数卡住,进行showData,然后在showData加了个next去输出。

function loadUI() {console.log('页面加载中Loading……');
}function showData() {setTimeout(() => {console.log('页面加载完成');genLoad.next();  //2.页面加载完成后就立即隐藏}, 1000);
}function hideUI() {console.log('页面隐藏啦');
}function* load() {loadUI();yield showData();hideUI();
}let genLoad = load();
genLoad.next();  //1.加载页面,加载完成的时候停止

三、类的用法

promise和async打算学完ajax之后再返回来好好总结,先不往脑子里灌了

class Sum{constructor(x,y){this.x=x;this.y=y;}add(){console.log(this.x+this.y) ;}}var a=new Sum(1,4);a.add();

类似java写法,class封装一个类,constructor()方法是默认加进去的,不写也默认会有,通过new生成对象实例的时候会自动调用这个方法。

add()函数前面不需要再加function。

四、类的继承

class Animal{constructor(name,age){this.name=name;this.age=age;}sayName(){return this.name;}sayAge(){return this.age;}}

有一个animal的类,我还想写一个dog类,包括名字年龄和颜色,其中年龄和颜色Animal都有,咱们就可以直接继承过来

class Dog extends Animal{constructor(name,age,color){super(name,age);//要继承的this.color=color;}}let t=new Dog('hh',2,'yellow');console.log(t);console.log(t.sayAge());//2

不仅可以继承属性,还能继承方法

class Dog extends Animal{//extends继承constructor(name,age,color){super(name,age);//super使用继承来的方法this.color=color;}sayColor(){//自己的方法return `${this.age}是${this.name}`;}//重写父亲的方法sayName(){return super.sayName();}}let t=new Dog('hh',2,'yellow');console.log(t.sayAge());//2console.log(t.sayColor());console.log(t.sayName());

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

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

相关文章

Python 查找PDF中的指定文本并高亮显示

在处理大量PDF文档时,有时我们需要快速找到特定的文本信息。本文将提供以下三个Python示例来帮助你在PDF文件中快速查找并高亮指定的文本。 查找并高亮PDF中所有的指定文本查找并高亮PDF某个区域内的指定文本使用正则表达式搜索指定文本并高亮 本文将用到国产第三方…

linux安全--CentOS7安装Tomcat,远程管理ManagerApp

目录 1.Tomcat安装 2.Tomcat远程管理 1.Tomcat安装 下载安装包并解压 tar xf apache-tomcat-7.0.54.tar.gz -C /usr/local/apache-tomcat_7.0.54/tomcat启停 启动 ./startup.sh 停止 ./shutdown.sh 2.Tomcat远程管理 找到tomcat文件夹中webapps/manager/META-INF/contex…

Linux系统---Haproxy高性能负载均衡软件

目录 一、Haproxy介绍 1.Haproxy定义 2.Haproxy主要特性 3.Haproxy调度算法原理 3.1RR(Round Robin) 3.2LC(Least Connections) 3.3SH(Source Hashing) 二、安装Haproxy 1.yum安装 2.第三方rpm包安…

Android中compile,implementation和api的区别,以及gradle-wrapper的详解

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂,风趣幽默",感觉非常有意思,忍不住分享一下给大家。 👉点击跳转到教程 前言: compile,implementation和api的区别和其作用 compile和api会进行传递…

【深度学习目标检测】二十三、基于深度学习的行人检测计数系统-含数据集、GUI和源码(python,yolov8)

行人检测计数系统是一种重要的智能交通监控系统,它能够通过图像处理技术对行人进行实时检测、跟踪和计数,为城市交通规划、人流控制和安全管理提供重要数据支持。本系统基于先进的YOLOv8目标检测算法和PyQt5图形界面框架开发,具有高效、准确、…

叶子分享站PHP源码

叶子网盘分享站PHP网站源码,创建无限级文件夹,上传文件,可进行删除,下载等能很好的兼容服务器。方便管理者操作,查看更多的下载资源以及文章,新增分享功能,异步上传文件/资源等 PHP网盘源码优势…

Unix环境高级编程-学习-05-TCP/IP协议与套接字

目录 一、概念 二、TCP/IP参考模型 三、客户端和服务端使用TCP通信过程 1、同一以太网下 四、函数介绍 1、socket (1)声明 (2)作用 (3)参数 (4)返回值 (5&…

三星泄露微软 Copilot 新功能:用自然语言操控各种功能

3 月 11 日消息,微软计划本月晚些时候发布新款 Surface 电脑和适用于 Windows 11 的 Copilot 新功能,但三星似乎等不及了,在其即将推出的 Galaxy Book4 系列产品宣传材料中泄露了一些即将到来的 Copilot 功能。 三星官网上发布的图片证实了此…

在centOS服务器安装docker,并使用docker配置nacos

遇到安装慢的情况可以优先选择阿里镜像 安装docker 更新yum版本 yum update安装所需软件包 yum install -y yum-utils device-mapper-persistent-data lvm2添加Docker仓库 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.rep…

SQLite—免费开源数据库系列文章目录

SQLite系列相关文章较多特开本文为了便于读者阅读特写了本索引和目录之用本文将不断更新中有需要的读者可以收藏本文便于导航到各个专题( 持续更新中......)。收藏一篇等于收藏一个系列文章 简介类: SQLite——世界上部署最广泛的免费开源数据库(简介&…

【海贼王的数据航海】探究二叉树的奥秘

目录 1 -> 树的概念及结构 1.1 -> 树的概念 1.2 -> 树的相关概念 1.3 -> 树的表示 1.4 -> 树在实际中的运用(表示文件系统的目录树结构) 2 -> 二叉树概念及结构 2.1 -> 二叉树的概念 2.2 -> 现实中的二叉树 2.3 -> 特殊的二叉树 2.4 ->…

Post请求出现Request header is too large

问题描述: 在做项目的时候,前端请求体太大的时候,出现Request header is too large问题,后端接口如下: 前端请求接口返回问题如下: 解决方案: 问题原因:这是因为我们在做Springboo…

旅游管理系统|基于SpringBoot+ Mysql+Java+Tomcat技术的旅游管理系统设计与实现(可运行源码+数据库+设计文档+部署说明+视频演示)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 前台功能效果图 用户功能 管理员功能登录前台功能效果图 系统功能设计 数据库E-R图设计 lunwen参考 …

反爬虫技术:如何保护你的网站数据安全

在数字化时代,数据的价值日益凸显,而爬虫技术则成为了获取这些数据的重要手段之一。然而,对于网站运营者来说,非法爬虫不仅会导致数据泄露,还可能给网站带来巨大的流量压力和安全隐患。因此,本文将探讨如何…

【深度学习】YOLOv9继续训练——断点训练方法

YOLOv9继续训练主要分为两个情况: 其一、训练过程中意外中断,未完成训练预期的epoch数量; 其二、训练完了,但是未收敛,在这个基础上,还想用这个权重、学习率等参数继续训练多一些轮次 一、训练过程中意外…

工作中常用的git命令

git 分布式版本控制系统。 使用远程仓库时候会有多个协议可以选择,使用https不仅仅速度慢,而且每次push都要输入口令。 HEAD 当前版本的指针,当切换本地版本的时候会快速指向指定版本文件 master git为我们创建主分支 origin 远程仓库的名…

npm是如何处理多版本依赖的?

两种模式 nest模式 基本行为: 在require/import时,向上递归查找依赖,直到全局node_modules结束。 特点: 每个包在自己内部管理依赖,结构清晰简单。 不足: 如果A包和B包都依赖了axios,就会导致…

前端基础篇-深入了解 HTML 表格标签、表单标签和表单项标签

🔥博客主页: 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 表格标签概述 1.1 表格标签定义 2.0 表单标签概述 2.1 表单标签定义 3.0 表单项标签概述 3.1 表单项标签定义 1.0 表格标签概述 顾名思义,就是用来…

Day38:安全开发-JavaEE应用SpringBoot框架MyBatis注入Thymeleaf模版注入

目录 SpringBoot-Web应用-路由响应 SpringBoot-数据库应用-Mybatis SpringBoot-模版引擎-Thymeleaf 思维导图 Java知识点 功能:数据库操作,文件操作,序列化数据,身份验证,框架开发,第三方库使用等. 框架…

Text-to-SQL 工具Vanna进阶|数据库对话机器人的多轮对话

跟数据库对话机器人对话,我可不止一个问题。 可能基于第一句问话,还有第二句、第三句问话。。。第N句对话。所以本文测试了多轮对话功能。 单轮对话的环境搭建参考博客 Text-to-SQL 工具Vanna + MySQL本地部署 | 数据库对话机器人 我的数据是这样 1. 基础配置 import vann…