4、Generator、class类、继承、Set、Map、Promise

news/2024/7/7 19:56:23

一、生成器函数Generator

1、声明generator函数

  • function* 函数名() { }
  • 调用生成器函数 需要next()
  • 返回一个generator对象，对象的原型上有一个next(),调用返回对象{value:yield后面的值,done}
function* fn() {
	console.log("我是生成器函数")
}
let item = fn()
console.log(item);//fn {<suspended>}
item.next()//我是生成器函数
image-20240311161912635

2、yield和return的区别

  • yield是暂停执行，调用next()方法继续执行
  • return结束执行

3、next()

  • yield和next()个数一样
function* fn() {
    console.log('我是生成器函数');
    yield '我是生成器函数2'
    console.log('我是生成器函数3');
    yield '我是生成器函数4'
    console.log('我是生成器函数5');
}
let item = fn()
console.log(item);//fn {<suspended>}
console.log(item.next());
//我是生成器函数 {value: '我是生成器函数2', done: false}
console.log(item.next())
//我是生成器函数3 {value: '我是生成器函数4', done: false}
console.log(item.next())
//我是生成器函数5 {value: undefined, done: true}

4、在生成器函数里面调用生成器函数，需要用yield*去调用

  • 可以传参，参数是上一个yield的返回值
function* fn_1() {
    console.log('fn_1');
}
function* fn_2() {
    console.log('fn_2');
}
function* fn_3() {
    console.log('fn_3');
}
function* fn_4() {
    yield* fn_1()
    yield* fn_2()
    yield* fn_3()
}
let it = fn_4()//fn_1  fn_2  fn_3

二、class类基本用法

1、class格式

  • static定义的只能类去调用
class 属性名 {
	//构造函数
	constructor () {
	}
	//自定义函数 

class Animal {
//构造函数
	constructor(name, age){
		this.name = name
		this.age = age
	}
	//自定义函数
	getName(value) {
        //this指向实例化对象
		console.log(this)
	}
	setName() {
		console.log(value)
		this.name = value
	}
    static getAge() {
        console.log(this)
    }
    let dog = new Animal('狗', 2)
 	console.log(dog);//Animal {name: '狗', age: 2}
	dog.setName("猫")//改名字为猫
	console.log(dog);//Animal {name: '猫', age: 2}
    // dog.getAge()//dog.getAge is not a function
    Animal.getAge()//static定义的只能类去调用
}

2、继承 extends

  • super指代父类
// 继承extends
class Cat extends Animal {
    constructor(name, age, color) {
        super(name, age)
        // 写在super下面 因为this指向问题
        this.color = color
    }
    getName_1() {
        console.log('getName_1');
        super.getName()
    }
}
let cat = new Cat('加菲', 3, 'yellow')
console.log(cat);//Cat {name: '加菲', age: 3, color: 'yellow'}
cat.getName()//Cat {name: '加菲', age: 3, color: 'yellow'}
cat.getName_1()//getName_1  Cat {name: '加菲', age: 3, color: 'yellow'}

三、set、map与模块化

1、set() 参数必须是可遍历对象，不能重复

  • set的类型是object
let set = new Set()
console.log(set);//Set(0)
console.log(typeof set);//object

let set = new Set([1, 2, 3, [1]])
console.log(set);//Set(4) {1, 2, 3, Array(1)}

  • set方法和属性

    • add()方法添加成员
let set = new Set([1, 2, 3, [1]])
set.add(4)
set.add(2)
console.log(set);//Set(5) {1, 2, 3, Array(1), 4}
  • size属性 成员的个数
console.log(set.size);//5
  • delete 删除属性 成功true 失败false
console.log(set.delete(2));//true
console.log(set);//Set(4) {1, 3, Array(1), 4}
  • clear()方法 清除所有成员
set.clear()
console.log(set);//Set(0) {size: 0}

  • has()方法 判断set结构中是否含有指定的值

    • 如果有，返回true 没有，返回false
//因为上面清空了  所以false
console.log(set.has(1));//false
  • ==enteries():==返回一个键值对的遍历器
 console.log(set.entries());//SetIterator {}
for (let [key, value] of set.entries()) {
   console.log(key);//1 3 [1] 4
   console.log(value);//1 3 [1] 4
}
  • == keys()返回键名的遍历器。==
for (let key of set.keys()) {
    console.log(key);1 3 [1] 4
}
  • values()返回键值的遍历器
for (let values of set.values()) {
    console.log(values);1 3 [1] 4
}
  • forEach()
set.forEach((item, index) => {
    // console.log(item);//1 3 [1] 4
    console.log(index);//1 3 [1] 4
})

