国产h视频在线观看,国产av一区二区精品久久凹凸 ,丰满岳乱妇三级高清

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

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

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

以下是聲明函數(shù)並在JavaScript中調用它的標準方法：

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

// 調用函數(shù)
sayHiStranger()

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

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

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

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

其優(yōu)點包括：

只需一行代碼
沒有function關鍵字
沒有return關鍵字
沒有花括號{}

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

無括號語法

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

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

// 調用函數(shù)
sayHiStranger()

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

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

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

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

僅僅因為您可以，並不意味著您應該這樣做。伴隨著一些輕鬆愉快的、善意的諷刺，Kyle Simpson（《你不知道JS》的作者）將他關於省略括號的想法放入了這個流程圖中。（此處應插入流程圖，但由於無法直接插入圖片，此處省略）

隱式返回

當函數(shù)體中只有一個表達式時，您可以使ES6箭頭語法更加簡潔。您可以將所有內(nèi)容都放在一行上，刪除花括號，並去掉return關鍵字。

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

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

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

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

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

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

// 沒有括號：錯誤
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如何具有一個參數(shù)greeting，並返回一個匿名函數(shù)。反過來，這個內(nèi)部函數(shù)又有一個名為name的參數(shù)，並使用greeting和name的值返回一個字符串。以下是如何調用該函數(shù)：

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

// 調用函數(shù)
// 輸出：按降序排列的標題和點贊數(shù)
console.log(orderByLikes)

注意這些隱式返回錯誤

當您的JavaScript箭頭函數(shù)包含多個語句時，您需要將所有語句都括在花括號中並使用return關鍵字。

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

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

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

此外，由於您使用的是花括號，因此隱式返回不是一種選擇。您必須使用return關鍵字。

如果您的函數(shù)使用隱式返回返回對象字面量，則需要將對象括在圓括號中。如果不這樣做，將導致錯誤，因為JavaScript引擎錯誤地將對象字面量的花括號解析為函數(shù)的花括號。正如您剛才在上面注意到的那樣，當您在箭頭函數(shù)中使用花括號時，您不能省略return關鍵字。

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

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

// 調用函數(shù)
sayHiStranger()

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

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

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

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

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

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

使用anonymousArrowFunc檢查一下：

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

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

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

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

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

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

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

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

為了說明這意味著什麼，請查看下面的演示：（此處應插入代碼Pen，但由於無法直接插入代碼Pen，此處省略）

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

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

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

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

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

// 調用函數(shù)
// 輸出：按降序排列的標題和點贊數(shù)
console.log(orderByLikes)

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

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

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

// 調用函數(shù)
sayHiStranger()

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

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

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

控制臺中的錯誤消息如下：（此處應插入圖片，但由於無法直接插入圖片，此處省略）

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

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

匿名箭頭函數(shù)

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

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

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

它會是按鈕元素嗎？根本不會。它將是Window對象！（此處應插入圖片，但由於無法直接插入圖片，此處省略）

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

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

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

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

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

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

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

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

（此處應插入圖片，但由於無法直接插入圖片，此處省略）

這次，控制臺記錄了按鈕，這就是我們想要的。事實上，程序將更改按鈕文本，因此它需要this來引用按鈕元素：

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

// 調用函數(shù)
// 輸出：按降序排列的標題和點贊數(shù)
console.log(orderByLikes)

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

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

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

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

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

考慮這個netflixSeries對象，它有一些屬性和幾個方法。調用console.log(netflixSeries.getLikes())應該打印一條包含當前點贊數(shù)的消息，調用console.log(netflixSeries.addLike())應該將點贊數(shù)增加一，然後在控制臺中打印新值和感謝消息：

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

// 調用函數(shù)
sayHiStranger()

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

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

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

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

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

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

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

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

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

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

這是一個使用Vue的進一步示例：

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

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

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

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

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

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

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

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

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

// 調用函數(shù)
sayHiStranger()

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

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

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

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

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

結論

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

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

關於JavaScript箭頭函數(shù)的常見問題

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

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

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

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

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