es6允许使用箭头(=>)定义函数。箭头函数并非必须的,可以不使用依旧使用es5的函数写法。箭头函数是普通函数的一种简写,可以让函数的定义使用更加的简单方便。
//ES5定义函数写法:
var show=function(v){
console.log("ES5定义函数写法");
}
//ES6箭头函数写法:
let show=(v)=>{
console.log("ES6箭头函数");
}
看一种更简单的写法:
var f=v=>v;
//以上写法等同于:
var f=function(v){
return v;
}
//等同于
var f=(v)=>{
retunr v;
}
上面为什么可以简单到:var f=v=>v;因为es6使用箭头函数如果没有参数可以省略()。如果函数体只有一条return语句返回一个值,那么可以省略{}。
--如果箭头函数不需要参数或需要一个/多个参数,就使用一个圆括号代表参数部分。
var f=()=>5;
//等同于:
var f=function(){
return 5;
}
var sum=(num1,num2)=>num1+num2;
//等同于:
var sum=function(num1,num2){
return num1+num2;
}
--如果箭头函数的代码块部分多余一条语句,就要使用大括号将他们包裹起来,并使用return语句返回。
var sum=(num1,num2)=>{
num+=2;
return num1+num2;
}
--注意:在ES6中由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,那么必须在对象外面加上括号,否则会报错。
let fun=id=>{id:id,name:"temp"};
//以上代码会报错,因为直接返回了一个对象,es6将大括号解释为了代码块
let fun=id=>({id:id,name:"temp"})
//直接返回一个对象为了避免不会报错,我们应该使用()将对象包裹起来
--箭头函数可以简化回调函数写法:
//正常回调函数写法:
var result=arr.sort(function(a,b){
retunrn a-b;
})
//箭头函数简写写法:
let result=arr.sort((a,b)=>a-b);
--箭头函数使用的注意点:
1:函数体内部的this对象是定义时所在的对象而不是使用时所在的对象。(即this对象的指向在箭头函数中是固定的)。
//例如,在使用setTimeout()时传入一个函数,函数内部的this指向会变为window对象。
let time=setTimeout(function(){
console.log(this);//打印的是window对象
},1000)
//此时如果我们不希望改变this指向那么我们就可以使用箭头函数
let time=setTimeout(()=>{
console.log(this);
},1000)
2:不可以当做构造函数,也就是说不可以使用new命令,否则会抛出一个错误。
3:不可以使用arguments对象,该对象在函数体内不存在,如果要用应该使用rest参数替代。
4:不可以使用yield命令,因此箭头函数不能用作Generator函数。
--箭头函数不适用场景:
1:定义对象的方法,且该方法内部包含this。
2:需要动态this的时候也不应该使用箭头函数。