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

一、生成器函数Generator

1、声明generator函数

function* 函数名() { }
调用生成器函数需要next()
返回一个generator对象，对象的原型上有一个next(),调用返回对象{value:yield后面的值,done}

function* fn() {console.log("我是生成器函数")
}
let item = fn()
console.log(item);//fn {<suspended>}
item.next()//我是生成器函数

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 = namethis.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 functionAnimal.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

set的作用：数组去重
格式 :

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] 4console.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] 4console.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);
});