機能的なJavaScriptのフィルタリングとチェーン

JavaScriptの語彙：オブジェクト指向、命令的、機能的なプログラミング

JavaScriptの力は、オブジェクト指向のプログラミング、命令的プログラミング、および機能的プログラミングをサポートする汎用性です。開発者は、プロジェクトのニーズとチームの好みに応じて、プログラミングパラダイムを柔軟に切り替えることができます。

ES5は、機能的なプログラミングを大幅に促進するmap、reduce、filterなどのネイティブアレイメソッドを導入します。その中で、filterメソッドは、配列内の各要素を繰り返して、指定されたテスト条件に基づいて新しい配列に追加するかどうかを決定できます。

filterメソッド

を使用してコードを簡素化します

filterメソッドは、コードをより簡潔で明確にします。配列内の各要素を反復し、テスト関数を適用します。テスト関数がtrueを返す場合、要素はfilterメソッドによって返される新しい配列に含まれます。

filterメソッドは、ES5の他の2つの関数配列メソッド、mapおよびreduceと組み合わせて機能し、元の配列を変更しながら簡潔で効率的なコードを作成するために組み合わせて使用​​できます。

filterメソッドはforループよりもわずかに遅くなる可能性がありますが、コードのシンプルさと保守性の利点により、推奨されるプラクティスになります。 JavaScriptエンジンの最適化により、そのパフォーマンスはさらに改善されると予想されます。

この記事は、ダン・プリンス、ビルダン・ソフト、ジョーン・イインによってレビューされました。 SitePointコンテンツを最高の状態にしてくれたすべてのSitePointピアレビューアに感謝します！

JavaScriptが好きな理由の1つは、その柔軟性です。オブジェクト指向のプログラミング、命令的なプログラミング、さらには機能的なプログラミングを使用することができ、現在のニーズとチームの好みと期待に基づいてそれらを切り替えることができます。

JavaScriptは機能技術をサポートしていますが、HaskellやScalaなどの純粋な機能プログラミングに最適化されていません。私は通常、JavaScriptプログラムを100％機能的に構築することはありませんが、機能プログラミングの概念を使用して、コードのシンプルさを保ち、再利用とテストが簡単なコードの設計に集中するのに役立ちます。

メソッドを使用してフィルターデータセットを使用しています

ES5の出現により、JavaScriptアレイは、機能的なプログラミングをより便利にするいくつかの方法を継承します。 JavaScriptアレイは、ネイティブにマッピング、規制、およびフィルタリングできるようになりました。各メソッドは、配列内のすべてのアイテムを通過し、ループやローカル状態の変更なしに分析を実行し、すぐに使用したり、さらに操作できる結果を返します。この記事では、フィルタリングを紹介したいと思います。フィルタリングを使用すると、配列の各アイテムを評価し、渡されたテスト条件に基づいて要素を含む新しい配列を返すかどうかを判断できます。配列のフィルターメソッドを使用すると、設定した条件に一致する元の配列にサブセットアイテムが含まれている元の配列と同じ長さの別のアレイが取得されます。

ループデモンストレーションを使用した

フィルター

フィルタリングの恩恵を受ける可能性のある単純な問題の例は、文字列の配列を3文字のみの文字列に制限することです。これは複雑な問題ではありません。ループに通常のJavaScriptを使用して、フィルターメソッドを使用せずに簡単に解決できます。このように見えるかもしれません：

var animals = ["cat","dog","fish"];
var threeLetterAnimals = [];
for (let count = 0; count < animals.length; count++) {
  if (animals[count].length === 3) {
    threeLetterAnimals.push(animals[count]);
  }
}
console.log(threeLetterAnimals); // ["cat", "dog"]

ここで行うことは、3つの文字列を含む配列を定義し、3つの文字列のみを保存できる空の配列を作成することです。配列を介して反復するときに、ループ用に使用されるカウント変数を定義します。たまたま3人の文字がある文字列に遭遇するたびに、新しい空の配列に押し込みます。完了したら、結果を記録する必要があります。元の配列をループで変更することを妨げるものはありませんが、そうすることで、元の値が永久に失われます。新しい配列を作成し、元の配列を変更しないようにするのははるかにクリーンです。

