ES6之箭头函数

ES6允许使用箭头函数（=>），极大的简化了函数的书写，使得表达更加的简洁。

1.基本用法如下：

（1）具有一个参数的简单函数

var f = a =>a;
//等同于
var f = function(a){
   return a;
}

（2）如果箭头函数不需要参数或者需要多个参数，就使用圆括号代表参数的部分

var f = () =>6;
//等同于
var f = function(){
   return 6;
}

var sum = (a , b) => a+b;
//等同于
var sum = function(a,b){
    return a+b;
}

（3）如果箭头函数的代码块多于一条语句，就使用大括号将其括起来，并使用return语句返回

var sum = (a , b) => {
    if( typeof a =='number' && typeof b == 'number'){
         return a+b;
    }else{
         return 0;
    }
}

note:大括号被解释为代码块，因此箭头函数直接返回一个对象时，必须在对象外面加上括号。

var getItem = obj => ({id : 12, name: 'Jack'});

（4）箭头函数可以简化回调函数

[1,2,3,4].map(x => x * x);  //[1, 4, 9, 16]
//等同于
[1,2,3,4].map(function(x){
   return x*x;
});


values = [1,4,3,8,12];
var result = values.sort((a,b) => a-b);  //[1, 3, 4, 8, 12]
//等同于
var result = values.sort(function(a,b) { 
     return a - b;
});

2.箭头函数的注意点

（1）函数体内的this对象是定义时所在的对象，而不是使用时所在的对象。此时的this是固定的。

比如之前购物车的例子里的的计算总运费的方法https://blog.csdn.net/freya_yyy/article/details/81210976，可以做改变

//计算全部商品总运费
calTotalFare(){
   var oThis = this;
   this.totalFare = 0;
   for ( var i = 0, len = this.goodsObj.length; i < len; i++ ) {
		 var list = this.goodsObj[i]['list'];
		 list.forEach(function(item, index, arr) {
		 if ( list[index]['checked'] ) {
		      oThis.totalFare+= parseFloat(item.fare) * parseFloat(item.num);
		 }
	  });
   }
}
//将forEach回调函数用箭头函数代替，此时不再需要定义变量oThis保存this
calTotalFare(){
   this.totalFare = 0;
   for ( var i = 0, len = this.goodsObj.length; i < len; i++ ) {
		 var list = this.goodsObj[i]['list'];
		 list.forEach((item, index, arr) => {
		 if ( list[index]['checked'] ) {
		     this.totalFare+= parseFloat(item.fare) * parseFloat(item.num);
		 }
	  });
   }
}

（2）不能当做构造函数。也就是不能使用new命令，否则报错。

（3）不可以使用arguments对象，该对象在函数体内不存在。可以用rest参数代替。

const headAbdTail = (head ,...tail) => [head, tail];
headAbdTail(3,4,5,6,7);   //[3,[4,5,6,7]]

const num = (...nums) => nums;
num(2,3,4,5);   //[2, 3, 4, 5]

（4）箭头函数没有自己的this，也就不能使用call(),apply(),bind()这些方法去改变this的指向。