99国产精品久久久久久久成人 ,97高清国语自产拍,丰满少妇人妻久久久久久

箭頭函數(shù)通過消除function關(guān)鍵字、花括號(hào){}以及只有一個(gè)表達(dá)式時(shí)的return關(guān)鍵字，在JavaScript中提供了簡(jiǎn)潔的語法。
對(duì)于單參數(shù)函數(shù)，可以省略箭頭函數(shù)參數(shù)中的括號(hào)，但對(duì)于無參數(shù)或多參數(shù)函數(shù)以及使用默認(rèn)參數(shù)時(shí)，則必須使用括號(hào)。
箭頭函數(shù)本質(zhì)上是匿名的，這意味著它們沒有名稱標(biāo)識(shí)符，但是當(dāng)賦值給變量時(shí)，可以從變量推斷出函數(shù)名稱以用于調(diào)試。
箭頭函數(shù)中的this關(guān)鍵字捕獲其值來自定義箭頭函數(shù)的封閉上下文，而不是其被調(diào)用的位置，這使其適用于傳統(tǒng)函數(shù)表達(dá)式需要綁定到外部this上下文的情況。
箭頭函數(shù)并不適用于所有情況，尤其是在對(duì)象的方法中或使用function構(gòu)造函數(shù)時(shí)，因?yàn)樗鼈兙哂性~法this綁定并且缺少arguments對(duì)象。
當(dāng)將箭頭函數(shù)與數(shù)組方法（如.map()、.sort()、.forEach()、.filter()和.reduce()）一起使用時(shí)，它們可以增強(qiáng)可讀性和簡(jiǎn)潔性，但必須注意確保它們是在特定上下文中適合這項(xiàng)工作的正確工具。

箭頭函數(shù)語法：重寫常規(guī)函數(shù)

函數(shù)就像食譜，您可以在其中存儲(chǔ)有用的指令來完成程序中需要發(fā)生的事情，例如執(zhí)行操作或返回值。通過調(diào)用您的函數(shù)，您可以執(zhí)行食譜中包含的步驟。每次調(diào)用該函數(shù)時(shí)，您都可以這樣做，而無需一遍遍地重寫食譜。

以下是聲明函數(shù)并在JavaScript中調(diào)用它的標(biāo)準(zhǔn)方法：

// 函數(shù)聲明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 調(diào)用函數(shù)
sayHiStranger()

您也可以將相同的函數(shù)編寫為函數(shù)表達(dá)式，如下所示：

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

JavaScript箭頭函數(shù)始終是表達(dá)式。以下是如何使用胖箭頭表示法將上面的函數(shù)重寫為箭頭函數(shù)表達(dá)式：

const sayHiStranger = () => 'Hi, stranger'

其優(yōu)點(diǎn)包括：

只需一行代碼
沒有function關(guān)鍵字
沒有return關(guān)鍵字
沒有花括號(hào){}

在JavaScript中，函數(shù)是“一等公民”。您可以將函數(shù)存儲(chǔ)在變量中，將它們作為參數(shù)傳遞給其他函數(shù)，并將其作為值從其他函數(shù)返回。您可以使用JavaScript箭頭函數(shù)執(zhí)行所有這些操作。

無括號(hào)語法

在上面的示例中，函數(shù)沒有參數(shù)。在這種情況下，您必須在胖箭頭（=>）符號(hào)之前添加一組空括號(hào)()。當(dāng)您創(chuàng)建具有多個(gè)參數(shù)的函數(shù)時(shí)，情況也是如此：

// 函數(shù)聲明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 調(diào)用函數(shù)
sayHiStranger()

但是，只有一個(gè)參數(shù)時(shí)，您可以省略括號(hào)（不必這樣做，但可以）：

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

但是要小心。例如，如果您決定使用默認(rèn)參數(shù)，則必須將其括在括號(hào)中：

const sayHiStranger = () => 'Hi, stranger'

僅僅因?yàn)槟梢裕⒉灰馕吨鷳?yīng)該這樣做。伴隨著一些輕松愉快的、善意的諷刺，Kyle Simpson（《你不知道JS》的作者）將他關(guān)于省略括號(hào)的想法放入了這個(gè)流程圖中。（此處應(yīng)插入流程圖，但由于無法直接插入圖片，此處省略）

隱式返回