filter method

を使用しています

これを行う際に技術的なエラーはありませんでしたが、配列上のフィルターメソッドの可用性により、コードをより簡潔かつ直接的にすることができます。これは、フィルター方法を使用してまったく同じことを行う方法の例です。

var animals = ["cat","dog","fish"];
var threeLetterAnimals = [];
for (let count = 0; count < animals.length; count++) {
  if (animals[count].length === 3) {
    threeLetterAnimals.push(animals[count]);
  }
}
console.log(threeLetterAnimals); // ["cat", "dog"]

前と同様に、元の配列を含む変数から始めて、3文字の文字列のみを含む配列の新しい変数を定義します。ただし、この場合、2番目の配列を定義するときに、フィルターメソッドを元の動物アレイに適用した結果に直接割り当てます。匿名のインライン関数を渡して、操作の値の長さが3の場合にのみtrueを返すフィルターを渡します。フィルターメソッドは、配列内の各要素を反復し、その要素にテスト関数を適用することにより機能します。テスト関数が要素に対してtrueを返す場合、フィルターメソッドによって返される配列には要素が含まれます。他の要素がスキップされます。コードがどれほど簡潔に見えるかを見ることができます。事前にフィルターの役割を理解していなくても、このコードを確認してその意図を把握できます。機能プログラミングの利点の1つは、追跡されるローカル状態の数を減らし、関数内から外部変数の変更を制限し、それによってコードの単純さを改善することです。この場合、元の配列を横断するときに取るカウント変数とさまざまな状態は、追跡する必要があるより多くの状態です。フィルターを使用して、ループやカウント変数を排除することができました。以前と同じように、新しい配列の値を何度も変更しません。 1回だけ定義し、フィルター条件を元の配列に適用することから得られた値を割り当てます。

フィルターをフォーマットする他の方法< const宣言と匿名のインライン矢印関数を使用すると、コードをより簡潔にすることができます。これらは、現在、ほとんどのブラウザーとJavaScriptエンジンでネイティブにサポートされているECMAScript 6（ES6）機能です。

コードを既存のコードベースに一致させる必要がない限り、ほとんどの場合、古い構文を超えて進むことが最善ですが、選択することが重要です。より簡潔になると、コードの各行がより複雑になります。 JavaScriptを非常に興味深いものにしているのは、チームの好みに合わせてサイズ、効率、明確さ、または保守性を最適化するために多くの方法を使用して同じコードを設計しようとすることです。しかし、これはまた、チームに大きな負担をかけ、共有スタイルのガイドを作成し、各選択の長所と短所について議論する必要があります。この場合、コードをより読みやすく多用途にするために、上記の匿名のインライン矢印関数を使用して、それを従来の名前の関数に変換し、その名前の関数をメソッドのフィルターに直接渡すことをお勧めします。コードは次のようになる場合があります：

var animals = ["cat","dog","fish"];
var threeLetterAnimals = animals.filter(function(animal) {
  return animal.length === 3;
});
console.log(threeLetterAnimals); // ["cat", "dog"]

ここで行うのは、上記で定義された匿名のインライン矢印関数を抽出し、それを別の名前の関数に変換することだけです。ご覧のとおり、配列要素の適切な値タイプを取得し、同じタイプを返す純粋な関数を定義しました。条件として関数の名前をフィルターメソッドに直接渡すことができます。

const animals = ["cat","dog","fish"];
const threeLetterAnimals = animals.filter(item => item.length === 3);
console.log(threeLetterAnimals); // ["cat", "dog"]

（調査コンテンツ、

、、およびチェーンコールに関するコンテンツ、スペースの制限のために元のテキストに従って追加してください。）map元のテキストの写真と形式を維持します。 reduce

以上が機能的なJavaScriptのフィルタリングとチェーンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。