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

news2024/11/17 13:27:50

一、迭代器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());//2
       console.log(t.sayColor());
       console.log(t.sayName());

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

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

相关文章

Kafka MQ 生产者

Kafka MQ 生产者 生产者概览 尽管生产者 API 使用起来很简单,但消息的发送过程还是有点复杂的。图 3-1 展示了向 Kafka 发送消息的主要步骤。 我们从创建一个 ProducerRecord 对象开始,ProducerRecord 对象需要包含目标主题和要发送的内容。我们还可以…

linux命令深入研究——cat

cat命令,“猫”,可以理解为瞄一眼文件内容,其中可以用重定向符号对文件进行一些修改,如增加,删除文件内容,其命令参数如-n,-s,-b可以输出带有行号的行 如果想要快速删除文件内容&…

[全志T113]:Tina SDK安装

[全志T113]:Tina SDK安装 SDK安装与补丁 SDK下载地址 https://pan.baidu.com/s/1wxUeYQZaSgAPGorGOVcJxA?pwdtina 1.解压SDK tar -zxvf Tina-Linux-20220815.tar.gz cd Tina-Linux2.安装补丁: $ wget http://dl.mangopi.org/tina/prebuilt.tar.gz …

【数据结构】双向链表及LRU缓存的实现

目录 前言 1. 在原有的自定义链表类 Linked 的基础上,添加新的 “节点添加”方法 addNode(Node node) 测试用例 测试结果 2. 在自定义链表类的基础上,使用双重循环“强力” 判断两个节点是否发生相交 测试用例 测试结果 3. 在自定义链表类的基础上…

Linux基础开发工具之yum与vim

1. Linux软件包管理器——yum 1.1 什么是软件包? 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序. 但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好, 做成软件包(可以理解成windows上的安装程序)放在一个服务器上, …

JavaWeb06-MVC和三层架构

目录 一、MVC模式 1.概述 2.好处 二、三层架构 1.概述 三、MVC与三层架构 四、练习 一、MVC模式 1.概述 MVC是一种分层开发的模式,其中 M:Model,业务模型,处理业务 V: View,视图,界面展…

浅谈HTTP 和 HTTPS (中间人问题)

前言 由于之前的文章已经介绍过了HTTP , 这篇文章介绍 HTTPS 相对于 HTTP 做出的改进 开门见山: HTTPS 是对 HTTP 的加强版 主要是对一些关键信息 进行了加密 一.两种加密方式 1.对称加密 公钥 明文 密文 密文 公钥 明文 2.非对称加密 举个例子就好比 小区邮箱 提供一…

学习SSM的记录(八)-- SSM整合项目《任务列表案例》

前端程序搭建和运行 项目预览 接口分析 1.学习计划分页查询 需求:查询对应数据页数据 uri:schedule/{pageSize}/{currentPage} 请求方式:get 响应数据:json {"code":200,"flag":true,"data"…

MVP 聚技站|生成式 AI 系列(六):关于嵌入和 RAG 的那些有趣的事

点击蓝字 关注我们 MVP 聚技站 微软最有价值专家推出“MVP 聚技站”系列主题专栏,邀请多位微软最有价值专家,针对初学者、开发者感兴趣的技术话题,带来专业的技术课程讲解与实践经验分享,帮助大家更快掌握最新的技术技能。 随着人…

前端框架的发展史介绍框架特点

目录 1.前端框架的发展历程 2.官网、优缺点、使用场景 2.1 jQuery 2.2 AngularJS 2.3 React 2.4 Vue.js 2.5 Angular 1.前端框架的发展历程 jQuery(2006年):jQuery是一个非常流行的JavaScript库,用于简化DOM操作和事件处理…

从零开始学习深度学习库-1:前馈网络

你好!欢迎来到这个系列的第一篇文章,我们将尝试用Python构建自己的深度学习库。在这篇文章中,我们将开始编写一个简单的前馈神经网络。我们将仅在这篇文章中处理前向传播,并在下一篇文章中处理网络的训练。这篇文章将介绍基本的前…

3.2 Beautiful Soup 的使用

目录 一、Beautiful Soup 的简介 二、解析器 三、基本使用 四、节点选择器 1 选择元素 2 获取名称、属性、文本内容 五、方法选择器 1 find_all 传入 name 节点名 传入 attrs 属性 传入 text 2 find 六、CSS 选择器 1 实例 2 获取属性 3 获取文本 七、结语 一…

TQ15EG开发板教程:运行MPSOC+AD9361

目录 1,下载工程需要使用的文件 2,编译以及修改工程 3,获取生成BOOT.BIN所需要的3个文件 3.1生成bit文件 3.2生成elf文件 3.3生成fsbl文件 4,生成boot.bin文件 5,上板测试 6,切换FMC接口 7&#…

JAVA的编译过程

1.通过使用 javac.exe 对 xxx.java文件进行编译,生成相应的 xxx.class(字节码文件) 2.使用 java.exe 对 xxx.class 进行相应解码,并将结果送给JVM(java虚拟机)中的类装载器 3. 字节码验证器会判断代码类…

Vue组件中引入jQuery

两种在vue中引入jQuery的方式 1、普通html中使用jQuery 将jQuer的文件导入到项目中&#xff0c;然后直接使用<script src"jQuery.js"></script>即可。 <script src"jQuery.js"></script> 2、vue组件中使用jQuery 安装依赖 c…

华为OD机试 - 运输时间(Java 2023 C卷 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述1、输入2、输出3、说明 四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&a…

【分明集合】特征函数、关系与运算

经典的集合论中&#xff0c;对于一个给定的集合&#xff0c;任意一个元素&#xff0c;或者属于这个集合&#xff0c;或者不属于这个集合&#xff0c;二者必居其一&#xff0c;且仅居其一&#xff0c;为了加以区分&#xff0c; 通常将这样的集合称为分明集合、经典集合或者普通集…

MySQL的事务隔离是如何实现的?

目录 从一个例子说起 快照读和当前读 事务的启动时机和读视图生成的时刻 MVCC 隐藏字段 Undo Log回滚日志 Read View - 读视图 可重复读(RC)隔离级别下的MVCC 读提交(RR)隔离级别下的MCC 关于MVCC的一些疑问 1.为什么需要 MVCC &#xff1f;如果没有 MVCC 会怎样&am…

矢量场的通量和散量

矢量与矢量场 矢量&#xff1a;又有大小又有方向的量。&#xff08;力、速度、电场强度等&#xff09; 矢量场&#xff1a;如果空间中处处都有矢量存在&#xff0c;则称形成了一个矢量场。 表示矢量场的方法&#xff1a; 1、数学表达式&#xff1a; 此表达式为直角坐标系下表…

腾讯云轻量服务器地域选择方法整理,选择不能修改!

腾讯云轻量应用服务器地域如何选择&#xff1f;地域就近选择&#xff0c;北方选北京地域、南方选广州地域&#xff0c;华东地区选上海地域。广州上海北京地域有什么区别&#xff1f;哪个好&#xff1f;区别就是城市地理位置不同&#xff0c;其他的差不多&#xff0c;不区分好坏…