ES6箭頭函數(shù)的理解

基本用法

// 普通函數(shù)長(zhǎng)這樣
 const f = function (v) {
  return v;
};

// 箭頭函數(shù)長(zhǎng)這樣
const f = (v) => {
  return v;
};

可以看出，箭頭函數(shù)看似就是把'function'關(guān)鍵字變成'=>'，并且定義時(shí)放在函數(shù)參數(shù)后邊；其實(shí)不然，箭頭函數(shù)主要是為了解決js中this的指向這個(gè)困擾許久問(wèn)題，它干脆沒(méi)有this，直接用外部的this，避免了可能出現(xiàn)的各種難以理解的問(wèn)題的出現(xiàn)。

this的指向及其衍生

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
// 轉(zhuǎn)ES5
function foo() {
  var _this = this;
  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

上面的ES6代碼轉(zhuǎn)為ES5就可以清楚的看到，箭頭函數(shù)中的this是指向于外層的this
由于這個(gè)特性，在箭頭函數(shù)中，不能再使用以往的call()、apply()、bind()等方法去改變this的指向；此外，箭頭函數(shù)也不能被用來(lái)作為構(gòu)造函數(shù)，不可以對(duì)箭頭函數(shù)使用new命令；不可以使用yield命令，因此箭頭函數(shù)不能用作 Generator 函數(shù)；

需要使用動(dòng)態(tài)this時(shí)，也不該使用箭頭函數(shù)：

const button = document.getElementById('press');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});

原本的語(yǔ)義是this動(dòng)態(tài)指向被點(diǎn)擊的按鈕對(duì)象，使用了箭頭函數(shù)，則this只會(huì)指向全局對(duì)象，不符合某些場(chǎng)景的需求。

三元表達(dá)式的理解

在前端代碼中，三元表達(dá)式現(xiàn)如今越來(lái)越常見(jiàn)，它作為簡(jiǎn)單的判斷還是很好使的：

a = v > 5 ? 1 : 0;
// 上面的語(yǔ)句的含義是對(duì)變量a賦值，若v>5時(shí)值為1，否則為0

a = v > 5 ? 1 : (v == 5 ? 0 : -1);
// 稍微復(fù)雜一些的嵌套，v > 5時(shí)值為1，v = 5時(shí)值為0，v < 5時(shí)值為-1

理論上可以無(wú)限嵌套下去：
a = 條件1 ? 值1 : (條件2 ? 值2 : (條件3 ? 值3 : (條件4 ? 值4 : 值5)));

但是并不建議在代碼中使用嵌套的三元表達(dá)式：

例如上圖，如果不寫注釋，一時(shí)間難以知曉相關(guān)條件對(duì)應(yīng)的相關(guān)值。