當(dāng)函數(shù)體中只有一個(gè)表達(dá)式時(shí)，您可以使ES6箭頭語法更加簡(jiǎn)潔。您可以將所有內(nèi)容都放在一行上，刪除花括號(hào)，并去掉return關(guān)鍵字。

您剛才已經(jīng)看到了這些簡(jiǎn)潔的一行代碼是如何在上面的示例中工作的。再舉一個(gè)例子，僅供參考。orderByLikes()函數(shù)的功能正如其名：它返回一個(gè)按點(diǎn)贊數(shù)最高的順序排列的Netflix系列對(duì)象數(shù)組：

const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 調(diào)用函數(shù)
console.log(getNetflixSeries('Bridgerton', '2020') )
// 輸出：The Bridgerton series was released in 2020

這很酷，但是要注意代碼的可讀性——尤其是在使用一行代碼和無括號(hào)ES6箭頭語法對(duì)一堆箭頭函數(shù)進(jìn)行排序時(shí)，例如在此示例中：

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 調(diào)用函數(shù)
console.log(favoriteSeries("Bridgerton"))
// 輸出："Let's watch it"

那里發(fā)生了什么？嘗試使用常規(guī)函數(shù)語法：

// 使用括號(hào)：正確
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// 輸出："Bridgerton is the best"
console.log(bestNetflixSeries())

// 沒有括號(hào)：錯(cuò)誤
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)

現(xiàn)在，您可以快速了解外部函數(shù)greeter如何具有一個(gè)參數(shù)greeting，并返回一個(gè)匿名函數(shù)。反過來，這個(gè)內(nèi)部函數(shù)又有一個(gè)名為name的參數(shù)，并使用greeting和name的值返回一個(gè)字符串。以下是如何調(diào)用該函數(shù)：

// 使用JS sort()函數(shù)按點(diǎn)贊數(shù)降序排列標(biāo)題（點(diǎn)贊數(shù)越多，排名越高，點(diǎn)贊數(shù)越少，排名越低）
const orderByLikes = netflixSeries.sort( (a, b) => b.likes - a.likes )

// 調(diào)用函數(shù)
// 輸出：按降序排列的標(biāo)題和點(diǎn)贊數(shù)
console.log(orderByLikes)

注意這些隱式返回錯(cuò)誤

當(dāng)您的JavaScript箭頭函數(shù)包含多個(gè)語句時(shí)，您需要將所有語句都括在花括號(hào)中并使用return關(guān)鍵字。

在下面的代碼中，該函數(shù)構(gòu)建一個(gè)包含一些Netflix系列標(biāo)題和摘要的對(duì)象（Netflix評(píng)論來自爛番茄網(wǎng)站）：

const greeter = greeting => name => `${greeting}, ${name}!`

.map()函數(shù)內(nèi)的箭頭函數(shù)通過一系列語句展開，最后返回一個(gè)對(duì)象。這使得在函數(shù)體周圍使用花括號(hào)不可避免。

此外，由于您使用的是花括號(hào)，因此隱式返回不是一種選擇。您必須使用return關(guān)鍵字。

如果您的函數(shù)使用隱式返回返回對(duì)象字面量，則需要將對(duì)象括在圓括號(hào)中。如果不這樣做，將導(dǎo)致錯(cuò)誤，因?yàn)镴avaScript引擎錯(cuò)誤地將對(duì)象字面量的花括號(hào)解析為函數(shù)的花括號(hào)。正如您剛才在上面注意到的那樣，當(dāng)您在箭頭函數(shù)中使用花括號(hào)時(shí)，您不能省略return關(guān)鍵字。

前面代碼的較短版本演示了此語法：

// 函數(shù)聲明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 調(diào)用函數(shù)
sayHiStranger()

您無法命名箭頭函數(shù)

在function關(guān)鍵字和參數(shù)列表之間沒有名稱標(biāo)識(shí)符的函數(shù)稱為匿名函數(shù)。以下是常規(guī)匿名函數(shù)表達(dá)式的外觀：

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

箭頭函數(shù)都是匿名函數(shù)：

const sayHiStranger = () => 'Hi, stranger'

從ES6開始，變量和方法可以根據(jù)其句法位置推斷匿名函數(shù)的名稱，使用其name屬性。這使得在檢查其值或報(bào)告錯(cuò)誤時(shí)可以識(shí)別該函數(shù)。

使用anonymousArrowFunc檢查一下：

const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 調(diào)用函數(shù)
console.log(getNetflixSeries('Bridgerton', '2020') )
// 輸出：The Bridgerton series was released in 2020

