JavaScript Map、Reduce、およびFilter-コード例で説明されているJS配列関数

map、reduce、filterはすべてJavaScriptの配列メソッドです。それぞれが配列を反復処理し、変換または計算を実行します。それぞれが関数の結果に基づいて新しい配列を返します。この記事では、それぞれを使用する理由と方法を学習します。

StevenLuscherによる楽しい要約は次のとおりです。

ツイートでマップ/フィルター/リデュース:

map([?、?、?]、cook)

=> [?、?、?]

filter([?、?、?]、isVegetarian)

=> [?、?]

reduce([?、?]、eat)

=>?

— Steven Luscher(@steveluscher)2016年6月10日

地図

このmap()メソッドは、既存の配列から新しい配列を作成し、最初の配列の各要素に関数を適用するために使用されます。

構文

var new_array = arr.map(function callback(element, index, array) { // Return value for new_array }[, thisArg])

コールバックでは、配列のみelementが必要です。通常、値に対して何らかのアクションが実行されてから、新しい値が返されます。

次の例では、配列内の各数値が2倍になっています。

const numbers = [1, 2, 3, 4]; const doubled = numbers.map(item => item * 2); console.log(doubled); // [2, 4, 6, 8]

フィルタ

このfilter()メソッドは、配列内の各要素を受け取り、それに対して条件ステートメントを適用します。この条件がtrueを返す場合、要素は出力配列にプッシュされます。条件がfalseを返す場合、要素は出力配列にプッシュされません。

構文

var new_array = arr.filter(function callback(element, index, array) { // Return true or false }[, thisArg])

の構文は、filterと似てmapいますが、コールバック関数がtrue要素を保持するために戻る必要があるか、falseそうでない点が異なります。コールバックでは、のみelementが必要です。

次の例では、奇数が「フィルタリング」され、偶数のみが残ります。

const numbers = [1, 2, 3, 4]; const evens = numbers.filter(item => item % 2 === 0); console.log(evens); // [2, 4]

次の例でfilter()は、を使用して、成績が90以上のすべての学生を取得します。

const students = [ { name: 'Quincy', grade: 96 }, { name: 'Jason', grade: 84 }, { name: 'Alexis', grade: 100 }, { name: 'Sam', grade: 65 }, { name: 'Katie', grade: 90 } ]; const studentGrades = students.filter(student => student.grade >= 90); return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]

減らす

このreduce()メソッドは、値の配列を1つの値に減らします。出力値を取得するために、配列の各要素に対してレデューサー関数を実行します。

構文

arr.reduce(callback[, initialValue])

callback引数は、配列内のすべての項目に1回呼び出される関数です。この関数は4つの引数を取りますが、多くの場合、最初の2つだけが使用されます。

  • アキュムレータ-前の反復の戻り値
  • currentValue-配列内の現在のアイテム
  • index-現在のアイテムのインデックス
  • array -reduceが呼び出された元の配列
  • initialValue引数はオプションです。指定した場合、コールバック関数の最初の呼び出しで初期アキュムレータ値として使用されます。

次の例では、すべての数値を数値の配列に追加します。

const numbers = [1, 2, 3, 4]; const sum = numbers.reduce(function (result, item) { return result + item; }, 0); console.log(sum); // 10

次の例でreduce()は、を使用して、文字列の配列を単一のオブジェクトに変換し、各文字列が配列に出現する回数を示します。このreduceの呼び出しは、空のオブジェクト{}initialValueパラメーターとして渡すことに注意してください。これは、コールバック関数に渡されるアキュムレータ(最初の引数)の初期値として使用されます。

var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit']; var petCounts = pets.reduce(function(obj, pet){ if (!obj[pet]) { obj[pet] = 1; } else { obj[pet]++; } return obj; }, {}); console.log(petCounts); /* Output: { dog: 2, chicken: 3, cat: 1, rabbit: 1 } */

ビデオの説明

以下のビデオをfreeCodeCamp.orgYouTubeチャンネルからチェックしてください。ここでは、説明した配列メソッドに加えて、さらにいくつかのメソッドについて説明します。