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());//2
       console.log(t.sayColor());
       console.log(t.sayName());

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

04_拖动文件渲染在页面中

新建一个文件夹,跟之前一样,在 Vscode 终端里输入 yarn create electron-app Drag。 在 index.html 添加以下代码,JS 文件夹和 render.js 都是新创建的: 首先,css 文件一般和 html 结合使用,相当于 html 是…

Prometheus 监控系统

目录 概述 Prometheus定义 Prometheus 的特点 Prometheus 的生态组件 Prometheus 的工作模式 Prometheus 的工作流程 Prometheus 的局限性 1.部署 Prometheus 上传prometheus包二级制安装 配置系统启动文件,启动 Prometheust 2.部署 Exporters 上传node…

[Spark SQL]Spark SQL读取Kudu,写入Hive

SparkUnit Function:用于获取Spark Session package com.example.unitlimport org.apache.spark.sql.SparkSessionobject SparkUnit {def getLocal(appName: String): SparkSession {SparkSession.builder().appName(appName).master("local[*]").getO…

探索考古文字场景,基于YOLOv8全系列【n/s/m/l/x】参数模型开发构建文本考古场景下的甲骨文字符图像检测识别系统

甲骨文是一种非常历史悠久的古老文字,在前面我们基本上很少有涉及这块的内容,最近正好在做文字相关的项目开发研究,就想着基于甲骨文的场景来开发对应的检测识别系统,在前文中我们基于YOLOv5、YOLOv7和YOLOv9开发构建了在仿真数据…

c++:类和对象中:拷贝构造和赋值运算符重载详解

c:类和对象 构造函数和析构函数详解 文章目录 c:类和对象构造函数和析构函数详解 前言一、拷贝构造怎么写拷贝构造1.拷贝构造也是构造函数的一种,构造函数没有值.所以拷贝构造也没有返回值**2.拷贝构造只有一个形参,正常这个形参是自定义类型对象的引用.3. 如果我们没有显示写…

Excel判断CD两列在EF两列的列表中是否存在

需求 需要将CD两列的ID和NAME组合起来,查询EF两列的ID和NAME组合起来的列表中是否存在? 比如,判断第二行的“123456ABC”在EF的第二行到第四行中是否存在,若存在则显示Y,不存在则显示N 实现的计算公式 IF(ISNUMBER…

文字弹性跳动CSS3代码

文字弹性跳动CSS3代码,源码由HTMLCSSJS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面 下载地址 文字弹性跳动CSS3代码

YOLOv9实例分割教程|(一)训练教程

专栏介绍:YOLOv9改进系列 | 包含深度学习最新创新,主力高效涨点!!! 一、创建数据集及数据配置文件 创新一个文件夹存放分割数据集,包含一个images和labels文件夹。标签格式如下所示: 创新数据集…

Linux——文件系统与软硬链接

目录 前言 一、物理上的磁盘 二、磁盘存储的逻辑抽象结构 三、块组内容与工作原理 1.inode 2.Data bolcks 3.inode 位图 4.bolck bitmap 5.GDT 6.Super Block 四、软硬链接 五、软硬链接链接目录 前言 我们之前学习了文件标识符,重定向,缓…

Spring框架----AOP全集

一:AOP概念的引入 首先我们来看一下登录的原理 如上图所示这是一个基本的登录原理图,但是如果我们想要在这个登录之上添加一些新的功能,比如权限校验 那么我们能想到的就有两种方法: ①:通过对源代码的修改实现 ②&a…

Android实现点击获取验证码60秒后重新获取功能

本文实例为大家分享了Android实现点击获取验证码60秒后重新获取的具体代码,供大家参考,具体内容如下 上代码 /*** Created by Xia_焱 on 2017/5/7.*/public class CountDownTimerUtils extends CountDownTimer {private TextView mTextView;/*** param…

Requests教程-17-请求代理设置

上一小节我们学习了requests解决乱码的方法,本小节我们讲解一下requests设置代理的方法。 代理基本原理 代理实际上指的就是代理服务器, 英文叫作proxy server ,它的功能是代理网络用户去取得网络信息。形象地说,它是网络信息的中…

Android Studio入门——页面跳转

1.工程目录 2.MainActivity package com.example.demo01;import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.TextView;import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCo…

前端开发小技巧 - 【Vue3 + TS】 - 在 TS + Vue3 中使用 Pinia,实现 Pinia 的持久化,优化Pinia(仓库统一管理)

前言 ts 中使用 pinia 和 Vue3 基本一致,唯一的不同点在于,需要根据接口文档给 state 标注类型,也要给 actions 标注类型;以下都是 组合式API 的写法,选项式API 的写法大家可以去官网看看; Pinia&#xff…

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

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

深入解析Java中锁机制以及底层原理

一、概述 1.1 背景 概念:锁是多线程编程中的机制,用于控制对共享资源的访问。可以防止多个线程同时修改或读取共享资源,从而保证线程安全。 作用:锁用于实现线程间的互斥和协调,确保在多线程环境下对共享资源的访问顺…

前端性能优化——javascript

优化处理: 讲javascript脚本文件放到body标记的后面 减少页面当中所包含的script标记的数量 课堂练习: 脚本优化处理 使用原生JavaScript完成操作过程。 document.querySelector document.querySelectorAll classList以及类的操作API Element.class…

LLM之RAG实战(二十九)| 探索RAG PDF解析

对于RAG来说,从文档中提取信息是一种不可避免的场景,确保从源文件中提取出有效的内容对于提高最终输出的质量至关重要。 文件解析过程在RAG中的位置如图1所示: 在实际工作中,非结构化数据比结构化数据丰富得多。如果这些海量数据无…

记录西门子:SCL设置不同顺序

一台搅拌的设备,需要控制三种料的进料顺序和进料重量,顺序和重量可以随便设定,也可以是几十种料。触摸屏上面有A、B、C三种液体原料,需要设定三种液体原料重量,并设定序号。 假设如下面所示设定:那将先打开…

java数据结构与算法刷题-----LeetCode90. 子集 II

java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/123063846 文章目录 解题思路:时间复杂度O( n 2 ∗ n n^2*n n2∗n),空间复杂度O(n) 7…
最新文章