ホームページ > ウェブフロントエンド > jsチュートリアル > Javascriptの高階関数とは何ですか

Javascriptの高階関数とは何ですか

Patricia Arquette
リリース: 2024-10-22 06:21:31
オリジナル
1076 人が閲覧しました

What is higher-order function in Javascript

高階関数とは何ですか?

高階関数は、次のいずれかの関数です。

  • 1 つ以上の関数を引数として受け取ります
  • 関数を結果として返します

これは関数型プログラミングの基礎の 1 つです。

JS の高階関数の例:

//map() and reduce()
let nums = [1, 2, 3, 4]
let addOne = nums.map((i) => i+1) // [2,3,4,5]
let combined = nums.reduce((res, cur) => res+=cur, 0) // 10
ログイン後にコピー

なぜ高階関数を使用するのでしょうか?

繰り返されるパターン (抽象化) と再利用性を簡素化します。

数値のリストを操作していて、さまざまな演算 (2 倍、2 乗、定数の加算など) を実行する必要があると想像してください。複数の同様のループを記述する代わりに、高階関数を使用して動作を抽象化できます。

//normal version
let numbers = [1, 2, 3, 4]; 

const squares = (nums) => {
    let result = [];
    for(let i of nums) {
        result.push(i*i);
    }
    return result;
}

const addThree = (nums) => {
    let result = [];
    for(let i of nums) {
        result.push(i+3);
    }
    return result;
}
squares(numbers) // [1,4,9,16]
addThree(numbers) // [4,5,6,7]
ログイン後にコピー
//higher-order function version
let numbers = [1, 2, 3, 4]; 

const applyAll = (func, nums) => {
    let result = [];
    for(let i of nums) {
        result.push(func(i));
    }
    return result;
}

applyAll((i) => i*i, numbers) // [1,4,9,16]
applyAll((i) => i+3, numbers) // [4,5,6,7]
ログイン後にコピー

1 つの汎用高階関数 applyAll を使用すると、複数の操作を処理し、コードの繰り返しを回避できます。

小さな関数から複雑なロジックを構築する (コンポーザビリティ)

小さな関数を構成することで、より複雑な動作を構築できます。たとえば、最初に数値のリストをフィルタリングして偶数のみを取得し、次にそれらを 2 倍にして、すべてを加算する場合は、高階関数を連鎖することができます。

//you can chain filter -> map -> reduce
let numbers = [1, 2, 3, 4];
let result = numbers
    .filter(i => i%2===0)
    .map(i => i*2)
    .reduce((res, cur) => res+=cur, 0); // 12
ログイン後にコピー

各ステップ (フィルタリング、マッピング、削減) は高次関数によって処理されるため、プロセスがよりモジュール化され、保守が容易になり、個別にテストできるようになります。


それだけです!ここまで読んでいただきありがとうございました。次回まで!

以上がJavascriptの高階関数とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート