常用的es6
1.箭头函数
普通函数取决于谁调用它,它的this就指向谁,并不是固定的(普通函数this指向取决于调用)
//简写注意
1.如果有且仅有一个参数,()可以不写
2.如果有且仅有一个语句并且是return,{}可以不写
箭头函数的this指向由它所在的执行上下文中的this所改变 也可以说是外层函数 说执行上下文其实更体现出 箭头函数的this是在外层函数执行前一刻所得知的 而这个外层函数的this又是取决于怎么调用他的 所以箭头函数的this虽然不能直接变更 但是可以间接通过改变外层函数的this来改变箭头函数的this call或apply bind都可以改变外层函数this指向(箭头函数this指向取决于定义)
var fun1 = function() {
console.log(this);
};
var fun2 = () => console.log(this);
// setTimeout(fun2,100);
document.onclick = fun2;
fun1.call(1);
fun1();
2.变量和常量(let const)
1.不可重复声明
let和const有效解决了var可重复声明带来的问题,let和const不可重复声明
2.控制修改
let是变量可修改,const不可修改,是定义的常量
3.作用域
var声明的是函数级作用域(在if或者for循环中声明的变量会泄露成全局变量,内层变量可能会覆盖外层变量)
let是块级作用域(花括号内有效,超出当前花括号就是未定义)
3.解构赋值
// let {a,b} = {a:11,b:12}
// console.log(a);
// let [c,d] = [0,1]
// console.log(c);
//注意事项
//1.两边解构要相同
// let {a,b} = [12,5]
// console.log(a);
//2.右边必须得是正确的数据类型
// let {a,b} = {11,12}
// console.log(a);
//3.解构和赋值要同时完成
// let {a,b};
// {a,b} = {a:11,b:12}
// console.log(a);
4.剩余参数
//剩余参数必须放在后面,是最后一个参数(1.收集2.展开)
```
let show = (a,b,...c) =>{
console.log(a,b,c)
}
show(1,2,3,4,5);//输出1 2 (3) [3, 4, 5](收集剩余的传值到最后一个参数)
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr = [...arr1,...arr2];
console.log(arr)//输出(6) [1, 2, 3, 4, 5, 6](把数组展开了)
let json = {a:1,b:2}
let json1 = {
...json,
d:999
}
console.log(json1)//输出{a: 1, b: 2, d: 999}
```
5.原生对象扩展
1.map 映射(一一对应)
let arr= [66,88,99,12,60];
let arr1 = arr.map(item => item>60?'及格':'不及格');
console.log(arr1);//输出["及格", "及格", "及格", "不及格", "不及格"]
2.reduce 缩减
let arr= [66,88,99,12,60];
let result = arr.reduce((tmp,item,index) => {//tmp表示上一次调用回调返回的值，或者是提供的初始值,也就是return的值,item当前要被处理的值,index当前处理值的下标
console.log(tmp+'----'+item+'------'+index);
//0----66------0
// 66----88------1
// 154----99------2
// 253----12------3
// 265----60------4
return tmp+item;
},0)//注意这里设置了初始值,如果不设置初始值index会跳过第一个索引
console.log(result);//输出325
3.filter 过滤
let arr= [66,88,99,12,60];
let arr1 = arr.filter(item => {
if(item>60){
return true;
}
})
console.log(arr1);//输出[66, 88, 99]
4.forEach 遍历
let arr= [66,88,99,12,60];
arr.forEach((item, index) => {
console.log(`数组的第${index}个值是${item}`)//字符串模板
})
6.Promise
1.回调函数概念
同步回调
定义:立即执行,,完全执行完了才结束,不会放入回调队列中
举例：数组遍历相关的回调 / Promise的excutor函数
异步回调
不会立即执行,会放到回调队列中将来执行
举例：定时器回调 / ajax回调 / Promise成功或失败的回调
2.Promise的理解
1.Promise是JS进行异步编程的解决方案,语法上来说它是一个构造函数,功能上来说Promise对象用来封装一个异步操作并可以获取其结果
2.Promise有三种状态(初始pending 成功resolved 失败rejected),且一个promise对象只能改变一次,无论成功还是失败,都会有一个结果数据,成功的结果数据一般称之为value,失败的结果数据一般称之为reason
3.Promise的基本流程是
then返回一个新的 promise
4.promise的基本使用
5.为什么要使用promise,
5.1指定回调函数的方式更加灵活,不管在异步任务开始前后还是异步任务取得结果前后指定回调函数
5.2.支持链式调用，可以解决回调地狱问题
5.3.多个串联的异步操作，就会出现回调地狱，通常还以上个回调函数的结果进行处理,回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件
6.怎么使用promise
6.1->
Promise 构造函数：Promise(excutor) {}
excutor 函数：同步执行 (resolve, reject) => {}
resolve 函数：内部定义成功时调用的函数 value => {}
resolve 函数：内部定义失败时调用的函数 reason => {}
说明：excutor 是执行器，会在 Promise 内部立即同步回调，异步操作 resolve/reject 则在 excutor 中执行 Promise.prototype.then 方法：(onResolved, onRejected) => {}
6.2->
onResolved 函数：成功的回调函数 (value) => {}
onRejected 函数：失败的回调函数 (reason) => {}
说明：指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调返回一个新的 promise 对象
6.3->
Promise.prototype.catch 方法：(onRejected) => {}
onRejected 函数：失败的回调函数 (reason) => {}
说明：then()的语法糖，相当于 then(undefined, onRejected)
6.4->
Promise.resolve 方法：(value) => {}
value：成功的数据或 promise 对象
说明：返回一个成功/失败的 promise 对象
6.5->
Promise.reject 方法：(reason) => {}
reason：失败的原因
说明：返回一个失败的 promise 对象
6.6->
Promise.all 方法：(promises) => {}
promises：包含 n 个 promise 的数组
说明：返回一个新的 promise，只有所有的 promise 都成功才成功，只要有一个失败了就直接失败
6.7->
Promise.race方法：(Promises) => {}
promises：包含 n 个 promise 的数组
说明：返回一个新的 promise，第一个完成的 promise 的结果状态就是最终的结果状态
7.Promise的几个关键问题
7.1.如何改变promise的值
内部定义成功或者失败时调用的resolve或reject可以改变promise的状态
抛出异常:throw new Error()promise的状态变为rejected
7.2 一个promise指定多个成功/失败的回调函数都会调用吗?
当promise改变为对应状态时都会被调用
7.3.promise.then() 返回的新 promise 的结果状态由什么决定
简单表达：由 then() 指定的回调函数执行的结果决定
① 如果抛出异常，新 promise 变为 rejected，reason 为抛出的异常(throw new Error())
② 如果返回的是非 promise 的任意值，新 promise 变为 resolved，value 为返回的值(return 2)
③ 如果返回的是另一个新 promise，此 promise 的结果就会成为新 promise 的结果(return Promise.resolve(3)或者return Promise.reject(4))
7.4.promise的异常穿透是什么情况
当使用了promise的then()链式调用时,不管中间有多少个then(),都可以在链式最后使用catch()回调,只要前面的任何操作出现了异常,都会传到最后失败的catch()回调中处理
7.5如何中断promise链
当使用 promise 的 then 链式调用时，在中间中断，不再调用后面的回调函数可以在回调函数中返回一个 pending 状态的 promise 对象(return newPromise(()=>{})// 返回一个pending的promise)
8.JS异步之宏队列与微队列
8.1 JS 中用来存储待执行回调函数的队列包含2个不同特定的队列
8.2 宏队列：用来保存待执行的宏任务（回调），比如：定时器回调/DOM 时间回调/ajax 回调
8.3 微队列：用来保存待执行的微任务（回调），比如：promise 的回调/MutationObserver 的回调
8.4 JS 执行时会区别这2个队列
JS 引擎首先必须执行所有的初始化同步任务代码
每次准备取出第一个宏任务前，都要将所有的微任务一个一个取出来执行
7.async/await
