[TOC] #### 前言 --- ES6 新增了一種新的函數(shù): 箭頭函數(shù) Arrow Function 箭頭函數(shù)相當(dāng)于匿名函數(shù)，簡化了函數(shù)定義，將原函數(shù)的 function 關(guān)鍵字和函數(shù)名都刪掉，并使用 `=>` 連接參數(shù)和函數(shù)體 #### 1. ES6 前定義函數(shù) --- ```javascript // function 關(guān)鍵字 function add(num1, num2) { return num1 + num2; } // 函數(shù)表達(dá)式 const sub = function (num1, num2) { return num1 - num2; } // 對象字面量中定義函數(shù) const obj = { mul: function (num1, num2) { return num1 * num2; }, div(num1, num2) { return num1 / num2; } } ``` #### 2. ES6 箭頭函數(shù)語法 --- 當(dāng)沒有參數(shù)時, 可以定義為以下形式 ```javascript const test = () => { } ``` 當(dāng)只有一個參數(shù)時，括號可以省略。但是，如果這個參數(shù)是解構(gòu)賦值，括號不能省略 ```javascript const test = res => { console.log(res); } const test = ({ code, msg }) => { console.log(res); } ``` 當(dāng)有多個參數(shù)時，括號不能省略 ```javascript const test = (num1, num2) => { return num1 + num2; } ``` 當(dāng)函數(shù)體只有一行語句時，可以省略 {} ```javascript const test = (num1, num2) => num1 + num2; ``` 使用箭頭函數(shù)的場景: 閉包函數(shù) ```javascript setTimeout(() => { }, 1000) ``` #### 3. ES6 箭頭函數(shù)返回值 --- 當(dāng)方法體只有一條語句時可以省略花括號 ```javascript // 普通寫法 // const math = (num1, num2) => { // return num1 + num2 // } // 省略 {} const math = (num1, num2) => num1 + num2 ``` 當(dāng)箭頭函數(shù)需要返回一個數(shù)據(jù)時，可以使用下面寫法 返回值是**字符串，數(shù)組，布爾值** 時，`=>` 后面直接跟上數(shù)據(jù)即可，返回值如果是鍵值對形式的對象，需要使用 `({})` ```javascript const demo = { // 返回值是 [] a1: () => [], // 返回值是 'abc' a2: () => 'abc', // 返回值是 true a3: () => true, // 返回值是鍵值對的對象時 需要使用 ({}) // 因?yàn)槭褂?() => {} , {} 會被當(dāng)作方法體的定界符 a4: () => ({ name: 'liang' }), ``` 箭頭函數(shù)直接返回一個數(shù)據(jù)的寫法，在特殊場景下可以簡化代碼 ```javascript // 只保留 users 數(shù)組對象中的 id 和 name 字段 const users = [ { id: 1, name: 'liang', age: 20, job: 'php' }, { id: 2, name: 'maria', age: 25, job: 'html' }, { id: 3, name: 'wang', age: 30, job: 'css' } ] const live = users.map(({ id, name }) => ({ id, name })) ``` #### 4. 箭頭函數(shù)中的 this 到底是誰 ? ---- 箭頭函數(shù)中的 this 指向問題是一個非常經(jīng)典的問題 標(biāo)準(zhǔn)答案: 向外層作用域一層層的查找 this，直到有 this 的定義