  • 数组去重

let arr_2 = [1, 2, 3, 4, 5, 2, 3]
console.log(arr_2);//[1, 2, 3, 4, 5, 2, 3]
console.log(new Set(arr_2));// {1, 2, 3, 4, 5}
console.log(Array.from(new Set(arr_2)));// [1, 2, 3, 4, 5]
console.log([...new Set(arr_2)]);//[1, 2, 3, 4, 5]

  • WeakSet()

    • 参数必须是引用类型
    • WeakSet结构也提供了add( ) 方法，delete( ) 方法
    • has( )方法给开发者使用，作用与用法跟Set结构完全一致。
    • 不可以遍历对象 size entries keys values forEach没有
// let weak = new WeakSet([1, 2, 3])//Invalid value used in weak set
let weak = new WeakSet([{ name: "zs" }, [1, 2, 3], set])
console.log(weak);//WeakSet {Array(3), Set(4), object}

四、Map()

map声明

  • map是object类型
let map = new Map()
console.log(map);//Map(0) {size: 0}
console.log(typeof map);//object

2、参数是数组 [key,value]

let map = new Map([[1, 2], [{ name: 'zs' }], [4, 5], [{ name: "zs" }, function () { }]])
console.log(map);
//Map(4) {1 => 2, {…} => undefined, 4 => 5, {…} => ƒ}

3、方法

set(key,value) 设置键值对 添加到map里面

  • 给实例对象设置一对键值对，返回map
  • 相同的属性名 会替换之前的属性
let map = new Map([[4, 5]])
map.set(4, 6)
console.log(map);//Map(1) {4 => 6}

get()通过属性名获取 属性值

console.log(map.get(4));//6
console.log(map.get({ name: 'zs' }));
//undefined  因为地址不一样所以undefined
console.log(map.get("name"));//zs

let obj = { name: 'zs' }
let obj1 = { name: 'zs' }  
console.log(obj == obj1);//因为是引用类型 地址不一样  false

delete( )方法作用：删除指定的键值对，删除成功返回：true，否则返回：false。

console.log(map.delete(1));
console.log(map.delete({ name: 'zs' }));
console.log(map);//{'name' => 'zs', 4 => 6, {…} => ƒ, true => null}

clear( )方法，让你一次性删除所有键值对。

map.clear()
console.log(map)//Map(0) {size: 0}

has() 判断属性是否存在 有返回true 没有 false

entries( )方法作用：返回实例的键值对遍历器。

keys() 返回实例的键遍历器。

values() 返回实例的键遍历器。

forEach() 遍历

size：获取实例的成员数。

4、weakMap和map区别

key只能是引用类型的值

// key只能是引用类型的值
let wMap = new WeakMap([[{ name: "zs" }, 2]])
 console.log(wMap);//WeakMap {{…} => 2}
wMap.set([4], 5)
console.log(wMap);//WeakMap {{…} => 2, Array(1) => 5}

五、Promise对象（重点）

1、解决的问题

  • 回调地狱 回调函数的层层嵌套

2、声明Promise对象 （回调函数） （重点）

格式：

new Promise ((resolve,reject) => {})

三种状态

// 声明promise对象(回调函数)
let pro = new Promise((resolve, reject) => {
    console.log(resolve);//ƒ () { [native code] }
    $.ajax({
        url: 'https://wkt.myhope365.com/weChat/applet/course/banner/list?number=5',
        success(res) {
            resolve(res)
        }
   })
})
console.log(pro);//Promise {<pending>} 初始化等待中
  • pending 初始化等待中
  • fulfilled 成功
  • rejected 失败
    • 初始化===> 成功 初始化 ===> 失败（不可逆转）
    • pending ==> fulfilled pending ==> rejected (不可逆转的)
  • then 成功之后 resolve()
  • catch失败之后 reject()
  • pro.then( () => {} ).catch( () => {}) 链式调用
  • 下一个then方法的参数是上一个then的返回值

3、promise里面的then()是异步的

  • 用then处理操作成功，catch处理操作异常
let pro = new Promise(function (resolve, reject) {
    if (true) { //如果改为false  输出请求失败
        //调用操作成功方法
        resolve('操作成功');
    } else {
        //调用操作异常方法
        reject('操作异常');
    }
});
//用then处理操作成功，catch处理操作异常
// 下一个then方法的参数是上一个then的返回值
pro.then(requestA) //请求A成功
    .then(requestB)//上一步的结果：请求B，下一个就是你了 请求B成功
    .then(requestC)//上一步的结果：请求C，下一个就是你了  请求C成功
    .catch(requestError);
function requestA() {
    console.log('请求A成功');
    return '请求B，下一个就是你了';
}
function requestB(res) {
    console.log('上一步的结果：' + res);
    console.log('请求B成功');
    return '请求C，下一个就是你了';
}
function requestC(res) {
    console.log('上一步的结果：' + res);
    console.log('请求C成功');
}
function requestError() {
    console.log('请求失败');
}

4、promise.all() 参数是数组

