ホームページ >ウェブフロントエンド >jsチュートリアル >10のLodash機能ES6に置き換えることができます

10のLodash機能ES6に置き換えることができます

William Shakespeare
William Shakespeareオリジナル
2025-02-15 09:55:12255ブラウズ

10 Lodash Features You Can Replace with ES6

Lodashは現在、NPMパッケージで最も依存しているライブラリですが、ES6を使用している場合、実際には必要ない場合があります。この記事では、多くの一般的なシナリオのコードを簡素化するために、ネイティブの収集方法、矢印関数、その他の新しいES6機能を組み合わせる方法について説明します。

コアポイント

  • Lodashは現在、NPMパッケージで最も依存しているライブラリですが、場合によっては、ES6を使用することでその必要性を排除できます。
  • ネイティブセットメソッド、矢印関数、分解構文、およびレストおよびスプレッド演算子などの
  • ES6機能は、mapfilterreducehead、&tailそして休憩して広がります。
  • ES6は、矢印関数、RESTパラメーターを使用し、演算子を広めて、Lodashのcurrypartial、演算子、パス、pickconstantidentitynoop、およびチェーンの機能を置き換えることもできます。スタイルコールとして。
  • Lodashは依然として非常に貴重なライブラリですが、JavaScript(ES6)の進化バージョンは、Lodashなどのユーティリティモジュールによって以前に処理された問題を解決する新しい方法を提供します。
  1. マップ、フィルター、削減

これらの収集方法により、データ変換が簡単になり、ほぼ普遍的にサポートされています。矢印関数と組み合わせてそれらを使用して、Lodashが提供する実装を置き換えるために簡潔なコードを書き込むことができます:

<code class="language-javascript">// Lodash
_.map([1, 2, 3], function(n) { return n * 3; });
// [3, 6, 9]
_.reduce([1, 2, 3], function(total, n) { return total + n; }, 0);
// 6
_.filter([1, 2, 3], function(n) { return n % 2; });
// [1, 3]

// ES6
[1, 2, 3].map(n => n * 3);
[1, 2, 3].reduce((total, n) => total + n, 0);
[1, 2, 3].filter(n => n % 2);</code>

これだけではありません。最新のブラウザを使用している場合は、findsomeeveryreduceRightを使用することもできます。

  1. ヘッド&テール

分解構文を使用すると、実際の機能を必要とせずにリストの頭と尾を取得できます。

<code class="language-javascript">// Lodash
_.head([1, 2, 3]);
// 1
_.tail([1, 2, 3]);
// [2, 3]

// ES6
const [head, ...tail] = [1, 2, 3];</code>
初期要素と最後の要素を同様に取得することもできます。

<code class="language-javascript">// Lodash
_.initial([1, 2, 3]);
// -> [1, 2]
_.last([1, 2, 3]);
// 3

// ES6
const [last, ...initial] = [...[1, 2, 3]].reverse();</code>
がデータ構造を変更すると思われる場合は、スプレッドオペレーターを使用してアレイをクローンで呼び出してから呼び出してください。

reverse reverse

休息と広がり
  1. rets and Spread関数を使用すると、変数数のパラメーターを受け入れる関数を定義および呼び出すことができます。 ES6は、これら2つの操作に特別な構文を導入します。

curry

  1. TypeScriptやFlowなどの高レベルの言語がなければ、関数にタイプの署名を提供することはできません。これにより、カリーが非常に困難になります。 Curried関数を受け取った場合、次に提供されているパラメーターの数とどのパラメーターを提供する必要があるかを知ることは困難です。矢印関数を使用して、カレー関数を明示的に定義して、他のプログラマーが理解しやすくすることができます。

  2. partial

  1. カリーのように、矢印関数を使用していくつかのアプリケーションをシンプルで明確にすることができます:

    1. オペレーター

    lodashには、構文演算子を関数に再現する多くの関数が含まれているため、収集方法に渡すことができます。ほとんどの場合、矢印関数はそれらをシンプルで短くして、それらをインラインで定義できるようにします:

    1. パス

    lodashの多くの関数は、パスを文字列または配列として使用します。矢印関数を使用して、より再利用可能なパスを作成できます。

    1. ピック

    ユーティリティを使用すると、ターゲットオブジェクトから目的の属性を選択できます。解体および略語オブジェクトリテラルを使用して同じ結果を達成できます。 pick

    1. 定数、アイデンティティ、noop

    2. Lodashは、特定の動作を備えた単純な関数を作成するためのユーティリティを提供します:

    1. チェーン&フロー

    2. Lodashは、チェーンステートメントを書くのに役立ついくつかの機能を提供します。多くの場合、組み込みのコレクションメソッドは、直接チェーンできる配列インスタンスを返しますが、これはいくつかの方法がコレクションを変更する場合には不可能です。ただし、矢印関数の配列と同じ変換を定義できます。

    結論

    Lodashはまだ素晴らしいライブラリであり、この記事は、JavaScriptの進化したバージョンが、過去のユーティリティモジュールに依存していくつかの問題を解決できる方法についての新しい視点にすぎません。それを無視しないでください。代わりに、次回抽象化が必要なときに、単純な関数を置き換えることができるかどうかを検討してください!

    (FAQの部分は省略されています。なぜなら、コードの擬似オリジナリ性とは関係がなく、長いため)

以上が10のLodash機能ES6に置き換えることができますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。