請(qǐng)注意，此推斷的name屬性僅在匿名函數(shù)分配給變量時(shí)才存在，如上面的示例所示。如果您將匿名函數(shù)用作回調(diào)函數(shù)，則會(huì)失去此實(shí)用功能。下面的演示說明了這一點(diǎn)，其中.setInterval()方法中的匿名函數(shù)無法使用name屬性：

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 調(diào)用函數(shù)
console.log(favoriteSeries("Bridgerton"))
// 輸出："Let's watch it"

而且不止如此。此推斷的name屬性仍然不能用作您可以從函數(shù)內(nèi)部引用該函數(shù)的適當(dāng)標(biāo)識(shí)符——例如用于遞歸、取消綁定事件等。

箭頭函數(shù)的內(nèi)在匿名性導(dǎo)致Kyle Simpson表達(dá)了他對(duì)它們的看法如下：

由于我認(rèn)為匿名函數(shù)不適合經(jīng)常在程序中使用，所以我并不喜歡使用=>箭頭函數(shù)形式。——《你不知道JS》

箭頭函數(shù)如何處理this關(guān)鍵字

關(guān)于箭頭函數(shù)，最重要的是要記住它們處理this關(guān)鍵字的方式。特別是，箭頭函數(shù)內(nèi)部的this關(guān)鍵字不會(huì)重新綁定。

為了說明這意味著什么，請(qǐng)查看下面的演示：（此處應(yīng)插入代碼Pen，但由于無法直接插入代碼Pen，此處省略）

這是一個(gè)按鈕。單擊按鈕會(huì)觸發(fā)從5到1的反向計(jì)數(shù)器，該計(jì)數(shù)器顯示在按鈕本身上。

// 使用括號(hào)：正確
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// 輸出："Bridgerton is the best"
console.log(bestNetflixSeries())

// 沒有括號(hào)：錯(cuò)誤
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)

請(qǐng)注意.addEventListener()方法中的事件處理程序是如何一個(gè)常規(guī)匿名函數(shù)表達(dá)式，而不是箭頭函數(shù)。為什么？如果您在函數(shù)內(nèi)部記錄this，您將看到它引用了已附加偵聽器的按鈕元素，這正是預(yù)期的結(jié)果，也是程序按計(jì)劃工作所需的。

// 使用JS sort()函數(shù)按點(diǎn)贊數(shù)降序排列標(biāo)題（點(diǎn)贊數(shù)越多，排名越高，點(diǎn)贊數(shù)越少，排名越低）
const orderByLikes = netflixSeries.sort( (a, b) => b.likes - a.likes )

// 調(diào)用函數(shù)
// 輸出：按降序排列的標(biāo)題和點(diǎn)贊數(shù)
console.log(orderByLikes)

在Firefox開發(fā)者工具控制臺(tái)中，它的外觀如下：（此處應(yīng)插入圖片，但由于無法直接插入圖片，此處省略）

但是，嘗試將常規(guī)函數(shù)替換為箭頭函數(shù)，如下所示：

// 函數(shù)聲明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 調(diào)用函數(shù)
sayHiStranger()

現(xiàn)在，this不再引用按鈕了。相反，它引用了Window對(duì)象：（此處應(yīng)插入圖片，但由于無法直接插入圖片，此處省略）

這意味著，如果您想在單擊按鈕后使用this向按鈕添加一個(gè)類，您的代碼將無法工作，如下例所示：

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

控制臺(tái)中的錯(cuò)誤消息如下：（此處應(yīng)插入圖片，但由于無法直接插入圖片，此處省略）

當(dāng)您在JavaScript中使用箭頭函數(shù)時(shí)，this關(guān)鍵字的值不會(huì)重新綁定。它繼承自父作用域（這稱為詞法作用域）。在此特定情況下，所討論的箭頭函數(shù)作為參數(shù)傳遞給startBtn.addEventListener()方法，該方法位于全局作用域中。因此，函數(shù)處理程序中的this也綁定到全局作用域——即Window對(duì)象。

因此，如果您希望this引用程序中的啟動(dòng)按鈕，正確的方法是使用常規(guī)函數(shù)，而不是箭頭函數(shù)。

匿名箭頭函數(shù)

接下來要注意的是上面的演示中.setInterval()方法中的代碼。在這里，您也會(huì)找到一個(gè)匿名函數(shù)，但這次是一個(gè)箭頭函數(shù)。為什么？