  • 接受一个数组作为参数，数组里面是promise实例对象
  • 当参数中的==所有的实例对象的状态都成功(fulfilled)==的时候，才会返回
let pro1 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve('实例1操作成功');
    }, 5000);
});
//创建实例pro2
let pro2 = new Promise(function (resolve, reject) {
    setTimeout(function () {
        resolve('实例2操作成功');
    }, 1000);
});
Promise.all([pro1, pro2]).then(function (result) {
    console.log(result);//['实例1操作成功', '实例2操作成功']
});

5、Promise.race()参数是数组

  • 它的参数要求跟Promise.all( )方法一样，不同的是，它参数中的promise实例，
  • 只要有一个状态发生变化（不管是成功fulfilled还是异常rejected），它就会有返回，
let pro1 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve('实例1操作成功');
    }, 1000);
});
//创建实例pro2
let pro2 = new Promise(function (resolve, reject) {
    setTimeout(function () {
        reject('实例2操作失败');
    }, 2000);
});
Promise.race([pro1, pro2]).then(function (result) {
    console.log(result);
}).catch(error => {
    console.log(error);
});

image-20240311195005182


http://lihuaxi.xjx100.cn/news/2088268.html

相关文章

KY276 Problem C

KY276 Problem C

学会了处理1e9素数的新思路&#xff0c;但目前只供挑选最大质因子用 牛客刷题完结撒花&#xff01; 添加链接描述 #include<bits/stdc.h>using namespace std;#define int long long int n; string str;int zhi(int x){int ans 0;for(int i 2; i * i < x; i ){whi…
阅读更多...
wsl-oraclelinux 安装 cuda

wsl-oraclelinux 安装 cuda

wsl-oraclelinux 安装 cuda 1. 安装 cuda2. 安装 cuDNN3. 配置环境变量 1. 安装 cuda wget https://developer.download.nvidia.com/compute/cuda/12.4.0/local_installers/cuda_12.4.0_550.54.14_linux.run sudo sh cuda_12.4.0_550.54.14_linux.run2. 安装 cuDNN sudo dnf …
阅读更多...
力扣L6--- 两数之和（java版）--2024年3月12日

力扣L6--- 两数之和（java版）--2024年3月12日

1.题目 2.知识点 注1&#xff1a;在Java中&#xff0c;数组的长度不是通过调用一个方法获得的&#xff0c;而是通过一个属性直接获得的。因此&#xff0c;正确的语法是nums.length而不是nums.length()。 所以应该使用int m nums.length; 注2&#xff1a;return new int[]{i,…
阅读更多...
【力扣白嫖日记】1321.餐馆营业额变化增长

【力扣白嫖日记】1321.餐馆营业额变化增长

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 1321.餐馆营业额变化增长 表&#xff1a;Customer 列名类型cutomer_idintnamevarcharvisited_ondateamounti…
阅读更多...
Java中乱码浅析及解决方案

Java中乱码浅析及解决方案

在 Java 中出现乱码通常是由于字符编码不一致或不正确导致的。这种情况经常出现在处理文件、网络数据传输或数据库交互等场景下。以下是关于 Java 中乱码的浅析及解决方案&#xff1a; 1. 字符编码概念 字符编码&#xff1a;是一种将字符转换为字节的规则&#xff0c;常见的字…
阅读更多...
替换模板变量生成测试用例

替换模板变量生成测试用例

需求&#xff1a; 针对指标的查值有固定的文法例如 ${org_name}的业务量是多少&#xff0c;需要替换变量来生成测试用例 这个是最新的&#xff0c;把变量和列表放到map里面 package net.yto.com.testplatform;import com.alibaba.fastjson.JSON;import java.util.ArrayList; i…
阅读更多...
GitLab页面创建分支，并且本地idea切换新建分支后推送代码到远程仓库

GitLab页面创建分支，并且本地idea切换新建分支后推送代码到远程仓库

点开对应的项目 创建分支 创建分支 添加分支名称 创建好分支 idea开发工具从远程仓库切换分支 切换后的分支 推送到远程仓库
阅读更多...
el-form v-for循环列表的表单如何校验

el-form v-for循环列表的表单如何校验

1、普通的表单校验直接在最外层<el-form> :model"数据" :rules"规则" &#xff0c;再在<el-form-item>层设置prop值与model里数据定义的key保持一致即可。 <el-form-item label"名称" prop"ruleName" :rules"[{r…
阅读更多...
最新文章

Copyright @ 2022~2023