ホームページ >ウェブフロントエンド >jsチュートリアル >10のLodash機能ES6に置き換えることができます
Lodashは現在、NPMパッケージで最も依存しているライブラリですが、ES6を使用している場合、実際には必要ない場合があります。この記事では、多くの一般的なシナリオのコードを簡素化するために、ネイティブの収集方法、矢印関数、その他の新しいES6機能を組み合わせる方法について説明します。
コアポイント
map
、filter
、reduce
、head
、&tail
そして休憩して広がります。 curry
、partial
、演算子、パス、pick
、constant
、identity
、noop
、およびチェーンの機能を置き換えることもできます。スタイルコールとして。 これらの収集方法により、データ変換が簡単になり、ほぼ普遍的にサポートされています。矢印関数と組み合わせてそれらを使用して、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>
これだけではありません。最新のブラウザを使用している場合は、find
、some
、every
、reduceRight
を使用することもできます。
分解構文を使用すると、実際の機能を必要とせずにリストの頭と尾を取得できます。
<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
curry
lodashには、構文演算子を関数に再現する多くの関数が含まれているため、収集方法に渡すことができます。ほとんどの場合、矢印関数はそれらをシンプルで短くして、それらをインラインで定義できるようにします:
lodashの多くの関数は、パスを文字列または配列として使用します。矢印関数を使用して、より再利用可能なパスを作成できます。
ユーティリティを使用すると、ターゲットオブジェクトから目的の属性を選択できます。解体および略語オブジェクトリテラルを使用して同じ結果を達成できます。
pick
結論
Lodashはまだ素晴らしいライブラリであり、この記事は、JavaScriptの進化したバージョンが、過去のユーティリティモジュールに依存していくつかの問題を解決できる方法についての新しい視点にすぎません。それを無視しないでください。代わりに、次回抽象化が必要なときに、単純な関数を置き換えることができるかどうかを検討してください!
(FAQの部分は省略されています。なぜなら、コードの擬似オリジナリ性とは関係がなく、長いため)
以上が10のLodash機能ES6に置き換えることができますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。