阅读 422

我这废柴怎么可能逆袭的一生、第二天

无所事事的样子开始了摸鱼的一天

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关键词单独拿出来使用的亚子
复制代码

—————————————————————————————————————————————————————— 我这废柴

系列

文章分类
前端
文章标签