ホームページ > ウェブフロントエンド > フロントエンドQ&A > JavaScript で関数型プログラミングが使用されるのはなぜですか?

JavaScript で関数型プログラミングが使用されるのはなぜですか?

青灯夜游
リリース: 2022-09-30 15:10:14
オリジナル
1546 人が閲覧しました

理由: 1. js の構文は関数型プログラミング言語 Scheme から借用されています。 2. ブラウザに関する限り、さまざまなシングルページ フレームワークの開発により、クライアントの処理能力は向上し続けており、クライアントに配置されるビジネス ロジックの数はますます増加しており、その結果、状態がますます増加しています。 ;その後の問題は、注意しないと外部変数に依存する関数を多数使用することになります。これらの関数はビジネス ロジックとともに増加し続け、結果として論理分岐が急増します。ステータスの追跡が難しく、コードの可読性が低く、保守が困難ですが、関数型プログラミングには優れた解決策があります。

JavaScript で関数型プログラミングが使用されるのはなぜですか?

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

1. 関数型プログラミングとは何ですか?

関数型プログラミング (FP) は、FP と呼ばれ、手続き型プログラミング (手続き型プログラミング) とは対照的に、ライブラリやフレームワークではなく、プログラミング パラダイムです。 FP は、純粋関数抽象データ処理を宣言することで、外部状態およびシステムに対する関数呼び出しの副作用を回避または最小限に抑えます。

いわゆる副作用には、一般に、関数外でのシステム状態の変更、例外のスロー、ユーザー操作の処理、入力パラメーターの変更、データベース クエリ操作、DOM 操作などが含まれ、システム エラーを引き起こす可能性があります。

#2. JavaScript で関数型プログラミングのアイデアを使用する理由

##2.1 言語特性の観点から

# #JavaScript の初期構文は、関数型プログラミング言語 Scheme から借用されました。言語標準の進歩に伴い、言語自体の機能は常に充実しており、クロージャ、アロー関数、高階関数、配列反復などの関数により、JavaScript での FP の実装が容易になります。 :

2.1.1. ラムダ式

ラムダ式は実際には、入力と出力の間のマッピング関係を明確に表現するために矢印を使用する匿名関数であり、JavaScript はこれを実装するためにアロー関数を使用します。

const multiply = x => x * x
multiply(6) // 36
ログイン後にコピー

2.1.2 高階関数

高階関数は、1 つ以上の関数を入力パラメーターとして受け入れ、関数を出力できます。

簡単な例を 2 つ書いてください

const add = x => y => x + y
const add10 = add(10)
add10(5) // 15
const compose = (...fns) => x =>  fns.reduce((acc, fn) => fn(acc), x)
const a = x => x + 1
const b = x => x + 2
const composedFn = compose(a, b)
composedFn(1) // 1 + 1 + 2 = 4
ログイン後にコピー

2.1.3 フィルター マップ forEachreduce 反復

Array.prototype の下のフィルター マップ forEachreduce は、入力のためすべて高階関数です。パラメータは関数です。

const flatten = (arr = []) => arr.reduce(
  (acc, val)=> accconcat(Array.isArray(val) ? flatten(val) : val),
  []
)
let arr = [1,[ 4, 5 ], 2, 3];
flatten(arr)  // [1, 4, 5, 2, 3]
ログイン後にコピー

2.2 実際のニーズの観点から

ブラウザに関しては、さまざまなシングルページフレームワークの開発に伴い、クライアントの処理能力が向上します。ますます多くのビジネス ロジックがクライアントに配置され、その結果、クライアントによって維持される状態がますます増えています。問題は、気をつけないと外部変数に依存する関数を大量に使用することになり、これらの関数はビジネスロジックに伴って増え続け、結果として論理分岐が急増し、状態を把握しにくくなるということです。追跡が難しく、コードの可読性が低く、保守が困難ですが、FP は優れた解決策を持っています。

