JS の配列反復子メソッドを理解する: filter、map、reduce

JavaScript には配列変換のための反復メソッドが組み込まれています。 filter()、map()、reduce() とそれらを使用する条件を分析してみましょう。

Array.filter()

提供された関数によって実装されたテストに合格したすべての要素を含む新しい配列を作成します。 提供されたコールバック関数を配列内の要素ごとに 1 回呼び出し、コールバック関数が true を返すすべての値の新しい配列を返します。

構文

filter(callbackFn)
filter(callbackFn, thisArg)

次のように評価されます: Array.filter((element,index,array) => { ... } )

callbackFn は、配列内の各要素に対して実行する関数で、結果の配列の要素を保持する場合は true 値を返し、それ以外の場合は false 値を返します。この関数は、現在の要素、インデックス、配列自体の 3 つの引数を取ります。

以下の例では、数値の配列が与えられ、偶数の配列を見つけることが期待されているため、次のように filter() メソッドが役に立ちます。

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4, 6]

Array.map()

map() メソッドは、現在の配列内のすべての要素に対して提供された関数を呼び出した結果が格納される新しい配列を作成します。値が割り当てられている配列インデックスに対してのみコールバック関数が呼び出され、空のスロットに対しては呼び出されません。

構文

map(callbackFn)
map(callbackFn, thisArg)

これは単純に次のように変換されます: Arrays.map((element,index,array) => { ... })

callbackFn は配列内の各要素に対して実行される関数であり、戻り値は新しい配列内の単一の要素として追加されます。
この関数は、現在の要素、インデックス、配列自体の 3 つの引数を取ります。

数値の配列が与えられ、その二乗を返すことが期待されている場合、以下に示すように、map() メソッドが最も効果的です。

const numbers = [1, 2, 3, 4, 5];
const squareNumbers = numbers.map(number => number ** 2);
console.log(squareNumbers); // Output: [1, 4, 9, 16, 25]

ある配列の値を別の配列にマッピングしています。

Array.reduce()
Reduce() メソッドは、配列の各要素に対してコールバック関数 Reducer をインデックスの昇順で実行し、前の要素の計算からの戻り値を渡します。すべての配列要素に対してリデューサーを実行した最終結果は、単一の値です。

初期値が指定されている場合は、コールバックの最初の呼び出しで最初の引数として使用されます。初期値が指定されていない場合は、配列の最初の要素が初期値として使用され、反復は 2 番目の要素から開始されます。

構文

reduce(callbackFn)
reduce(callbackFn, initialValue)

callbackFn は、配列内の各要素に対して実行される関数です。その戻り値は、コールバックの次回呼び出し時のアキュムレータ パラメータの値になります。最後の呼び出しでは、戻り値はreduce()関数の戻り値になります。
これは、アキュムレータ、currentValue、currentIndex、および呼び出された配列の引数を受け取ります。

数値の配列を使用し、その合計を求めるタスクを負ったreduce() メソッドは、以下に示すように簡単にそれを評価します。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Output: 15

結論
これらのメソッド filter()、map()、およびreduce() は、配列の反復と操作に不可欠です。

• filter() は、コールバック関数の条件を満たす、指定された配列内のすべての要素を検索するのに最適です。

• map() は、特定の配列内のデータを操作し、戻り値を期待する場合に最適な非破壊配列メソッドです。

• reduce() は、reducer 関数に基づいて配列要素を単一の値に集約する場合に便利です。

参考文献

• Array.prototype.filter に関する MDN Web ドキュメント

• Array.prototype.map に関する MDN Web ドキュメント

• Array.prototype.reduce に関する MDN Web ドキュメント

以上がJS の配列反復子メソッドを理解する: filter、map、reduceの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。