Javascript 共通高階関数の詳細

Javascript 共通高階関数の詳細

Higher Order function 。英語ではHigher Order functionと呼ばれます。別の関数をパラメータとして受け取ることができる関数を高階関数と呼びます。

例:

関数 add(x, y, f) {
 f(x) + f(y) を返します。
}

//コードで検証:
追加(-5, 6, Math.abs); // 11

1. 一般的な高階関数

ES6配列にいくつかの新しいメソッドが追加されましたが、そのうちmapreducefilterすべて高階関数です。また、通常のsortも高階関数です。以下に3つの新しい方法を紹介します。

1.1、フィルター

filterは、配列をフィルタリングし、条件を満たすデータを返し、新しい配列を形成してそれを返し、条件を満たさないデータを破棄します。

例1:配列内の100未満のデータを取り出し、新しい配列に格納する

grad = [ 102, 188, 55, 66, 200, 800 ] とします。
arr2 = grad.filter( 関数(item){
 返品商品 <= 100
})
console.log("arr2",arr2) // 55, 66

上記の例では、 filterに渡されるパラメータは関数です。渡された関数は各要素に順番に作用し、戻り値がtruefalseかに基づいて要素を保持するか破棄するかを決定します。要件を満たすのは 55 と 66 のみなので、新しい配列にはこれら 2 つの要素のみが含まれます。

1.2、地図

マップとは地図を描くことを意味します。

元の配列は新しい配列にマップされ、元の配列は変更されずに、戻り値は新しい配列になります。新しい配列の長さは元の配列と変わりません。

例 2:データの各要素を 2 倍に拡大します。

arr2 = [ 55, 66 ] とする
arr3 = arr2.map( 項目 => {
 返品商品*2
})
//結果を返す [110, 132]

上記の例では、 mapが受け取るパラメータは関数であり、各要素に順番に作用して要素を 2 倍に拡大し、任意の複雑な操作を実行することもできます。

1.3、減らす

reduce配列を要約するプロセスです。多くの場合、配列が入力され、データの一部が出力されます。合計や平均の計算によく使用されます。

例 3:前の例で返された結果を合計します。

合計をarr3.reduce((tmp,item)=>{とする
 tmp+item を返す
})
//結果242を返す

さて、ここからが本題です。上記の 3 つの例を組み合わせた場合、最終的にどれだけシンプルに書けるでしょうか?

執筆責任者:

// 複雑な記述 let grad = [102,188,55,66,200,800]
arr2 = grad.filter(function(item){
 返品商品 <= 100
})
arr3 = arr2.map(item=>{ とする
 返品商品*2
})
合計をarr3.reduce((tmp,item)=>{とする
 tmp+item を返す
})

簡単な書き方:

// 簡単な書き方 let sum2 = grad
           .filter( 項目 => { 項目を返す <= 100 })
          .map(item=>{戻り値アイテム*2})
          .reduce((tmp,item)=>{tmp+itemを返す})

Javascript一般的な高階関数の詳細に関するこの記事はこれで終わりです。Javascript Javascript一般的な高階関数の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScriptの高階関数の詳細な説明
  • JavaScriptの高階関数の詳細な研究
  • JavaScript 関数型プログラミングにおける高階関数の使用法の分析
  • JS高階関数の原理と使用例の分析
  • JavaScriptの高階関数の魅力を徹底解説
  • JSの高階関数5つを共有する

<<:  MySQL で削除されたレコードが有効にならない理由のトラブルシューティング

>>:  http.server に基づく LAN サーバーの構築プロセスの分析

推薦する

シンプルな商品スクリーニング機能を実現するjs

この記事の例では、商品スクリーニング機能を実装するためのjsの具体的なコードを参考までに共有していま...

データベースのデフォルトパスを変更した後にmysqlが起動できない問題の解決策

序文mysql がデフォルトのデータベース パスを変更したため、サービスを開始できませんでした。ログ...

CentOS 7 で Docker のポート転送をファイアウォールと互換性のあるように設定する方法

CentOS 7 では、次のようなコマンドを使用してホスト ポートをコンテナー ポートにマッピングす...

MySQL アカウント情報をエレガントにバックアップする方法

序文:最近、インスタンスの移行の問題に遭遇しました。データの移行後、データベースのユーザーと権限も移...

MySQL インポートおよびエクスポートのバックアップの詳細

目次1. MySQLのバックアップタイプの詳細な説明1. バックアップがデータベースに与える影響に基...

Docker 実行オプションを使用して Dockerfile の設定を上書きする

通常は、最初に Dockerfile ファイルを定義し、次に docker build コマンドを使...

MySQL 5.7を完全にアンインストールするための詳細な手順

この記事は主に、MySQLを再インストールする際のクリーンでないアンインストールのさまざまな問題をま...

MySQLで時間別データと最後の時間別データの差をクエリするアイデアの詳細な説明

1. はじめに要件は、特定の時間範囲内で、1 時間ごとのデータと前の 1 時間ごとのデータの差と比率...

ReactとReduxの関係を詳しく説明

目次1. reduxとreactの関係2. Reactのマルチコンポーネント共有3. reduxの3...

MySQL の悲観的ロックと楽観的ロックの使用例

悲観的ロック悲観的ロックは、データを悲観的であるとみなします。データをクエリするときに、ロックを追加...

HTML 内の input type="reset" タグが無効 (機能しない) である理由として考えられるもの。

<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...

TypeScript 学習ノート: 型の絞り込み

目次序文型推論真理値の絞り込み平等の縮小演算子の絞り込みインスタンスの絞り込み狭まりの本質ユニオン型...

Vueウォッチの監視方法の概要

目次1. Vueにおけるwatchの役割はその名の通り、監視の役割です。 2. このオブジェクトのプ...

Linux md5sumコマンドの使い方

01. コマンドの概要md5sum - MD5検証コードを計算して検証するmd5sum コマンドは、...

nginx共有メモリの仕組みの詳細な説明

Nginx の共有メモリは、高いパフォーマンスを実現できる主な理由の 1 つであり、主にファイル キ...