?? 今天我們來聊聊JavaScript里那個(gè)讓代碼瞬間變“高級(jí)”的魔法——ES6箭頭函數(shù)！??

是不是覺得 function 寫起來太啰嗦？是不是被 this 指向搞得暈頭轉(zhuǎn)向？?? 別慌，這篇筆記手把手帶你吃透箭頭函數(shù)，不僅教你怎么寫，還告訴你為什么這么寫，干貨滿滿，建議先收藏再看！??

?? 什么是箭頭函數(shù)？

簡單來說，箭頭函數(shù)就是寫函數(shù)的一種新姿勢(shì)。它用 => 這個(gè)像箭頭一樣的符號(hào)來定義，不僅代碼量少了，讀起來也更清晰。

對(duì)比一下：

// 以前的老寫法（傳統(tǒng)函數(shù)）
const add = function(a, b) {
  return a + b;
}

// 現(xiàn)在的潮寫法（箭頭函數(shù)）
const add = (a, b) => a + b;

是不是瞬間清爽了？??

?? 語法大變身（新手必看）

箭頭函數(shù)的語法非常靈活，我們分情況來看：

1. 基本款
參數(shù)和返回值都有，中規(guī)中矩。

const sum = (a, b) => {
  return a + b;
}

2. 極簡款（單參數(shù) & 單行返回）

• 如果只有一個(gè)參數(shù)，括號(hào) () 可以省略！
• 如果只有一行代碼（且是返回值），大括號(hào) {} 和 return 都可以省略！

// 只有一個(gè)參數(shù) x
const square = x => x * x; 

// 多個(gè)參數(shù)，直接返回結(jié)果
const multiply = (a, b) => a * b;

3. 空參數(shù)
沒有參數(shù)時(shí)，括號(hào)不能少。

const sayHi = () => console.log('Hello!');

4. 返回對(duì)象（避坑指南??）
如果你想直接返回一個(gè)對(duì)象，必須給對(duì)象加個(gè)括號(hào) ()，不然JS會(huì)以為那是函數(shù)體！

// ? 錯(cuò)誤寫法
const getUser = () => { name: 'Tom', age: 18 }; // 返回 undefined

// ? 正確寫法
const getUser = () => ({ name: 'Tom', age: 18 }); 

?? 核心大招：this 指向（重點(diǎn)！）

這是箭頭函數(shù)最牛的地方，也是面試高頻考點(diǎn)！??

傳統(tǒng)函數(shù)的 this 像個(gè)“墻頭草”，誰調(diào)用它，它就指向誰。
箭頭函數(shù)的 this 是個(gè)“專一的人”，它在定義的時(shí)候就確定了，永遠(yuǎn)指向定義時(shí)外層作用域的 this。

舉個(gè)栗子??：

const obj = {
  name: '小紅書',
  // 傳統(tǒng)函數(shù)
  sayHi1: function() {
    setTimeout(function() {
      console.log(this.name); // ? 輸出 undefined (this指向window)
    }, 1000);
  },
  // 箭頭函數(shù)
  sayHi2: function() {
    setTimeout(() => {
      console.log(this.name); // ? 輸出 '小紅書' (this繼承自sayHi2)
    }, 1000);
  }
};

結(jié)論： 在回調(diào)函數(shù)（比如定時(shí)器、Promise）里，用箭頭函數(shù)可以完美解決 this 丟失的問題，再也不用寫 var that = this 了！??

?? 三大“不支持”（進(jìn)階知識(shí)）

雖然箭頭函數(shù)好用，但它不是萬能的。以下情況千萬別用箭頭函數(shù)：

• 不能當(dāng)構(gòu)造函數(shù)
  你不能對(duì)它用 new 關(guān)鍵字。因?yàn)樗鼪]有自己的 this，也沒有 prototype 屬性。
  const Foo = () => {}; new Foo(); // 報(bào)錯(cuò)！

• 沒有 arguments 對(duì)象
  在箭頭函數(shù)里訪問 arguments，它其實(shí)是外層函數(shù)的參數(shù)。如果你想獲取所有參數(shù)，請(qǐng)用 剩余參數(shù) (...args)。
  const sum = (...args) => args.reduce((a, b) => a + b, 0);

• 不能用作 Generator 函數(shù)
  箭頭函數(shù)里不能用 yield 關(guān)鍵字。

?? 什么時(shí)候用它？

• 數(shù)組方法里：map, filter, reduce 簡直是箭頭函數(shù)的快樂老家！
  .map(n => n * 2)
• 回調(diào)函數(shù)里：比如 setTimeout, Promise.then。
• 對(duì)象方法里（要小心）：如果你想讓 this 指向?qū)ο蟊旧恚?strong>不要用箭頭函數(shù)定義方法！
  const obj = { val: 1, getVal: () => this.val }; // this指向window，不是obj

?? 總結(jié)一下

好啦，今天的ES6箭頭函數(shù)小課堂就到這里！是不是感覺任督二脈被打通了？?? 趕緊去代碼里試一試吧！