一、函数的拓展
函数传参与默认值
ES6函数的默认值：（x = 6）
默认值可以写表达式，表达式在函数执行阶段执行
//传参方式一
function foo(x = a + 6, y, z){
console.log(x, y, z);
}
let a = 10;
foo();
//传参方式二
function foo({x = 5, y = 6, z}){
console.log(x, y, z);
}
foo({z:3, x:1});
//传参方式三
function foo(...arr){
console.log(arguments);
console.log(arr);
}
foo(1, 2);
箭头函数
let foo = a => a; //最基础的箭头函数
//ES5函数的this指向是根据调用对象来绑定，this是执行时绑定
//ES6箭头函数的this是定义时绑定，绑定的是当前作用域下的this
foo(a){
return a;
}
//多个或者零个参数用()
//只有一个参数可以直接写参数名
//...接受没有被变量接受的所有参数
//this是定义时绑定的，无法改变
let foo = (a, b, c, d, ...arr) => {
console.log(this);
console.log(a, b, c, d, arr);
};
foo.call([], 1, 2, 3, 4); //无法改变this指向
let foo = a => a+1;
console.log(foo(2));
二、promise
let img = new Image();
img.src = "";
//图片加载完毕的时候执行
img.onload = function(){
document.body.appendChild(this);
codeImg(this);
}
function codeImg(img){
console.log(img.width);
}
实例化promise
进行中 成功 失败
rending fullfilled reject
new Promise((resolve, reject)=>{
let img = new Image();
img.src = "";
//加载完毕，执行成功的回调
img.onload = resolve(img);
//加载失败，执行失败的回调
img.onerror = reject;
setTimeout(()=>{
if(true){
//调用的是成功的回调，那么他的状态就是成功
resolve();
}else{
//反之就是失败
reject();
}
}, 3000);
})
//传参，可传两个回调 成功 失败
.then((img)=>{
console.log("成功");
})
//失败的时候回调
.catch((err)=>{
console.log(err);
});
三、promise例子
new Promise((resolve, reject)=>{
return resolve(6); //可以用来中断代码的执行
})
.then((d)=>{
console.log(d);
//return 3;
//等价于下面
return new Promise((resolve)=>{
resolve(3);
});
})
.then((key)=>{
console.log(key);
})
.then(()=>{
console.log(1);
})
.catch((err)=>{
console.log(err);
})
主动成功、主动失败
//主动返回成功
Promise.resolve(foo())
.then((d)=>{
console.log(d);
});
//主动返回失败
Promise.reject("失败")
.catch((err)=>{
console.log(err);
});
Promise.all 必须是所有的Promise状态都是成功的（调用了resolve）才会执行all的then的成功回调
//电影院推荐
//不同的用户群体 推荐 不同的电影类型
//获取用户是一个接口 获取电影是一个接口 推荐状态是一个接口
//获取用户群体
let p1 = new Promise((resolve)=>{
console.log("开始请求用户数据");
//code...后台去请求用户群体
setTimeout((arr)=>{
console.log("拿到用户数据了");
resolve(arr);
}, 1000, [1, 2, 3, 4, 5, 6]);
});
//获取电影集合
let p2 = new Promise((resolve, reject)=>{
console.log("开始请求电影集合");
//code...后台去请求电影集合
//setTimeout(resolve, 3000, [1000, 1001, 1002]);
setTimeout((arr)=>{
console.log("拿到电影集合了");
resolve(arr);
//reject("电影数据拿不到");
}, 3000, [1000, 1001, 1002]);
});
all 接受一个数组，数组里面都是promise对象，如果不是，会被转化成promise
Promise.all([p1,p2])
.then((arr)=>{
console.log(arr);
})
.catch((err)=>{
console.log(err);
})
race 只要一个成功就可以了
Promise.race([p1, p2)
.then(()=>{
console.log("某个请求已经成功");
})
四、async函数
Generator + Promise 的语法糖
async函数 await关键字
//在函数前面加上async关键字
async function foo(){
let img = await new Promise((resolve)=>{
let newImg = new Image();
newImg.src = "";
newImg.onload = function(){
resolve(this);
};
setTimeout(resolve, 3000, {
width:665
})
});
}
