Web前端之路程序员

ES6中的好东西

2018-02-02  本文已影响271人  flow__啊

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 };
挺另人头大的。

上一篇下一篇

猜你喜欢

热点阅读