JS の配列反復子メソッドを理解する: filter、map、reduce-jsチュートリアル-php.cn

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

王林

リリース： 2024-07-22 21:08:12

オリジナル

913 人が閲覧しました

Understanding Array Iterator Methods in JS: filter, map, and 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() は、配列の反復と操作に不可欠です。