1.set和weakset
// set()方法本身是构造函数
var a=new Set([1,2,3,4])//注意为中括号,里面内容可以为任意基本数据类型
console.log(a);//1234
// var b=new Set(1,23,3)
// console.log(b);//报错
var b=new Set()
b.add(null)
b.add(true)
b.add(3)
console.log(b);//不想用数组作为参数来传值初始化变量 这样是可以的
// add()添加方法
a.add(6)
console.log(a);//12346
// 注意成员的唯一性
a.add(1)
console.log(a);//12346
// size属性获取成员个数
console.log(a.size);//5
// delete()方法删除set中指定值
a.delete(1)
console.log(a);//2346
// clear()方法清空set中内容
// a.clear()
console.log(a);//size=0
// has()方法判断set中是否含有指定的值
console.log(a.has(9));//false
// entries( )方法:返回一个键值对的遍历器
console.log(a.entries());//key和values值一样
// keys( )方法:返回键名的遍历器。
console.log(a.keys());//2346
// values( )方法:返回键值的遍历器。
console.log(a.values());//2346
// forEach( )方法:遍历每一个成员
a.forEach((item,index)=>{
console.log(item);
console.log(index);
})
// 数组去重
let arr=[1,2,3,1,2,1]
let Arr=new Set(arr)
console.log(Arr);
// WeakSet结构
// WeakSet结构同样不会存储重复的值,不同的是,它的成员必须是对象类型的值。
let ws=new WeakSet([{name:'zs'}])//注意也在[]中
console.log(ws);//weakset{{}}
// 任何可遍历的对象,都可以作为WeakSet的初始化参数
let a1=[1]
let b1=[2]
let ww=new WeakSet([a1,b1])
console.log(ww);//weakset{array(1),array(1)}
// WeakSet 结构不可遍历
// add,delete,clear,has,entries,keys,values方法与set一样
2.map和weakmap
// Map( )方法里面的参数,首先它是一个数组,而里面的内容也是由多个数组组成
let m = new Map([
['name', 'zs'],//注意需加引号
['age', 18]
])
console.log(m);
//基本数据类型都可以作为参数,添加建值
m.set('color', 'pink')
m.set([1, 2], [2, 3])
console.log(m);
// 使用set方法的时候有一点需要注意,如果你设置一个已经存在的键名,那么后面的键值会覆盖前面的键值
m.set('color', 'white')
console.log(m);
// get()方法获取指定键名的键值,返回键值
console.log(m.get('color'));
// delete( )方法作用:删除指定的键值对,删除成功返回:true,否则返回:false
console.log(m.delete('hhh'));
console.log(m.delete('age'));
console.log(m);
// clear方法 一次性删除所有键值对
// m.clear()
// console.log(m);
// has( )方法作用:判断Map实例内是否含有指定的键值对,有就返回:true,否则返回:false。
console.log(m.has('color'));//true
// entries( )方法作用:返回实例的键值对遍历器。
for (let [key, value] of m.entries()) {
console.log(key + ' ' + value);
}
// keys()方法:返回实例所有键名的遍历器。
// values() 方法:返回实例所有键值的遍历器。
// forEach遍历每一个键值对
// size:获取实例的成员数
console.log(m.size);//注意size不是函数为属性
// WeakMap结构的使用方式和Map结构一样
// 使用set方法,不过键名的类型必须要求是引用类型的值
let wm = new WeakMap();
//数组类型的键名
wm.set([1], 2);
//对象类型的键名
wm.set({ 'name': 'zs' }, 2);
//函数类型的键名
function fn() { };
wm.set(fn, 2);
console.log(wm);
//打印:WeakMap {
// [1] => 2,
// Object { name: "zs" } => 2,
// function => 2
// }
// WeakMap与Map的区别?
// Map允许基本数据类型,weakmap允许引用数据类型,基本数据类型不可以
// WeakMap不支持clear方法,不支持遍历,也就没有了keys、values、entries、forEach这4个方法,也没有属性size。
3.Promise对象
// 参数是一个匿名函数,其中有两个参数:resolve(解决)和reject(拒绝),两个函数均为方法。resolve方法用于处理异步操作成功后业务;reject方法用于操作异步操作失败后的业务。
let one = new Promise((res, rej) => { })
// Promise对象有三种状态:
// 1.pending:刚刚创建一个Promise实例的时候,表示初始状态;
// 2.fulfilled:resolve方法调用的时候,表示操作成功;
// 3.rejected:reject方法调用的时候,表示操作失败;
// 注意:
// 状态只能从 初始化 -> 成功 或者 初始化 -> 失败,不能逆向转换,也不能在成功fulfilled 和失败rejected之间转换。
let pro = new Promise((res, rej) => {
//实例化后状态:pending
if ('操作成功') {
res();
//resolve方法调用,状态为:fulfilled
} else {
rej();
//reject方法调用,状态为:rejected
}
});
console.log(pro);//Promise {<fulfilled>: undefined}
// then( )方法:用于绑定处理操作后的处理程序。
// 参数是两个函数,第一个用于处理操作成功后的业务,第二个用于处理操作异常后的业务
pro.then(function (res) {
//操作成功的处理程序
}, function (error) {
//操作失败的处理程序
});
// catch只接受一个参数,用于处理操作异常后的业务。
pro.catch(function (error) {
//操作失败的处理程序
});
//所以这两个方法可以联用
pro.then(function (res) {
//操作成功的处理程序
}).catch(function (error) {
//操作失败的处理程序
});
// 需要注意的是then和catch方法返回的都为promise对象
//用new关键字创建一个Promise实例
let pro1 = new Promise((resolve, reject) => {
//假设condition的值为true
let flag = false;
if (flag) {
//调用操作成功方法
resolve('操作成功');//需要与参数名相同
//状态:pending->fulfilled
} else {
//调用操作异常方法
reject('异常');
//状态:pending->rejected
}
});
//用then处理操作成功,catch处理操作异常
pro1.then((res) => {
//参数可随意定义 重点在与then方法
//操作成功的处理程序
console.log(res)
}).catch((error) => {
//操作失败的处理程序
console.log(error)
// reject('操作异常');
});
console.log(pro1);
let pro2 = new Promise(function (resolve, reject) {
if (false) {
//调用操作成功方法
resolve('操作成功');
} else {
//调用操作异常方法
reject('操作异常');
}
});
// function requestA() {
// console.log('请求A成功');
// return '请求B,下一个就是你了';
// }
// function requestB(res) { //参数为上一个then方法的返回值
// console.log('上一步的结果:' + res);
// console.log('请求B成功');
// return '请求C,下一个就是你了';
// }
// function requestC(res) {
// console.log('上一步的结果:' + res);
// console.log('请求C成功');
// }
function requestError() {
console.log('请求失败');
}
//用then处理操作成功,catch处理操作异常
// pro2.then(requestA)
// .then(requestB)
// .then(requestC)
pro2.catch(requestError)
console.log(pro2);
// 回调地狱;指的是过多地使用回调函数嵌套
// Promise.all( )方法:接受一个数组作为参数,数组的元素是Promise实例对象,当参数中的实例对象的状态都为fulfilled时,Promise.all( )才会有返回
//创建实例pro1
let cat1 = new Promise(function (resolve) {
setTimeout(function () {
resolve('我是猫1');
}, 5000);
});
//创建实例pro2
let cat2 = new Promise(function (resolve) {
setTimeout(function () {
resolve('我是猫2');
}, 1000);
});
// 同步显示,1s会等5s,在5s一起显示
Promise.all([cat1, cat2]).then((result)=> {//result为返回值
console.log(result);
});
// Promise.race()方法 只要有一个状态发生变化(不管是成功fulfilled还是异常rejected),它就会有返回
//创建实例pro1
let cat3 = new Promise(function (resolve) {
setTimeout(function () {
resolve('我是猫1');
}, 5000);
});
//创建实例pro2
let cat4 = new Promise(function (resolve) {
setTimeout(function () {
resolve('我是猫2');
}, 1000);
});
//1s不会等5s,cat4先显示
Promise.race([cat3, cat4]).then((result)=> {//result为返回值
console.log(result);
});
4.async和await
async用于申明一个function是异步的,返回一个promise对象,而await可以认为是async wait的简写,等待一个异步方法执行完成。async必须声明的是一个function,await必须在声明的函数内部使用
async function demo() {
setTimeout(() => {
console.log('11111');
}, 3000)
return '222222'
}
demo()
demo().then(res => {
console.log(res);
})
console.log(demo);
// async ƒ demo(){
// setTimeout(()=>{
// console.log('11111');
// },1000)
// return '222222'
// }
// Async和await.html:21 222222
// 2Async和await.html:15 11111
// await 等待promise对象,但不需then方法,直接可以得到返回值
async function demo1() {
let test = await Promise.resolve('哈哈哈哈')
console.log(test);
}
demo1()
// 相对的把回调“纵向发展”了,形成了一个回调链 只会打印一个
function sleep(wait) {
return new Promise((res, rej) => {
setTimeout(() => {
res(wait);
}, wait);
});
}
/*
let p1 = sleep(100);
let p2 = sleep(200);
let p =*/
sleep(100).then(result => {//result 100 上一次返回值
return sleep(result + 100);
}).then(result02 => {//result02 200
return sleep(result02 + 100);
}).then(result03 => {
console.log(result03);
})
sleep()
// 后面的结果都是依赖前面的结果,await是强制把异步变成了同步,这一句代码执行完,才会执行下一句
// async function demo() {
// let result01 = await sleep(100);
// //上一个await执行之后才会执行下一句
// let result02 = await sleep(result01 + 100);
// let result03 = await sleep(result02 + 100);
// // console.log(result03);
// return result03;
// }
// demo().then(result => {
// console.log(result);
// });
// demo()
//300
//300
//300