高階関数

高階⚙️関数を使用すると、JavaScriptを次の目的で使用できます。関数型⚙️プログラミング. このような関数⚙️はJavaScriptで広く使用されています。 JavaScriptプログラミングを行ったことがある場合は、おそらく気付かないうちにそれらを使用したことがあるでしょう。

この概念を完全に理解するには、最初に関数型⚙️プログラミングとファーストクラス⚙️関数の概念を理解する必要があります。

関数型プログラミングとは何ですか？

関数型プログラミングは、離散数学とプログラミングパラダイムのセクションであり、計算のプロセスは、後者の数学的な理解における関数の値の計算として解釈されます（手続き型プログラミングのサブルーチンとしての関数とは対照的です）。 [Wikipedia]

第一級関数

すでにJavaScriptを学んでいる場合は、JavaScriptが関数⚙️をファーストクラスのオブジェクトとして扱うと聞いたことがあるかもしれません。 JavaScriptでは、関数⚙️は他の関数型プログラミング言語と同じようにオブジェクトです ⚙️。 JavaScriptでは、関数⚙️は特殊なタイプのオブジェクトです。 これらはFunctionオブジェクトです。 例えば：

Live Editor

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

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

  return greeting()
}

Result

Loading...

これで、ファーストクラスの⚙️関数が何であるかがわかりました。 高階関数に進むことができます。

高階関数

これらは、関数⚙️を引数として取るか、関数⚙️を出力として返す関数⚙️です。

たとえば、これらの高階関数⚙️は言語に組み込まれています ： map（） filter（）および reduce（）

例1。 番号を変更する.push

数字の配列があるとしましょう。 最初の配列の2倍の値を含む新しい配列 を作成したいと思います。 高階関数⚙️がある場合とない場合で、この問題をどのように解決できるかを見てみましょう。

高階関数なし：

Live Editor