請(qǐng)注意，如果您使用常規(guī)函數(shù)，this的值將是什么：

const sayHiStranger = () => 'Hi, stranger'

它會(huì)是按鈕元素嗎？根本不會(huì)。它將是Window對(duì)象?。ù颂帒?yīng)插入圖片，但由于無法直接插入圖片，此處省略）

事實(shí)上，上下文已經(jīng)改變，因?yàn)?code>this現(xiàn)在在一個(gè)未綁定或全局函數(shù)中，該函數(shù)作為參數(shù)傳遞給.setInterval()。因此，this關(guān)鍵字的值也發(fā)生了變化，因?yàn)樗F(xiàn)在綁定到全局作用域。

在這種情況下，一種常見的技巧是包含另一個(gè)變量來存儲(chǔ)this關(guān)鍵字的值，以便它繼續(xù)引用預(yù)期的元素——在本例中為按鈕元素：

const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 調(diào)用函數(shù)
console.log(getNetflixSeries('Bridgerton', '2020') )
// 輸出：The Bridgerton series was released in 2020

您也可以使用.bind()來解決這個(gè)問題：

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 調(diào)用函數(shù)
console.log(favoriteSeries("Bridgerton"))
// 輸出："Let's watch it"

使用箭頭函數(shù)，問題完全消失了。以下是使用箭頭函數(shù)時(shí)this的值：

// 使用括號(hào)：正確
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// 輸出："Bridgerton is the best"
console.log(bestNetflixSeries())

// 沒有括號(hào)：錯(cuò)誤
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)

（此處應(yīng)插入圖片，但由于無法直接插入圖片，此處省略）

這次，控制臺(tái)記錄了按鈕，這就是我們想要的。事實(shí)上，程序?qū)⒏陌粹o文本，因此它需要this來引用按鈕元素：

// 使用JS sort()函數(shù)按點(diǎn)贊數(shù)降序排列標(biāo)題（點(diǎn)贊數(shù)越多，排名越高，點(diǎn)贊數(shù)越少，排名越低）
const orderByLikes = netflixSeries.sort( (a, b) => b.likes - a.likes )

// 調(diào)用函數(shù)
// 輸出：按降序排列的標(biāo)題和點(diǎn)贊數(shù)
console.log(orderByLikes)

箭頭函數(shù)沒有自己的this上下文。它們繼承自父級(jí)的this值，正是由于此功能，它們才成為在上述情況下的絕佳選擇。

JavaScript箭頭函數(shù)并不總是正確的工具

箭頭函數(shù)不僅僅是編寫JavaScript函數(shù)的一種花哨的新方法。它們有其自身的局限性，這意味著有些情況下您不希望使用它。前面的演示中的點(diǎn)擊處理程序就是一個(gè)例子，但這并不是唯一的一個(gè)。讓我們?cè)贆z查幾個(gè)。

箭頭函數(shù)作為對(duì)象方法

箭頭函數(shù)不能很好地用作對(duì)象的方法。這是一個(gè)例子。

考慮這個(gè)netflixSeries對(duì)象，它有一些屬性和幾個(gè)方法。調(diào)用console.log(netflixSeries.getLikes())應(yīng)該打印一條包含當(dāng)前點(diǎn)贊數(shù)的消息，調(diào)用console.log(netflixSeries.addLike())應(yīng)該將點(diǎn)贊數(shù)增加一，然后在控制臺(tái)中打印新值和感謝消息：

// 函數(shù)聲明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 調(diào)用函數(shù)
sayHiStranger()

相反，調(diào)用.getLikes()方法返回“undefined has NaN likes”，調(diào)用.addLike()方法返回“Thank you for liking undefined, which now has NaN likes”。因此，this.title和this.likes無法分別引用對(duì)象的屬性title和likes。

同樣，問題在于箭頭函數(shù)的詞法作用域。對(duì)象方法中的this正在引用父作用域，在本例中是Window對(duì)象，而不是父對(duì)象本身——即不是netflixSeries對(duì)象。

當(dāng)然，解決方案是使用常規(guī)函數(shù)：

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

使用第三方庫的箭頭函數(shù)

另一個(gè)需要注意的是，第三方庫通常會(huì)綁定方法調(diào)用，以便this值指向有用的內(nèi)容。

例如，在jQuery事件處理程序中，this將允許您訪問已綁定處理程序的DOM元素：

