高階函數

高階函數允許JavaScript適用於 functional programming.

這些功能在 JavaScript 中被廣泛使用。 如果您曾經用 JavaScript 編程過一點，則可能已經使用了它們，甚至可能沒有意識到。

為了完全理解該概念，您應該首先了解函數式編程和一流函數的概念。

什麼是函數式編程？

Functional programming is a branch of discrete mathematics and a programming paradigm, in which the computation process is interpreted as the calculation of the values ​​of functions in the mathematical sense of the latter (as opposed to functions as subroutines in procedural programming). [Wikipedia]

一流的功能

如果您已經在學習JavaScript，則可能聽說過JavaScript將函數⚙️視為一流的對象。 就像其他函數式編程語言一樣，JavaScript中的函數是對象。 在JavaScript中，函數⚙️是一種特殊的對像類型。 這些是 Function 對象。 例如:

实时编辑器

function learnJavaScript() { let greeting = () => 'Hello, World!' return greeting() }

function learnJavaScript() {
  let greeting = () => 'Hello, World!'

  return greeting()
}

结果

Loading...

現在我們知道什麼是一流的功能。 您可以從高階函數開始。

高階函數

這些是將函數⚙️作為參數或返回函數️作為輸出的函數⚙️。

例如，這些高階函數內置在該語言中： map() filter() 和 reduce()

例子 # 1. 更改號碼 .push

假設我們有一個數字數組。 我們要創建一個新的 數組，其中將包含第一個數組的兩倍值。 讓我們看看如何使用和不使用高階函數來解決此問題。

沒有高階函數：

实时编辑器

