var callSomeone = function (someone) {
  return someone + '吃飯了'
}

上面是我們一般傳統函式的寫法，如果改成箭頭函式會變成如下:

var callSomeone = (someone) => {
    return someone + '吃飯了'
}

在 return 只有單行的時候，我們可以縮寫的更精簡:

var callSomeone = (someone) => someone + '吃飯了';

在參數的部分我們甚至可以省略 () ，變成如下:

var callSomeone = someone => someone + '吃飯了';

如果沒有參數代入，() 是不可以省略的:

var callSomeone = () => someone + '吃飯了';

另外箭頭函式是沒有 arguments 變數的，如果是一般傳統函式，呼叫函式時參數帶入一個不用參數的 function 時，這時候還有 arguments 變數可以來存放:

const updateEasyCard = function () {
  let cash = 0;
  console.log(arguments); 
}
updateEasyCard(10, 50, 100, 50, 5, 1, 1, 1, 500);

但在箭頭函式，並沒有 arguments 這個變數，如果我們把它改成箭頭函式:

const updateEasyCard = () => {
  let cash = 0;
  console.log(arguments); 
}
updateEasyCard(10, 50, 100, 50, 5, 1, 1, 1, 500);

這時候是會跳錯的，但是我們使用前面講的其餘的方式來存放這些呼叫函式的參數:

const updateEasyCard = (...arg) => {
  let cash = 0;
  console.log(arg); 
}
updateEasyCard(10, 50, 100, 50, 5, 1, 1, 1, 500);

這時候就會正常顯示了

然而箭頭函式跟一般傳統函式最大的差異性是 this 的使用上，會指向不一樣的地方，先用傳統函式來撰寫，會發現 this 指向的都是 auntie 這個物件，如我們預期:

var name = '全域阿婆'
var auntie = {
  name: '漂亮阿姨',
  callName: function () { 
    console.log('1', this.name); // 1 漂亮阿姨
    setTimeout(function () {
      console.log('2', this.name); // 2 全域阿婆
      console.log('3', this); // 3 window 物件
    }, 10);
  },
}
auntie.callName();

這裡補充一下，setTimeout 用的其實是在 window 物件下，所以它的 this 會指向全域的部分
如果改成箭頭函式:

var name = '全域阿婆'
var auntie = {
  name: '漂亮阿姨',
  callName: () => { 
    console.log('1', this.name); // 1 全域阿婆
    setTimeout(() => {
      console.log('2', this.name); // 2 全域阿婆
      console.log('3', this); // 3 window 物件
    }, 10);
  },
}
auntie.callName();

會發現它的 this 都是指向 window，為了避免這樣的狀況，我們在使用 Vue 時的 methods 盡量採用傳統函式，不然 this 會指向其他物件
那箭頭函式到底用在哪呢?
其實我們可以如下使用:

var auntie = {
  name: '漂亮阿姨',
  callName () { 
    var vm = this;
    setTimeout(() => {
      console.log(vm);
    }, 10);
  }
}
auntie.callName();

主要是在 callName 這個 function 內先宣告一個 vm 變數指向這個物件，這樣 setTimeout 就會指向這個物件了