また、現在主流のプログラミング言語は基本的に関数型プログラミングの機能を導入しており、オブジェクト指向で有名なJavaでもストリームラムダ式を利用することで関数型プログラミングのアイデアを実践することができ、Spring5はもっと見る Reactive を主なセールスポイントとして使用しています。つまり、FP は最近非常に人気があります。

JS の関数型プログラミング エコシステムも常に充実しており、RxJS や CircleJS などのフレームワークがフロントエンドの生産ラインで使用されることが増えています。

3. 関数型プログラミングを使用する利点

FP プログラミングを使用すると、次の主な利点があります:

データと処理ロジックを分離すると、コードはより簡潔でモジュール化され、読みやすくなります
  • ##テストが簡単、テスト環境のシミュレーションが簡単

  • #ロジック コードの強力な再利用性
  • 4. 関数型プログラミングに関連する概念

関数型プログラミングの実装は主に次のものに依存します。上: #宣言型プログラミング

純粋な関数
  • 不変データ
  • 4.1 宣言型プログラミング
  • 宣言型プログラミング
は、ターゲットの性質を記述するだけなので、形式的なロジックを抽象化し、計算すべき内容をコンピューターに指示します。段階的に計算する方法よりも。たとえば、通常、SQL、FP などです。

命令型プログラミング 命令型プログラミング

各ステップの計算操作をコンピューターに伝える

for ループを使用した最も単純な同じ配列の処理は、map とlike 操作は宣言的です。宣言型プログラミングを使用すると、コードが簡素化され、再利用が向上し、リファクタリングの余地が残ります。

4.2 純粋関数

純粋関数の簡単な概要には 2 つの特徴があります。

関数の出力は次のとおりです。入力に関連し、同じ入力によって生成される出力は一貫性があり、外部条件に依存しません

関数呼び出しは関数ドメイン外のステータスや変数を変更せず、システムへの副作用

    看个简单的例子:

    let counter = 0
    const increment = () => ++counter
    const increment = counter => ++counter
    ログイン後にコピー

    前一个函数每次调用都会修改外部变量的值,返回值也依赖于外部变量;后一个函数对于同一输入值每次返回的结果都相同,并且不会对外部状态造成影响。所以后一个是纯函数。

    为什么要追求函数的纯度,这就涉及到一个称为引用透明性的概念。

    4.2.1 引用透明性

    纯函数的这种函数的返回值只依赖于其输入值的特性,被称为引用透明性(referential transparency),纯函数都是可以进行缓存的。

    const memorize(pureFn) {
      const _cache = {}
      return (...args) => {
        const key = JSON.stringify(args)
        return _cache[key] || (_cache[key] = purFu.apply(null, args))
      }
    }
    ログイン後にコピー

    4.3 Immutable Data

    「可变的全局状态是万恶之源」(其实从功能代码的角度看,局部和全局是相对而言的),简而言之可变状态会让程序的运行变得不可预测,代码可读性差,难以维护。

    在 JS 中,当函数入参是对象类型的数据时,我们拿到的其实是个引用,所以即使在函数内部我们也是可以修改对象内部的属性,这种情景依然会产生副作用。

    所以这个时候就需要引入 Immutable 的概念。 Immutable 即 unchangeable, Immutable data在初始化创建后就不能被修改了,每次对于 Immutable data 的操作都会返回一个新的 Immutable data。 所以并不会对原来的状态形成改变(当然不是简单的深拷贝再修改)。

    Immutable 比较流行的 JS 实现有 immutable-js 和 seamless-immutable; 对于 React 党来说, immutable-js 一点都不陌生, immutable-js 配合 Redux 就是一种很好的 FP 实践。

    const map1 = Immutable.Map({a:1, b: {d:2}, c:3});
    const map2 = map1.set('a', 50);
    map1 === map2 // false
    const mapb1 = map1.get('b')
    const mapb2 = map2.get('b')
    mapb1===mapb2 // true
    ログイン後にコピー

    【相关推荐:javascript视频教程编程视频

    以上がJavaScript で関数型プログラミングが使用されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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