開発者はタスクを完了する必要があるだけでなく、より効率的な方法でタスクを実行する必要もあります。 現在JavaScriptで利用可能なライブラリがいくつかあり、開発者が変数を簡単に操作できるようになっています。 このチュートリアルでは、Lodashライブラリの最も一般的な関数を利用する方法を学習します。
Lodashをまだ試したことがない場合は、今がその瞬間です。 Lodashは、配列、整数、オブジェクト、テキスト、およびその他のデータ型の操作を簡単にする最新のJavaScriptユーティリティパッケージです。
さまざまな種類のオブジェクトを処理するのに役立ち、ジェネリックメソッドをコーディングする必要がなくなるため、時間を節約できます。 コードはより少ない行でよりクリーンになり、すべてのブラウザーで機能します。 まだ利用していない場合は、慎重に検討する必要があります。
Lodashを採用しないことは、JavaScriptコードベースにとって大きな損失です。 これは、私たちが取り組んでいる一般的な課題に対するバグのないエレガントなソリューションであり、それを利用すると、コードが読みやすく管理しやすくなります。
より人気のある(またはそうでない!)Lodash関数のいくつかを掘り下げて、このライブラリが非常に便利で美しいことを発見しましょう。
1._.sortedUniq
重複したすべての値がこの値で返されるわけではありません。 ソートされた配列専用であるため、これは主に速度上の理由で使用されます。 これは、大きな配列を処理している場合にのみ役立ちます。 速度を向上させたい場合は、配列を並べ替えて、並べ替えられた配列でより適切に動作するメソッドを使用してください。
Lodashには、これに類似した他の多くの機能があります。 .sortedIndex、.sortedIndexBy、.sortedIndexOf、.sortedLastIndex、.sortedLastIndexBy、.sortedLastIndexOf、.sortedUniq、.sortedUniqBy、.sortedUniqBy、.sortedUniqBy、.sortedUniqByを確認できます。
2._.reduce
_.reduceはフィルター関数に似ています。 唯一の違いは、返されたオブジェクトの形式を選択できることです。 私が言っていることを理解していなければ、それは正常なことです。 その例があります。
基本的に、年齢別に分類されたユーザーを含む新しいオブジェクトを返しますが、18〜59歳のユーザーのみが対象です。このLodashヘルパー関数は、最も一般的に使用されている関数の6つです。 ESXNUMXにも含まれています。 また、XNUMXつの典型的な失敗を指摘したいと思います。関数の終了時に結果を返すことを忘れないでください。また、結果のデフォルト値をXNUMX番目のパラメーターとして指定します(ここ)。
3._.getおよび._set
これについては、ほぼ同じことを実行するXNUMXつの関数を示して、少しだまします。 _.getはオブジェクトからプロパティ値を返し、_。setは、ご想像のとおり、値を使用してプロパティを設定します。 パスを介してプロパティにアクセスできることを除いて、ユニークなものはありません。
例を見てみましょう。
_.setの呼び出し中にパスが存在しない場合は、パスが生成されます。 「未定義のプロパティ'アイテム'を設定できません」というエラーは発生しなくなります。 パスが存在しない場合、_。getはエラーではなくundefinedを返します。 パスが未定義に解決された場合は、デフォルト値(XNUMX番目のパラメーター)を指定することもできます。
4._.find
配列をループして単一のオブジェクトを見つける代わりに、_。findを使用することもできます。 それは良いことですが、_。findができることはそれだけではありません。 XNUMX行のコードで、多数のプロパティを利用してオブジェクトを検出することもできます。 見てみな!
5._.keyBy
私のお気に入りの100つは_.keyByです。 特定の属性を持つオブジェクトを取得しようとするときに非常に役立ちます。 34個のブログエントリがあり、IDが「XNUMXabc」のブログエントリを取得するとします。 どうやってやるの? しばらく様子を見てみましょう! このメソッドは、サーバーがオブジェクトコレクションを配列として提供する場合に、オブジェクトコレクションを配置するのに役立ちます。 関数は、XNUMX番目の引数としても使用できます。
6._.forEach
このメソッドは、オブジェクトの配列をXNUMXつずつ繰り返し処理するため、必要なロジックを実行できます。 この最初の例では、ユーザーオブジェクトのリストをループし、それらの名前と名前をマージして、fullNameという新しいプロパティを作成します。
forEachは、XNUMXつのパラメーターを受け入れます。 ループしている配列が最初のパラメーターです。 XNUMX番目の引数は反復関数であり、最初のパラメーターは個々のアイテムの参照であり、XNUMX番目のパラメーターは反復の現在のインデックスです。
7._.map
マップは、forEachと同様に、値の配列全体で繰り返されます。 一方、map関数は、iterate関数によって提供される新しい値の配列を返します。 ここでのforEachの例と同じユーザーのコレクションを利用しています。 _.mapを使用して、すべてのユーザーの完全な名前のフラット化された配列を持つ新しい変数を生成できます。
8._.difference
差分関数は、最初の配列とXNUMX番目の配列の間で異なる値の新しい配列を生成します。 議論の場所が結果に影響を与えることに注意することが重要です。
9._.get
_.get()関数は、オブジェクト内の要素を見つけるのに役立ちます。 指定されたパスに要素が見つからない場合に返される_.get()関数のデフォルト値を設定できます。 _.get()関数はXNUMXつのパラメーターを取ります。最初のパラメーターは、要素を取得するオブジェクトです。 パスはXNUMX番目です。 XNUMX番目の値は、要素が見つからない場合に返すデフォルト値です。
10._.find
_find()関数は、_。get()メソッドと同じように見える場合があります。 _.find()関数は、_。get()メソッドと同様に、XNUMXつのパラメーターを受け入れます。 ただし、_。get()メソッドとは異なり、最初の引数は配列またはオブジェクトにすることができます。 XNUMX番目の引数は、各反復で呼び出される関数を指定します。 XNUMX番目の入力は、コレクションの開始インデックスです。 _.find()関数は、コレクション内の各要素を反復処理するためです。
11._.groupBy
関数の結果(またはランダムに選択されたプロパティ名)によって名前が付けられたオブジェクトを作成します。各値は、同じキーを持つオブジェクトの配列です。
12._.set
メソッド_.set()は、メソッド_.get()の逆です。 指定されたパスの要素の値を変更します。 オブジェクトまたは配列が最初のパラメーター、パスがXNUMX番目、設定する値がXNUMX番目です。
13._.merge
Object.assignと同様に機能しますが、基になる構造の奥深くまで再帰して、オブジェクトを置き換えるのではなく、より深いオブジェクトを更新します。
14. ._バリ取り
これはかなり簡単な例です。 すべての「発音区別符号の組み合わせ」が削除されます。 したがって、「é」は「e」になります。 国際化とローカリゼーションがある場合は、検索機能のテキストのバリ取りを行うことをお勧めします。
15._。デバウンス
これは、最も効果的なLodash戦略のXNUMXつです。 また、それが何をするのか、いつ使用すべきかを把握するのは難しいかもしれません。 _.debounce()メソッドは関数を返します。 _.debounce()メソッドの関数は、関数が最後に呼び出されてから指定されたミリ秒数が経過するまで呼び出しを遅らせます。
まとめ
Lodashは、JavaScript言語の強力な拡張機能です。 最小限の労力で、簡潔で効率的なコードを作成できます。 Lodashも完全にモジュール化されています。 その機能の一部は最終的に非推奨になる可能性がありますが、それでもJS言語の進化を推進しながら、開発者に多くのメリットを提供すると思います。
これらのいくつかのLodash機能が、配列、オブジェクト、およびコレクションを操作するときにLodashがどれほど強力であるかを理解するのに役立つことを願っています。 あなたは訪問するかもしれません ドキュメント それが提供しなければならない他の多くのオプションを探索するために。
コメントを残す