目录
一、Promise
- 定义:执行异步任务,避免回调地狱
- 创建:
<script>
// Promise 主要做异步任务(需要时间等待)任务
// 小何对她承诺,明天我们我请你去吃海底捞
// 小何不能立即对象需要5000毫秒执行
var p = new Promise((resolve,reject)=>{
setTimeout(()=>{
var n = Math.random();
if(n>.5){
// 可以兑现
resolve("明我请你去吃海底捞")
}else{
// 拒绝
reject("不是说了吗?明天!")
}
},5000)
})
</script>
- 实例:
<script>
p.then(res=>{
console.log(res);
})
.catch(function(err){
console.log(err)
})
// .then 等待 凭据 p里面的 resolve执行
// .catch 等待 凭据p 里面的 reject执行
</script>
- 其他:
<script>
//等待异步列表中全部resolve执行
Promise.all([,,,])
.then()
</script>
<script>
//异步列表中最resolve的值
Promise.race([,,,])
.then()
</script>
- 封装Promise
<script> function say(msg,time){ return new Promise((resolve,reject)=>{ ... resolve(msg) }) } say("msg",500) .then(res=>{ console.log(res) return say("say",123) }) .then(res=>console.log(res)) </script>
二、异步与等待
- async:
<script>
// 用asyc装饰函数 返回的是promise对象
async function say(){
return "你好ES6"
}
say()
.then(res=>console.log(res))
</script>
- await:
<script>
// awiat 只能在aync函数里面
function say(msg,time){
return new Promise((resolve,reject)=>{
setTimeout(()=>resolve(msg),time)
})
}
// 2秒后说你好
// 3秒后说我很中意你
// 定义async函数
async function doit(){
// await会等待say函数执行完才会向下执行
var s1 = await say("你好",2000);
console.log(s1);
var s2 = await say("我很中意你",10000);
console.log(s2);
return s1+s2;
}
doit()
.then(res=>console.log(res))
</script>
三、Symbol
- 符号:
不重复
不可修改
- var sym = Symbol("标识")
- 可以使sym作为唯一的key或者标识符
eg:{sym:"abc"}
四、迭代器
- 可迭代对象都拥有迭代器(可以被for...of遍历对象,都是可迭代对象)
String
Array
Set
Map
- 获取迭代对象
<script> var arr = [2,6,8]; // 获取数组的迭代器 var iter = arr[Symbol.iterator](); </script>
- 通过next方法进行迭代
<script> iter.next(); //{value: 6, done: false} ... iter.next();//{value: undefined, done: true} </script>
五、生成器
- 普通函数前面添加*,通过yield关键字来控制生成,最终函数执行,返回一个可迭代元素;
eg:
<script>
// 生成一个生成器,range 参数start= 1,end=100;
// 创建一个可以迭代start 到end数
function *range(start,end,step){
while(start<end){
yield start;
start+=step;
}
}
//生成一个1-100的可迭代元素
var list = range(2,101,2);
//转换为数组
var arr = [...list];
console.log(arr);
// range 产生由start到end的一个可以迭代对象
for(var v of list){
console.log(v);
}
</script>
- 当函数执行到yield关键字会等待;
六、代理 Proxy
- 对原对象操作的劫持
eg:
<script>
// 定义对象obj
var obj = {
msg: "我喜欢Vue"
};
// 使用代理劫持obj
var o = new Proxy(obj, {
get(target, prop) {
return target[prop]
},
set(target, prop, value) {
target[prop] = value;
}
})
</script>
- p.msg 会执行get方法
- p.msg="abc"会执行set方法
- 我们可以在get和set方法里面做一些判断劫持等其他操作
- console.log(p.msg),获取p的msg值,执行p代理里面的get方法,return obj["msg"]
- p.msg="abc";设置p的msg值,执行p代理的set方法,obj["msg"]="abc";