ECMAScript 6（ES6） 特性概覽和與ES5的比較3-箭頭函數

1.表達體

更具表現力的閉包語法
ECMAScript 6

odds = evens.map(v => v+1) //返回一個表達式
pairs = evens.map(v => ({even: v, odd: v + 1})) //返回一個對象，需要加()
nums = evens.map((v, 1) => v + i)//兩個參數，需要加()

ECMAScript 5

odds = evens.map(function (v) {return v+1;});
pairs = evens.map(function (v) {return { even: v, odd: v + 1};});
nums = evens.map(function (v,i) {return v + i;});

2.聲明式函數體

更具表現力的閉包語法，加花括號{}
ECMAScript 6

nums.forEach(v=>{
  if(v % 5 === 0)
     five.push(v) 
})

ECMAScript 5

nums.forEach(function(v){
  if(v % 5 === 0)
     five.push(v); 
});

3. this

更直觀地處理當前對象上下文
ECMAScript 6

this.nums.forEach((v)=>{
   if(v % 5 ===0)
      this.fives.push(v)
})
//比如vue項目中的寫法

ECMAScript 5

//第一種寫法
var self = this;
this.nums.forEach(function (v) {
     if (v % 5 === 0)
         self.fives.push(v);
})
//第二種寫法
this.nums.forEach(function (v) {
     if (v % 5 === 0)
         this.fives.push(v);
},this)
//第三種寫法
this.nums.forEach(function (v) {
     if (v % 5 === 0)
         this.fives.push(v);
}.bind(this));