function learnJavaScript() { const arr1 = [1, 2, 3, 4] const arr2 = [] for (let i = 0; i < arr1.length; i++) { arr2.push(arr1[i] * 2) // the arr2 array grows in a loop } return arr2 // 2, 4, 6, 8 only without spaces }

function learnJavaScript() {
  const arr1 = [1, 2, 3, 4]
  const arr2 = []

  for (let i = 0; i < arr1.length; i++) {
    arr2.push(arr1[i] * 2) // the arr2 array grows in a loop
  }

  return arr2 // 2, 4, 6, 8 only without spaces
}

结果

Loading...

具有高階功能 map, 控制台選項是:

实时编辑器

function learnJavaScript() { const arr1 = [1, 2, 3, 4] const arr2 = arr1.map(function (item) { // Old variant return item * 2 + ' ' }) return arr2 }

function learnJavaScript() {
  const arr1 = [1, 2, 3, 4]
  const arr2 = arr1.map(function (item) {
    // Old variant
    return item * 2 + ' '
  })
  return arr2
}

结果

Loading...

我們可以使用 “箭頭功能” 語法將其編寫得更短：

实时编辑器

function learnJavaScript() { const arr1 = [1, 2, 3, 4, 5] const multTwo = item => item * 2 + ' ' const arr2 = arr1.map(multTwo) // Algorithm in 1 line return arr2 }

function learnJavaScript() {
  const arr1 = [1, 2, 3, 4, 5]
  const multTwo = item => item * 2 + ' '

  const arr2 = arr1.map(multTwo) // Algorithm in 1 line

  return arr2
}

结果

Loading...

例子 # 2. 計算值 .map

假設我們有一個包含不同人的出生年份的數組。 我們需要創建一個數組來存儲他們的年齡。

例如：沒有高階函數⚙️（經典-通過 for() 和 push() 循環)

实时编辑器

function learnJavaScript() { const birthYear = [1975, 1997, 2002, 1995, 1985] const ages = [] for (let i = 0; i < birthYear.length; i++) { let ageNew = 2020 - birthYear[i] + ' ' // The current value of the new array ages.push(ageNew) // push the new value into the ages [] array } return ages // [ 45, 23, 18, 25, 35 ] only without spaces }

function learnJavaScript() {
  const birthYear = [1975, 1997, 2002, 1995, 1985]
  const ages = []
  for (let i = 0; i < birthYear.length; i++) {
    let ageNew = 2020 - birthYear[i] + ' ' // The current value of the new array
    ages.push(ageNew) // push the new value into the ages [] array
  }

  return ages // [ 45, 23, 18, 25, 35 ] only without spaces
}

结果

Loading...

具有高階功能 map:

实时编辑器

function learnJavaScript() { const birthYear = [1975, 1997, 2002, 1995, 1985] let ages = birthYear.map(year => 2020 - year + ' ') // 1-line algorithm via arrow function return ages // [ 45, 23, 18, 25, 35 ] }

function learnJavaScript() {
  const birthYear = [1975, 1997, 2002, 1995, 1985]
  let ages = birthYear.map(year => 2020 - year + ' ') // 1-line algorithm via arrow function
  return ages // [ 45, 23, 18, 25, 35 ]
}

结果

Loading...

我們在一行鱈魚中刷新 一個新數組e.

例子 # 3. 有條件檢查 .filter()

我們有一個數組，其中包含具有以下屬性的對象：名稱和年齡。 我們需要創建一個僅包含成人（即年齡大於或等於18歲）的數組。

沒有高階函數（經典-通過 for () 和 push () 循環):

实时编辑器

function learnJavaScript() { const persons = [ { name: 'Niki', age: 16 }, { name: 'Mark', age: 18 }, { name: 'John', age: 27 }, { name: 'Jane', age: 14 }, { name: 'Tony', age: 24 } ] const fullAge = [] for (let i = 0; i < persons.length; i++) { if (persons[i].age >= 18) { fullAge.push(persons[i]) } } return fullAge.length // number of persons over 18 years old }

function learnJavaScript() {
  const persons = [
    { name: 'Niki', age: 16 },
    { name: 'Mark', age: 18 },
    { name: 'John', age: 27 },
    { name: 'Jane', age: 14 },
    { name: 'Tony', age: 24 }
  ]

  const fullAge = []
  for (let i = 0; i < persons.length; i++) {
    if (persons[i].age >= 18) {
      fullAge.push(persons[i])
    }
  }

  return fullAge.length // number of persons over 18 years old
}

结果

Loading...

With a higher-order function filter with a built-in condition:

实时编辑器

function learnJavaScript() { const persons = [ { name: 'Niki', age: 34 }, { name: 'Mark', age: 18 }, { name: 'John', age: 27 }, { name: 'Jane', age: 14 }, { name: 'Tony', age: 24 } ] const fullAge = persons.filter(person => person.age >= 18) // Algorithm with a condition in 1 line return fullAge.length // number of persons over 18 years old }

function learnJavaScript() {
  const persons = [
    { name: 'Niki', age: 34 },
    { name: 'Mark', age: 18 },
    { name: 'John', age: 27 },
    { name: 'Jane', age: 14 },
    { name: 'Tony', age: 24 }
  ]
  const fullAge = persons.filter(person => person.age >= 18) // Algorithm with a condition in 1 line

  return fullAge.length // number of persons over 18 years old
}

结果

Loading...

創建自己的高階函數

到目前為止，我們已經研究了語言中內置的高階函數。 現在讓我們自己創建這樣的功能function️。 想像一下，JavaScript沒有內置的“ map”方法。 我們可以通過創建一個高階函數自己編寫它。

假設我們有一個字符串數組，我們想將其轉換為數字數組，其中每個元素代表原始數組中元素的長度。

实时编辑器

function learnJavaScript() { // Source array const strArray = ['English', 'JavaScript', 'React', 'TypeScript', 'AWS'] // higher order function mapForEach () takes a formal (hypothetical) function fn and a formal array arr let mapFor = (arr, fn) => { const newArray = [] for (let i = 0; i < arr.length; i++) { newArray.push(fn(arr[i])) // We apply the hidden function fn () to each element } return newArray // Returning a new array } // The main conversion code - mapForEach() is called with specific parameter values const lenArray = mapFor(strArray, item => item.length + ' ') return 'Word length: ' + lenArray // [ 7, 10, 5, 10, 3 ] }

function learnJavaScript() {
  // Source array
  const strArray = ['English', 'JavaScript', 'React', 'TypeScript', 'AWS']
  // higher order function mapForEach () takes a formal (hypothetical) function fn and a formal array arr
  let mapFor = (arr, fn) => {
    const newArray = []
    for (let i = 0; i < arr.length; i++) {
      newArray.push(fn(arr[i])) // We apply the hidden function fn () to each element
    }
    return newArray // Returning a new array
  }
  // The main conversion code - mapForEach() is called with specific parameter values
  const lenArray = mapFor(strArray, item => item.length + ' ')

  return 'Word length: ' + lenArray // [ 7, 10, 5, 10, 3 ]
}

结果

Loading...

在上面的示例中，我們創建了自己的高階函數 mapFor(), 這需要一個數組 arr 和一個回調函數 fn. 該函數遍歷此數組並調用回調函數 fn 在 - 的里面 newArray.push() f或每次迭代，計算數組單詞中的字符數，其計算算法以第二個變量的形式描述 .

::: 筆記回調 回調函數是作為參數傳遞給另一個函數的函數，然後在完成操作後調用該函數。

:::

callback 功能 ⚙️ fn 獲取數組的當前元素並返回當前元素的長度，該長度現在存儲在 newArray. 之後 For() 循環完成, newArray 返回元素的長度 lenArray.

請記住，任何算法，無論多麼小，都包括三個階段：

-階段1-變量和函數的初始化 -階段2-高階函數（邏輯） -階段3-答案的結論。

結論

我們了解了什麼是高階函數，並研究了其中幾種已經內置在該語言中的函數。 我們學會了自己創建它們。

無需贅述，高階函數⚙️可以這樣表示：這些是可以將函數⚙️作為參數甚至返回函數⚙️的函數⚙️。

問題？

寫給 Discord 聊天。

問題：

一流的功能：

1.一流的設施 2.第五類的設施 3.一流的設施

高階函數：

1.以函數作為參數或返回函數作為輸出 2.只接受一個函數作為參數 3.只返回一個函數作為輸出

高階函數：

1.創造自己是不現實的 2.只能通過內置方法使用 3.您可以創造自己

為了了解您學到了多少本課程，請對 mobile application 我們學校就這個話題。

鏈接:

1. Exploring Higher-Order Functions in JavaScript
2. Article "Higher-order functions in JavaScript"
3. Expressive Javascript. Article "Higher-order functions"
4. Code for Teens: The Perfect Beginner's Guide to Programming, Volume 1: Javascript - Jeremy Moritz

貢獻者 ✨

感謝這些好人 (emoji key):

Dmitriy K.

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