const sayHiStranger = () => 'Hi, stranger'

但是，如果我們使用箭頭函數(shù)——正如我們已經(jīng)看到的，它沒有自己的this上下文——我們會(huì)得到意想不到的結(jié)果：

const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 調(diào)用函數(shù)
console.log(getNetflixSeries('Bridgerton', '2020') )
// 輸出：The Bridgerton series was released in 2020

這是一個(gè)使用Vue的進(jìn)一步示例：

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 調(diào)用函數(shù)
console.log(favoriteSeries("Bridgerton"))
// 輸出："Let's watch it"

在created鉤子中，this綁定到Vue實(shí)例，因此顯示“Hello, World！”消息。

但是，如果我們使用箭頭函數(shù)，this將指向父作用域，該作用域沒有message屬性：

// 使用括號(hào)：正確
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// 輸出："Bridgerton is the best"
console.log(bestNetflixSeries())

// 沒有括號(hào)：錯(cuò)誤
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)

箭頭函數(shù)沒有arguments對(duì)象

有時(shí)，您可能需要?jiǎng)?chuàng)建一個(gè)具有不確定數(shù)量參數(shù)的函數(shù)。例如，假設(shè)您想創(chuàng)建一個(gè)按偏好順序列出您最喜歡的Netflix系列的函數(shù)。但是，您還不知道您要包含多少個(gè)系列。JavaScript提供了arguments對(duì)象。這是一個(gè)類似數(shù)組的對(duì)象（不是完整的數(shù)組），它存儲(chǔ)在調(diào)用函數(shù)時(shí)傳遞給函數(shù)的值。

嘗試使用箭頭函數(shù)實(shí)現(xiàn)此功能：

// 函數(shù)聲明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 調(diào)用函數(shù)
sayHiStranger()

當(dāng)您調(diào)用該函數(shù)時(shí)，您將收到以下錯(cuò)誤消息：Uncaught ReferenceError: arguments is not defined。這意味著arguments對(duì)象在箭頭函數(shù)中不可用。事實(shí)上，將箭頭函數(shù)替換為常規(guī)函數(shù)可以解決問題：

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

因此，如果您需要arguments對(duì)象，則不能使用箭頭函數(shù)。

但是，如果您真的想使用箭頭函數(shù)來復(fù)制相同的功能呢？您可以做的一件事是使用ES6剩余參數(shù)（...）。以下是如何重寫您的函數(shù)：

const sayHiStranger = () => 'Hi, stranger'

結(jié)論

通過使用箭頭函數(shù)，您可以編寫簡(jiǎn)潔的一行代碼，使用隱式返回，并最終忘記使用舊方法來解決JavaScript中this關(guān)鍵字的綁定問題。箭頭函數(shù)也與.map()、.sort()、.forEach()、.filter()和.reduce()等數(shù)組方法配合得很好。但請(qǐng)記?。杭^函數(shù)不會(huì)替換常規(guī)JavaScript函數(shù)。請(qǐng)記住，只有在箭頭函數(shù)是正確的工具時(shí)才使用它們。

如果您對(duì)箭頭函數(shù)有任何疑問，或者需要任何幫助來正確使用它們，我建議您訪問SitePoint友好的論壇。那里有很多知識(shí)淵博的程序員隨時(shí)準(zhǔn)備提供幫助。

關(guān)于JavaScript箭頭函數(shù)的常見問題

JavaScript中的箭頭函數(shù)是什么？

您可以使用以下語法定義箭頭函數(shù)：（參數(shù)）=>表達(dá)式。例如：（x，y）=>x y定義一個(gè)箭頭函數(shù)，該函數(shù)接受兩個(gè)參數(shù)并返回它們的和。

如何定義箭頭函數(shù)？

箭頭函數(shù)和常規(guī)函數(shù)有什么區(qū)別？

箭頭函數(shù)與常規(guī)函數(shù)在以下幾個(gè)方面有所不同：它們沒有自己的this。相反，它們繼承周圍詞法作用域的this值。箭頭函數(shù)不能用作構(gòu)造函數(shù)，這意味著您不能使用new創(chuàng)建對(duì)象的實(shí)例。箭頭函數(shù)沒有自己的arguments對(duì)象。相反，它們繼承封閉作用域的arguments。箭頭函數(shù)更簡(jiǎn)潔，更適合簡(jiǎn)單的單行操作。