学习日志
三月11日
一，generator函数
1，声明 Generator函数
💡function后面加个 *
function* fn(){
console.log("我是生成器函数")
yield '我是生成器函数2'
}
2，调用Generator函数
💡调用生成器函数 需要next()
let item = fn()
console.log(item)// 返回一个generator对象，对象的原型上有一个next(),调用返回对象{value:yield后面的值,done}
console.log(item.next());
//我是生成器函数
//{value: '我是生成器函数2', done: false}
3，yield语句的使用
💡yield和return的区别
yield：暂停执行，调用next()继续执行
return：结束执行
function* fn() {
console.log('我是生成器函数');
yield '我是生成器函数2'
console.log('我是生成器函数3');
yield '我是生成器函数4'
console.log('我是生成器函数5');
}
let a = fn()
console.log(a.next()) // 我是生成器函数 {value: '我是生成器函数2', done: false}
console.log(a.next()) // 我是生成器函数3 {value: '我是生成器函数4', done: false}
a.next() // 我是生成器函数5
4，next方法接收参数
💡next( )方法还可以接受一个参数，它的参数会作为上一个yield的返回值
function* fn(){
let a = yield '123'
let b = yield a
}
let fn_1 = fn()
console.log(fn_1.next()); // {value: '123', done: false}
console.log(fn_1.next('456')); // {value: '456', done: false}
5，关键字‘yield*’
💡在一个Generator函数里面，如果我们想调用另一个Generator函数，就需要用到的关键字是：yield*
function* fn(){
yield "123"
yield "abc"
}
function* fn_1(){
yield "456"
yield "def"
}
function* fn_2(){
yield* fn()
yield* fn_1()
yield "789"
yield "ghi"
}
let a = fn_2()
console.log(a.next()); // {value: '123', done: false}
console.log(a.next()); // {value: 'abc', done: false}
console.log(a.next()); // {value: '465', done: false}
console.log(a.next()); // {value: 'def', done: false}
console.log(a.next()); // {value: '789', done: false}
console.log(a.next()); // {value: 'ghi', done: false}
Generator函数的用途：
可以控制函数的内部状态，依次遍历每个状态；可以根据需要，轻松地让函数暂停执行或者继续执行。
根据这个特点，我们可以利用Generator函数来实现异步操作的效果。
原理是：利用Generator函数暂停执行的作用，可以将异步操作的语句写到yield后面，通过执行next方法进行回调。
二，类基本用法
1，类的属性和方法
💡声明一个类的写法
class Animal {
constructor(name){
this.name = name
}
}
🙈 通过关键字class来声明一个名字叫Animal的类，可以看到类里面（花括号 {}里面）有一个叫constructor
（构造、建造）方法，它就是构造方法，构造方法里面的this，指向的是该类实例化后的对象，这就是实现了一个类的声明。
💟其中，构造方法constructor是一个类必须要有的方法，默认返回实例对象；
❤️创建类的实例对象的时候，会调用此方法来初始化实例对象。
❤️🩹如果你没有编写constructor方法，执行的时候也会被加上一个默认的空的constructor方法。
2，类的自定义方法
🙈我们把类名后面的括号{ }里面的内容称之为类体,我们会在类体内来编写类的属性和方法。
🙉其中constructor方法是构造方法，在实例化一个类的时候被调用。
🙊constructor方法是必须的，也是唯一的，
🐵我们可以在方法里面自定义一些对象的属性
class Animal {
constructor(name){
this.name = name
}
getname(){
console.log(this.name);
console.log(this);//构造方法里面的this，指向的是该类实例化后的对象
}
}
3，类的实例化对象
注意事项：
1.必须使用new创建字来创建类的实例对象
2.先声明定义类，再创建实例，否则会报错
class Animal {
constructor(name){
this.name = name
}
getname(){
return console.log(`这是${ren.name}`);
}
}
let ren =new Animal("一个人")
console.log(ren.name);// 一个人
ren.getname() //这是一个人
4，类的静态方法
如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”
class Animal {
constructor(name){
this.name = name
}
static getAge() {
console.dir(this);//this指向本身 class Animal
}
}
Animal.getAge() //类的静态方法可以被类直接调用
5，类的继承
使用extends关键字来实现子类继承父类
关键字super，它相当于是父类中的this
❗使用super有几个要注意的事项：
子类必须在constructor方法中调用super方法
调用super( )，才可以使用this，否则报错
class Animal { //父类
constructor(name, age) {
this.name = name
this.age = age
}
getName() {
console.log(`有只猫叫${this.name}，是一只${this.color}颜色的猫，它${this.age}岁了`);
}
}
class Cat extends Animal { //子类Cat继承父类Animal 的属性和方法
constructor(name, age, color) {
// super 指代的父类
super(name, age)
// 写在super下面 因为this指向问题
this.color = color
}
}
let cat = new Cat('加菲', 3, 'yellow') //给子元素Cat传值
cat.getName() //调用父元素的方法
//输出 有只猫叫加菲，是一只yellow颜色的猫，它3岁了
在父类中，我们定义了方法，想要在子类中调用父类的方法的话，我们使用super.方法( )即可实现。
三，Set 和 WeakSet用法
1.Set的用法
什么是set
Set是ES6给开发者带来的一种新的数据结构，你可以理解为值的集合。
我们平时见到的数组Array也是一种数据结构，但是Set跟其他数据结构不同的地方就在于：它的值不会有重复项。
1.1 set的基本用法
Set的用法：👇
var y = new Set()
console.log(y)// Set(0) {size: 0}
Set本身是一个构造函数，你可以理解为一个类，使用的时候需要用new来创建一个实例。
用数组[ 1,2,3 ]作为参数传入，得到的变量s为Set { 1, 2, 3 }
var y = new Set([1,2,3])
console.log(y)//Set(3) {1, 2, 3}
如果你不想用数组作为参数来传值初始化变量s，你还可以通过Set 结构提供的add方法来添加方法
var y = new Set();
y.add(1);
y.add(2);
y.add(3);
console.log(y);//Set(3) {1, 2, 3}
1.2 成员值唯一
😊为Set 结构添加成员值的时候，要注意一点是，set结构的成员值是没有重复的，每个值都是唯一的
😒set结构会自动忽略相同的值，只会保留一个相同的值
var y = new Set();
y.add(1);
y.add(1);
console.log(y);//Set(1) {1}
1.3 size属性
🤷♂️size属性：获取成员的个数
var y = new Set([1,2,3])
y.size // 3
1.4 delete属性
🤦♂️delete( )方法：用户删除Set结构中的指定值，删除成功返回：true，删除失败返回：fasle。
var y = new Set([1,2,3])
y.delete(2)//true
y.delete(6)//false
console.log(y) //Set(2) {1, 3}
1.5 clear方法
👌clear( )方法：清除所有成员
var y = new Set([1,2,3])
y.clear()
console.log(y) //Set(0) {size: 0}
1.6 has方法
😘has( )方法：判断set结构中是否含有指定的值。如果有，返回true；如果没有，返回fasle。
var y = new Set([1,2,3])
y.has(1)//true
y.has(4)//false
1.7 enteries方法
👍entries( )方法：返回一个键值对的遍历器。
var y = new Set([1,2,3])
console.log(y.entries());//SetIterator {1 => 1, 2 => 2, 3 => 3}
😎得到的结果，成员值“a”对应的键值对是 [1 => 1] ，也就是说：Set结构是键名和键值是同一个值。
1.8 keys和values方法
keys( )方法：返回键名的遍历器。
values( )方法：返回键值的遍历器。
var y = new Set([1,2,3])
y.keys() //SetIterator {1, 2, 3}
y.values() //SetIterator {1, 2, 3}
1.9 forEach方法
😗forEach( )方法：遍历每一个成员。
var y = new Set([1,2,3])
y.forEach(function(value,key){
console.log(value,key);
})
// 1 1
// 2 2
// 3 3
1.10 set用途之一
🫥 功能之一去重
let arr = [1,1,1,2,2,2,3,3,3,4,4,4]
var y = new Set(arr)
let arr_1=Array.from(y)
console.log(arr_1) //[1, 2, 3, 4]
2.WeakSet的用法
WeakSet结构同样不会存储重复的值，不同的是，它的成员必须是引用类型。
任何可遍历的对象，都可以作为WeakSet的初始化参数。
2.1 Weakset结构
var y = new WeakSet([{name: "xw"}])
console.log(y);
四，Map 和 WeakMap 用法
1.Map的用法
2.WeakMap的用法
五，Promise 用法
Promise设计初衷:
解决回调函数层层嵌套（又称：回调地狱）的形式存在缺点
Promise基本用法
😎基本用法：promise 承诺
🐵参数是一个匿名函数，其中有两个参数：resolve(解决)和reject(拒绝)，两个函数均为方法
😗resolve方法用于处理异步操作成功后业务；reject方法用于操作异步操作失败后的业务。
let pro = new Promise(function(resolve,reject){
});
Promise的三种状态
❗Promise对象有三种状态：
pending：刚刚创建一个Promise实例的时候，表示初始状态；等待
fulfilled：resolve方法调用的时候，表示操作成功；
rejected：reject方法调用的时候，表示操作失败；
十
❗状态只能从 初始化 -> 成功 或者 初始化 -> 失败，不能逆向转换，也不能在成功fulfilled 和失败rejected之间转换。
let pro = new Promise(function(resolve,reject){
//Promise {<pending>}
if("操作成功或者操作失败"){
resolve() //{<fulfilled>: undefined} 成功执行resolve()之后
}else{
reject() //{<rejected>: undefined} 失败执行reject()之后
}
});
❗初始化实例后，对象的状态就变成了pending；当resolve方法被调用的时候，状态就变成了：成功fulfilled；当reject方法被调用的时候，状态就会有pending变成失败rejected。
Then方法
操作成功的处理程序 --是异步的
❗❗❗❗❗❗下一个then方法的参数是上一个then的返回值
let pro = new Promise(function(resolve,reject){
resolve("执行成功"); //比如执行成功
});
pro.then(function(res){ //操作成功的处理程序
console.log(res); //输出 执行成功
})
Catch方法
操作失败的处理程序 --是异步的
catch只接受一个参数，用于处理操作异常后的业务。
let pro = new Promise(function(resolve,reject){
reject("执行失败"); //比如执行失败
});
pro.then(function(res){
console.log(res);
}).catch(function(error){ //操作失败的处理程序
console.log(error); //输出 执行失败
})
Promise.all方法
Promise.all( )方法：接受一个数组作为参数，数组的元素是Promise实例对象，当参数中的实例对象的状态都为fulfilled时，Promise.all( )才会有返回。
let pro =new Promise(function(resolve){
setTimeout(function(){
resolve('实例1操作成功');
},1000)
})
let pro2 =new Promise(function(resolve){
setTimeout(function(){
resolve('实例2操作成功');
},3000)
})
Promise.all([pro,pro2]).then(function(result){
console.log(result); //['实例1操作成功', '实例2操作成功']
})
Promise.race方法
🫥Promise.race()方法：它的参数要求跟Promise.all( )方法一样，不同的是，它参数中的promise实例，只要有一个状态发生变化（不管是成功fulfilled还是异常rejected），它就会有返回，其他实例中再发生变化，它也不管了
let pro = new Promise(function (resolve) {
setTimeout(function () {
resolve('实例1操作成功');
}, 2000)
})
let pro2 = new Promise(function (reject) {
setTimeout(function () {
reject('实例2操作失败');
}, 3000)
})
Promise.race([pro,pro2]).then(function(result,reject){
console.log(result);
}).catch(function(error){
console.log(error);
})
1286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
