湖北住房城乡建设厅网站,lnmp架构部署wordpress,邯郸邯山区网站建设,运动服装商城网站建设一、生成器函数Generator
1、声明generator函数
function* 函数名() { }调用生成器函数 需要next()返回一个generator对象#xff0c;对象的原型上有一个next(),调用返回对象{value:yield后面的值,done}
function* fn() {console.log(我是生成器函数)
}
let it…一、生成器函数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 我是生成器函数2console.log(我是生成器函数3);yield 我是生成器函数4console.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);//objectset的作用数组去重 格式 :
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);//5delete 删除属性 成功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));//falseenteries():返回一个键值对的遍历器 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);//object2、参数是数组 [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));//zslet obj { name: zs }
let obj1 { name: zs }
console.log(obj obj1);//因为是引用类型 地址不一样 falsedelete( )方法作用删除指定的键值对删除成功返回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?number5,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);
});
