无所事事的样子开始了摸鱼的一天
ES2016 新特性
数组的 includes(str) 查询数组内是否有str值 返回的是boolean类型
原本用的是indexOf() 返回的是数值类型,不便于判断
数学运算符 次幂运算原本是
Math.pow(2,10); //1024
现在可写为 2 ** 10; //1024
ES2017 新特性
Object.values(); // 返回遍历对象的value值,返回的数组类型数据
Object.entries(); // 遍历对象,返回的数组类型数据,每组数据为长度为2的数组,下标0为key值,下标1为value值
console.log(new Map(Object.entries(obj)))
padEnd() padStart() // 在字符串开头/结尾添加活修改字符,可指定修改后的字符串长度
同步/异步模式
- 同步模式
代码运行的顺序与代码编写的顺序运行方式相同
- (ps:就和工作流差不多的亚子,如果一行代码出错,剩下的操作就都无法执行了,就有了异步操作)
- 异步模式
js是单线程的,浏览器并不是单线程的。
- 只是下达这个任务,并不会在这行等待代码运行的结束。
- 异步的任务执行完会放到一个消息队列内,消息队列可以看做一个待办的工作表,等调用栈里面的所有任务执行完才会执行消息队列内的工作。
ES2015 Promise
// 这是啥呢?它其实就是一份协议、合同、承诺。(ps:签订契约吧,马猴烧酒)
// 既然是承诺这些东西,就会存在成功与失败的情况。
const promise = new Promise(function(resolve,reject){
// 兑现承诺
resolve(1); // 完成承诺
reject(new Error('失败的原因')); // 承诺失败
// 只会调用一种情况哈,咋可能又成功又失败呢,又不玩哲学的
})
promise.then(fuction(value){
console.log('resolved',value);
},function(err){
console.log('rejected',err);
})
// then 内的函数是异步任务,要先运行完同步代码才能运行里面哦。
// promise不要嵌套使用哦,可以使用链式调用的方式来实现嵌套使用的功能。
// return 返回的是个promise对象就可以使用链式调用。
// 如果返回的是个字符串等,则会直接作为value参数传给后边的then内的函数。
// 要注意的是如果某一条返回的是reject 则会直接执行错误处理的catch回调。
// catch是一整条链式调用的异常捕获,每个then函数内的第二个参数reject的回调函数,可针对每个调用设定异常捕获。
// 开发过程中一般是直接用catch的,毕竟都是期望代码能运行的,错一个接口都是有问题的,所以一般是统一处理
// 如果是需求需要每个都要处理的话,当然还是要用reject的。
promise.all()
// 将多个promise异步任务执行后返回promise对象,只有里面的任务都执行成功才能执行成功,如果有一个失败都会执行失败的返回
// all() 会等待所有的任务都成功执行结束
ajax('urlList.json')
.then(value =>{
const tasks = Object.values(value).map(url => ajax(url));
return Promise.all(tasks);
})
.then(values =>{
console.log(values);
})
catch(err =>{
console.log(err)
})
Promise.race() // 只会等待第一个任务完成就会执行then内的函数
// 一般可以做请求超时的限制
// Promise这些任务可以叫做宏任务
// 微任务,直接在当前任务结束后立刻执行
// Promise的回调会以微任务执行
// 大部份的异步调用任务都是作为宏任务
// 微任务是为了提高整体的响应能力
ES2015 Generator
function * foo(){
yield 'done';
}
foo()
// 调用生成器函数,并不会直接调用生成器函数,只有在调用生成器函数的next()方法才会调用
// yield之前说过了~ 就不再说了
function * main(){
try{
yield ajax('userList.json');
yield ajax('userList2.json');
}catch(e){
console.log(e);
}
}
const g = main();
// const result = g.next();
// result.value.then(data=>{
// const result2 = g.next(data);
// result2.value.then(data=>{
// g.next(data);
// // ....
// });
// });
// 以递归的方式执行
function handleResult(result){
if(result.done){
return ;
}
result.value.then(data=>{
handleResult(g.next(data));
},err =>{
g.throw(err);
})
}
handleResult(g.next());
// 基本都用 Async await了 不过里面原理差不多的
// 使异步编程的代码扁平化
ES2015 Async Await
async function main(){
try{
await ajax('userList.json');
await ajax('userList2.json');
}catch(e){
console.log(e);
}
}
// await目前只能在async声明的函数内使用,据说ES2020会把await关键词单独拿出来使用的亚子
—————————————————————————————————————————————————————— 我这废柴