function learnJavaScript() { const arr1 = [1, 2, 3, 4] const arr2 = [] for (let i = 0; i < arr1.length; i++) { arr2.push(arr1[i] * 2) // 配列arr2はループで成長します } return arr2 // 2, 4, 6, 8 スペースなし }

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

  for (let i = 0; i < arr1.length; i++) {
    arr2.push(arr1[i] * 2) // 配列arr2はループで成長します
  }

  return arr2 // 2, 4, 6, 8 スペースなし
}

Result

Loading...

高階関数⚙️mapコンソールバージョンの場合：

Live Editor

function learnJavaScript() { const arr1 = [1, 2, 3, 4] const arr2 = arr1.map(function (item) { // 古いバージョン return item * 2 + ' ' }) return arr2 }

function learnJavaScript() {
  const arr1 = [1, 2, 3, 4]
  const arr2 = arr1.map(function (item) {
    // 古いバージョン
    return item * 2 + ' '
  })
  return arr2
}

Result

Loading...

「arrowfunction」構文を使用して、さらに短く書くことができます。

Live Editor

function learnJavaScript() { const arr1 = [1, 2, 3, 4, 5] const multTwo = item => item * 2 + ' ' const arr2 = arr1.map(multTwo) // 1行のアルゴリズム return arr2 }

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

  const arr2 = arr1.map(multTwo) // 1行のアルゴリズム

  return arr2
}

Result

Loading...

例2。 計算値.map

さまざまな人々の誕生年を含む配列があるとしましょう。 彼らの年齢を保持するために配列を作成する必要があります。

例：高階関数なし⚙️（クラシック- for（）ループとpush（）を介して）

Live Editor

function learnJavaScript() { const birthYear = [1975, 1997, 2002, 1995, 1985] const ages = [] for (let i = 0; i < birthYear.length; i++) { let ageNew = 2020 - birthYear[i] + ' ' // 新しい配列の現在の値 ages.push(ageNew) // 新しい値をages[]配列に入れます } return ages // [ 45, 23, 18, 25, 35 ] スペースなし }

function learnJavaScript() {
  const birthYear = [1975, 1997, 2002, 1995, 1985]
  const ages = []
  for (let i = 0; i < birthYear.length; i++) {
    let ageNew = 2020 - birthYear[i] + ' ' // 新しい配列の現在の値
    ages.push(ageNew) // 新しい値をages[]配列に入れます
  }

  return ages // [ 45, 23, 18, 25, 35 ] スペースなし
}

Result

Loading...

高階関数mapを使用すると：

Live Editor

function learnJavaScript() { const birthYear = [1975, 1997, 2002, 1995, 1985] let ages = birthYear.map(year => 2020 - year + ' ') // 矢印関数を介した1行のアルゴリズム return ages // [ 45, 23, 18, 25, 35 ] }

function learnJavaScript() {
  const birthYear = [1975, 1997, 2002, 1995, 1985]
  let ages = birthYear.map(year => 2020 - year + ' ') // 矢印関数を介した1行のアルゴリズム
  return ages // [ 45, 23, 18, 25, 35 ]
}

Result

Loading...

点滅 1行のコードで新しい配列。

例3。 .filter（）条件チェックを使用

nameとageのプロパティを持つオブジェクトを含む配列があります。 大人（つまり、18歳以上）のみを含む配列を作成する必要があります。

高階関数なし（クラシック- for（）ループと push（）を介して）：

Live Editor

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 // 18歳以上の人数 }

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 // 18歳以上の人数
}

Result

Loading...

インライン条件を使用した高次のfilter関数の場合：

Live Editor

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) // 1行の条件を持つアルゴリズム return fullAge.length // 18歳以上の人数 }

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) // 1行の条件を持つアルゴリズム

  return fullAge.length // 18歳以上の人数
}

Result

Loading...

独自の高階関数の作成

これまで、言語に組み込まれた高階関数⚙️を見てきました 。 それでは、そのような関数を自分たちで作成しましょう⚙️。 JavaScriptに組み込みのmapメソッドがないことを想像してみてください。 高階関数⚙️を作成することで、自分で書くことができます。

文字列配列があり、それを数値の配列に変換したいとします。各要素は、元の配列からの要素の長さを表します。

Live Editor

function learnJavaScript() { // Исходный массив const strArray = ['English', 'JavaScript', 'React', 'TypeScript', 'AWS'] // 高階関数mapForEach（）は、正式な（仮想の）関数fnと正式な配列arrを取ります let mapFor = (arr, fn) => { const newArray = [] for (let i = 0; i < arr.length; i++) { newArray.push(fn(arr[i])) // 非表示のfn（）関数を各要素に適用する } return newArray // 新しい配列を返す } // メインの変換コード--mapForEach（）は、特定のパラメーター値で呼び出されます const lenArray = mapFor(strArray, item => item.length + ' ') return '単語の長さ： ' + lenArray // [ 7, 10, 5, 10, 3 ] }

function learnJavaScript() {
  // Исходный массив
  const strArray = ['English', 'JavaScript', 'React', 'TypeScript', 'AWS']
  // 高階関数mapForEach（）は、正式な（仮想の）関数fnと正式な配列arrを取ります
  let mapFor = (arr, fn) => {
    const newArray = []
    for (let i = 0; i < arr.length; i++) {
      newArray.push(fn(arr[i])) // 非表示のfn（）関数を各要素に適用する
    }
    return newArray // 新しい配列を返す
  }
  // メインの変換コード--mapForEach（）は、特定のパラメーター値で呼び出されます
  const lenArray = mapFor(strArray, item => item.length + ' ')

  return '単語の長さ： ' + lenArray // [ 7, 10, 5, 10, 3 ]
}

Result

Loading...

上記の例では、配列arrとコールバック関数fnを受け取る独自の高階関数mapFor（）を作成しました。この関数は、指定された配列をループし、内部でfnコールバック関数を呼び出します。各反復のnewArray.push関数（）は、配列のワード内の文字数を計算します。その計算アルゴリズムは、2番目の変数として記述されています。

callback

コールバック関数⚙️は、引数として別の関数⚙️に渡される関数⚙️であり、アクションが完了すると呼び出されます。

Callback関数⚙️fnは現在の配列要素を受け取り、現在の要素の長さを返します。これは現在newArrayに格納されています。 For（）ループが完了すると、newArrayはlenArrayの要素の長さを返します。

任意に小さいアルゴリズムは、次の3つの段階で構成されていることを忘れないでください。

• ステージ1-変数の初期化と関数
• ステージ2-高階関数（ロジック）
• ステージ3-答えの結論。

結論

高階関数とは何かを学び、すでに言語に組み込まれている関数のいくつかを整理しました 。 自分でそれらを作成することを学びました。

詳細に立ち入ることなく、高階関数⚙️は次のように言うことができます。これらは、関数⚙️を引数として取り、関数⚙️を返すことができる関数⚙️です。

問題？

に書き込む Discord または電報 チャット, また、私たちの購読 ニュース

質問：

第一級関数：

1. ファーストクラスオブジェクト
2. 5番目のクラスのオブジェクト
3. 最高クラスのオブジェクト

高階関数：

1. 関数を引数として取るか、関数を出力として返します
2. 引数としてのみ関数を取ります
3. 関数を出力としてのみ返す

高階関数：

1. 自分で作ることは不可能
2. 組み込みの方法でのみ使用できます
3. 独自に作成できます

このレッスンでどれだけ学んだかを理解するために、モバイルアプリ このトピックに関する私たちの学校。

リンク：

1. JavaScriptで高階関数を学ぶ
2. 記事「JavaScriptの高階関数」
3. 表現力豊かなJavascript。 記事「高階関数」
4. 十代の若者たちのためのコード：プログラミング第1巻の偉大な初心者向けガイド：Javascript-Jeremy Moritz

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dmitriy K.

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