ES6中的好东西

作者: flow__啊 | 来源:发表于2018-02-02 17:27 被阅读271次

    1 Await/Async

    前端的回调时代我没有赶上,我赶上的是await/async时代。
    await和async基于promise实现。
    先是用法,普通函数外加async,需要异步操作的那个地方写await。
    就像这样:

    async function doSomething() {
      await doThing1(); 
      await doThing2(); 
    }
    

    其实await基于doThing1()返回了一个promise,当然这个promise也不用我们过多的关注,把它理解成一个关键字就好。
    这个和同步的写法已经非常非常像了。

    那么问题来了,把async和await去掉,好像也是一样啊!

    答:这个就涉及到浏览器的事件循环了,感兴趣的可以去看看。那我就先说一下去掉会是什么后果吧:卡,浏览器不在响应。等doThing1(),doThing2()这两个函数结束后才不卡。

    2 箭头函数

    这个箭头函数有什么用呢?偷懒就省事了~

    //一个参数的函数写成箭头函数:
    function fun(a){ return 2*a }
    //等价于:
    a=> a*2
    //多个参数:
    function fun(a,b){ return a*b }
    //等价于:
    (a,b)=> a*b
    //没有参数
    ()=> "没有就没有,谁怕谁"
    

    返回值是个什么情况?能不能写多几行的函数?

    如果你的函数只有一句,默认返回那一句的结果,如果有多句,要用扩号扩起来,再加return 。

    那对象也是加{},多行函数也是加{},要返回这样的{[,,,]}对象怎么办?

    返回对象加()就完事了,同时{}还是需要的。

    ()=>({[1,2]})
    

    请重视: 关于箭头函数中this的问题

    箭头函数的this指向在定义它时就已经确定了!而不是执行时的对象, 定义它的时候,可能环境是window。

    var a=6;
    var b={ example: ()=>a}
    var c={
            a:4,
            f:function () {
                console.log( b.example());  
            } 
    }  
    
    c.f();
    

    猜猜结果是多少?没错,就是 6!!!!!!!!

    3 参数解构

    定义时:

    let [x,y]=[1,2];//x=1,y=2
    
    let obj={x:1,y:2}; 
    let {x,y}=obj;//x=1,y=1
    //默认值
    let obj2={i:1}; 
    let {i=3,j=3}=obj2;//i=1,y=3
    //复杂一点的
    let obj={x:1,a:[2,3]};
    let {x=1,a:[y,z]}=obj;//x=1,y=2,z=3
    

    传参时的参数解构

    正好之前的博文(我自己写的)中有,我就复制过来吧 。
    注意increment后的参数

    //未用参数解构
    actions: {
        increment (context) {
          context.commit('increment')
        }
      }
    //使用参数解构
    actions: {
      increment ({ commit }) {
        commit('increment')
      }
    }
    

    举个例子:{ blowUp } = { blowUp: 10 }; 结果:{blowUp:10}
    从blowUp中取一个叫blowUp的属性。
    参数本来是传过来的context,从context中取一个commit的东西,得到 { commit : context.commit };
    挺另人头大的。

    相关文章

      网友评论

        本文标题:ES6中的好东西

        本文链接:https://www.haomeiwen.com/subject/vbfdzxtx.html