JavaScriptの反復処理のための配列メソッド

JavaScriptの配列で以前に動作している場合は、配列内のデータをループしたり繰り返したりする必要があることをよく知っています.これは比較的簡単にfor ループ・オアfor...of ループが、比較的簡単な操作の外では、これは非常に厄介なことができます.カウンタ変数を追跡し、増加が正しいことを確認することはすぐにあなたのコードを混乱させることができ、物事を不必要に複雑にすることができます.幸いにもJavaScriptは、配列内のすべての要素を自動的にループするメソッドの束を持っており、それらの多くは、特定の頻繁に使用される操作に合わせてカスタムです.今週、反復のために最も一般的に使用される組み込みの配列メソッドのいくつかのクイックリファレンスガイドを作成したいと思います.
forEachThe forEach() メソッドは最も一般的な組み込みメソッドです.この関数は、引数としてコールバック関数を受け取り、配列内の各要素に対して実行します.このメソッドにはオプションの引数がいくつかありますが、今のところ簡単にしましょう.
このメソッドと私たちが話しているすべてのもののために、矢印関数は引数の中で直接コールバックを定義するのを許します.コールバックは引数として配列要素を取るべきです.これが混乱しているならば、下記の例を見てください.

const array1 = [1, 6, 8, 10];

array1.forEach(number => console.log(number));

mapThe map() メソッドは、配列内のすべての項目を何らかの方法で変更したい場合に便利です.ライクforEach() 引数としてコールバックをとる.この関数は、配列内のすべての項目に対して関数を実行した結果で新しい配列を返します.以下の例を見てください.

const array1 = [1, 3, 5, 7];

const doubleArray = array1.map( num => num * 2);

console.log(doubleArray);  // [2, 6, 10, 14]

includesThe includes() メソッドは、配列内の特定の値が存在するかどうかを調べたい場合に便利です.クエリ値を引数として受け取り、true or false 値が見つかったかどうかによって異なります.

const array1 = [1, 3, 5, 7];

array1.includes(3);  // true
array1.includes(2);  // false

indexOf大きいので、値が我々の配列の中に存在するならば、我々は見つけることができます、しかし、あなたが何らかの理由のためにあるところを見つける必要があるならば、どうですか?それでindexOf() 入る.ライクincludes() , 引数として特定の値をとりますが、最初のインデックスを返します.返す-1 値が存在しない場合.また、必要に応じて検索を開始するインデックスを提供することができます.以下の例を見てください.

const array1 = [1, 8, 7, 4, 8, 10]

array1.indexOf(8);  // 1
array1.indexOf(8, 2);  // 4

findThe find() メソッドは、名前が何を意味するかを正確に行います.これは、渡されたテスト関数を満たす配列の最初の値を検索し、それを返します.例えば、配列の最初の要素を5未満の値で見つけたいとします.The find() メソッドはそうする完璧な方法です.心に留めておきなさいfind() テストを満たす配列の最初の値だけを返します.複数の値を取得する方法について少し話をします.

const array1 = [1, 3, 5, 7];

const result = array1.find(num => num < 5);

console.log(result);  // 1

filterThe filter() メソッドは、findの“フル”バージョンです.私の言いたいことはfilter() 同じ作品find それ以外は、渡されたテスト関数にマッチする要素の全てを含む新しい配列を返します.

const array1 = [1, 3, 5, 7];

const result = array1.filter(num => num < 5);

console.log(result);  // [1, 3]

sortThe sort() メソッドは私たちが話した前の方法より少し複雑です.デフォルトの使用は簡単です-配列の要素を並べ替え、ソートされた配列を返します.必要に応じて、特定の並べ替え順序を定義する比較関数を供給できます.これは複雑なビットであり、おそらく独自のブログ記事を持つことができます.カスタム比較機能についてもっと知りたい場合はdocumentation .

const days = ["Mon", "Tues", "Weds", "Thurs"];

days.sort();  // ["Mon", "Thurs", "Tues", "Weds"]

reduceThe reduce() 方法は私の意見では、これらの方法を構築するのは難しい方法を把握する.これは、縮小関数を受け取り、すべての要素でそれを実行し、単一の値を返します.このメソッドが適切である場合の良い例は、配列のすべてを一緒に追加したい場合です.
還元器法は、アキュムレータと電流値を引数として受け取り、オプションで開始インデックス(デフォルトは0)と配列をとるreduce() が呼び出された.あなたが深さ理解でより多くを得たいならば、見てくださいdocs . 以下の簡単な例を見てみましょう.

const array1 = [1, 5, 8, 10]
const reducer = (accum, current) => accum + current;

array1.reduce(reducer);  // 24

結論
これらは配列を反復処理するための最も一般的なメソッドです.私は、あなたがこの小さいカンニングペーパー/ガイド役に立つとわかりました.組み込みの配列メソッドの詳細については、ドキュメントをチェックアウトしたいhere .