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