1.let和const
let和const在块级作用域内有效,不会污染全局变量,都存在暂时性死区,只能先声明再使用,且不能重复声明
const声明的是常量(指的是常量对应的内存地址不得改变),必须赋值,只读,但对于对象、数组,里面的值可以改变
let使用经典案例:let命令代替闭包功能
var arr = []
for(var i=0;i<2;i++){
arr[i] = (function(i){
return function(){
console.log(i)
}
}())
}
let实现
var arr = []
for(let i=0;i<2;i++){
arr[i] = function(){
console.log(i)
}
}
arr[1]()
结果都是1
2.模板字符串
var name = 'qzx'
console.log(`我是${name}`)
输出:我是qzx
3.解构赋值
赋值:let [a,b,c] = [1,2,3]
交换变量:[x,y] = [y,x]
提取后台返回的json数据:let {data} = res等同于let data = res.data
4.扩展运算符
浅拷贝数组:let newArr = [...arr]
合并数组:[...arr,...newArr]
5.Promise
5.1Promise的基本使用
1三种状态
pending resolvedrejected
2变化
pending->resolved
pending->rejected
3状态的表现
pending不会触发任何回调
fufilled会触发then回调
rejected会触发catch回调
4then和catch改变状态
then正常返回resolved,里面报错返回rejected
catch正常返回resolved,里面报错返回rejected
// 第一种写法 常见
new Promise((resolve, reject) => {
setTimeout(() => {
// 第一次网络请求的代码
// 成功 --> then
resolve("success");
// 失败 --> catch
reject("fail");
}, 5000);
}).then((data) => {
// 第一次处理的代码(成功)
console.log(data);
}).catch((err) => {
// 第一次处理的代码(失败)
console.log(err);
});
// 第二种写法 了解
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success1')
reject('fail1')
}, 5000)
}).then(data => {
console.log(data)
}, err => {
console.log(err)
})
5.2Promise的链式调用
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('resolve1')
}, 1000)
}).then(data => {
console.log(data)
// 第一种
// return new Promise((resolve, reject) => {
// setTimeout(() => {
// resolve('1resolve2')
// }, 1000)
// })
// 第二种
// return Promise.resolve('2resolve2')
// 第三种
return '3resolve2'
}).then(data => {
console.log(data)
// return new Promise((resolve, reject) => {
// resolve('1resolve3')
// })
// return Promise.resolve('2resolve3')
return '3resolve3'
}).then(data => {
console.log(data)
})
结果:
resolve1
3resolve2
3resolve3
5.3Pomise.all()
Promise.all([
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('res1')
}, 1000)
}),
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('res2')
})
}, 3000)
]).then(results => {
console.log(results);
})
结果:['res1','res2']
6.async await
异步回调的终极解决方案
1.直接调用
2.语义化
3.返回值是Promise
7.箭头函数
普通函数的this指向的是调用它的对象