配列反復法 (map, filter, reduce)

JavaScript言語は、他のデータ構造よりも配列を明確に優先します。 それらには多くの便利な特定の機能があります。たとえば、反復メソッドのセット全体： map、 filter、reduceです。

map

map（）メソッドは、配列の各要素に対して指定された関数⚙️を呼び出した結果を使用して、新しい 配列を作成します。

構文

let new_array = arr.map(function callback( currentValue[, index[, array]]) {
    // new_arrayの要素を返します
}[, thisArg])

mapメソッドは、渡された⚙️callback関数を要素ごとに表示順に1回呼び出し、呼び出しの結果から新しい配列を作成します 。 ⚙️callback関数は、undefinedを含む値が割り当てられている配列インデックスに対してのみ呼び出されます。 欠落している配列要素（つまり、設定、削除、または値が割り当てられていないインデックス）に対しては呼び出されません。

⚙️callback関数は、次の3つの引数で呼び出されます。

• 要素値、
• 要素インデックス
• 通過する配列。

thisArgパラメータがmapメソッドに渡された場合、callbackを呼び出すときにthisの値として使用されます。それ以外の場合は、undefinedがthisの値として使用されます。最終的に、⚙️callback関数から見た thisの値は、⚙️関数から見たthisを決定するための通常のルールに従って決定されます。

mapメソッドは、呼び出された配列を変更しません（ただし、⚙️関数は変更できます！）。

mapメソッドによって処理される要素の範囲は、⚙️callback関数への最初の呼び出しの前に設定されます。 mapメソッドの実行が開始された後に配列に追加された要素は、⚙️callback関数によってアクセスされません。既存の配列要素が⚙️callback関数によって変更された場合、⚙️関数に渡されるそれらの値は、mapメソッドがそれらにアクセスしたときの値になります。削除された要素は訪問されません。

例：

簡単な例

多くのオブジェクトを含む配列があり、それぞれが異なる人物を表しています。 ここには、名前、年齢、髪の色、お気に入りの映画のキャラクターなど、多くのデータが含まれている可能性がありますが、現時点ではこれらすべては必須ではありません。すべての会議を行うために、これらの人々のパスポート番号の配列を取得するだけです。パスします。

Live Editor

function learnJavaScript() { const friends = [ { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' }, { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' }, { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' }, { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' }, { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' }, { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' } ] let passports = friends.map(friend => friend.passport + ' ') return passports }

function learnJavaScript() {
  const friends = [
    { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' },
    { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' },
    { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' },
    { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' },
    { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' },
    { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' }
  ]
  let passports = friends.map(friend => friend.passport + ' ')
  return passports
}

Result

Loading...

場合によっては、選択したキーを持つオブジェクトの配列を文字列として表示したい場合があります：

Live Editor

function learnJavaScript() { const users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ] let result = users.map(({ id, age, group }) => `\n${id} ${age} ${group}`).join('') return result }

function learnJavaScript() {
  const users = [
    { id: 11, name: 'Adam', age: 23, group: 'editor' },
    { id: 47, name: 'John', age: 28, group: 'admin' },
    { id: 85, name: 'William', age: 34, group: 'editor' },
    { id: 97, name: 'Oliver', age: 28, group: 'admin' }
  ]

  let result = users.map(({ id, age, group }) => `\n${id} ${age} ${group}`).join('')

  return result
}

Result

Loading...

摂氏値の配列から華氏値の配列を作成する：

与えられた式で配列の各要素を処理する例：

Live Editor

function learnJavaScript() { let celsius = [-15, -5, 0, 10, 16, 20, 24, 32] let fahrenheit = celsius.map(t => t * 1.8 + 32 + ' ') return fahrenheit }

function learnJavaScript() {
  let celsius = [-15, -5, 0, 10, 16, 20, 24, 32]

  let fahrenheit = celsius.map(t => t * 1.8 + 32 + ' ')

  return fahrenheit
}

Result

Loading...

引数を含む関数を使用して数値の配列を表示する：

Live Editor

function learnJavaScript() { const numbers = [1, 4, 9] const doubles = numbers.map(num => num * 2 + ' ') return doubles }

function learnJavaScript() {
  const numbers = [1, 4, 9]

  const doubles = numbers.map(num => num * 2 + ' ')

  return doubles
}

Result

Loading...

filter

filter（）メソッドは、合格した関数⚙️で指定されたテストに合格したすべての要素を含む新しい配列を作成します 。

filterの結果は常に配列です。 要素の関数⚙️がtrue（または任意の「true」値）を返す場合、その要素は結果に含まれます。それ以外の場合は含まれません。

構文

let newArray = arr.filter(function callback(element[, index, [array]])[, thisArg])

説明

filter（）メソッドは、配列に存在する要素ごとに渡された⚙️ callback関数を1回呼び出し、⚙️callback関数がtrueまたはbooleanにキャストするとtrueになります。 ⚙️callback関数は、値が割り当てられている配列インデックスに対してのみ呼び出されます。ドロップされた、または値が割り当てられたことがないインデックスに対しては呼び出されません。 ⚙️callback関数に失敗した配列要素は単にスキップされ、 新しい配列には含まれません。

⚙️callback関数は、次の3つの引数で呼び出されます。

• 要素値;
• 要素インデックス;
• トラバースする配列。

thisArgパラメータがfilter（） メソッドに渡された場合、⚙️関数を呼び出すときにthisの値として使用されます。それ以外の場合は、undefinedがthisの値として使用されます。最終的に、関数⚙️から見た thisの値は、関数⚙️から見たthisを決定するための通常のルールに従って決定されます。

filter（）メソッドは、呼び出された配列を変更しません。

filter（）メソッドによって処理される要素の範囲は、⚙️callback関数への最初の呼び出しの前に設定されます。 filter（）メソッドの実行が開始された後に配列に追加された要素は、⚙️callback関数によってアクセスされません。既存の配列要素が変更された場合、⚙️ callback関数に渡される値は、 filter（）メソッドがそれらにアクセスしたときの値になります。削除された要素は訪問されません。

例

すべての小さな値を除外する

次の例では、 filter（）を使用して、value以上のすべての要素とvalue未満のすべての要素が削除されたフィルター処理された配列を作成します。

Live Editor

function learnJavaScript() { const isBigEnough = value => value >= 10 let filtered = [12, 5, 8, 130, 44].filter(isBigEnough) + ' ' return filtered }

function learnJavaScript() {
  const isBigEnough = value => value >= 10

  let filtered = [12, 5, 8, 130, 44].filter(isBigEnough) + ' '

  return filtered
}

Result

Loading...

reduce

reduceメソッドも配列のコンテキストで実行され、要素ごとに⚙️関数を呼び出しますが、さらに、すべての呼び出しの結果を1つの値に累積します。 この動作は制御できます。

reduceは、mapのようにコレクションの要素を変更することを意図したものではありません。 そのタスクは、何らかの方法ですべての要素の「合計」を計算し、それを返すことです。

結果の値は、数値、文字列、オブジェクト、配列など、何でもかまいません。これらはすべて、JavaScript開発者が解決しているタスクによって異なります。

reduceメソッドは2つのパラメータを取ります：

• コレクションの要素ごとに順番に呼び出されるmapのような関数。
• アキュムレータの初期値。

⚙️関数にも2つの引数があります。

• 1つ目は累積値（アキュムレータ）です。
• 直接配列要素。

構文

array.reduce(function callback[, initialValue])

説明

reduce（）メソッドは、配列に存在する要素ごとに⚙️ callback関数を1回実行します。ただし、voidを除き、4つの引数を取ります。初期値（または前の callbackの値）、現在の要素、現在のインデックス、および反復する配列。

関数⚙️が初めて呼び出されるとき、accumulatorおよびcurrentValueパラメーターは2つの値のいずれかを取ることができます。 reduce（）の呼び出しで initialValue引数が渡された場合、accumulatorの値はinitialValueの値に等しくなり、currentValueの値は最初の値に等しくなります配列内。 initialValue引数が指定されていない場合、 accumulatorの値は配列の最初の値に等しくなり、currentValueの値は配列の2番目の値に等しくなります。

配列が空で、 initialValue引数が指定されていない場合、TypeError例外がスローされます。配列が（配列内の位置に関係なく）1つの要素のみで構成され、 initialValue引数が指定されていない場合、または initialValue引数が指定されているが配列が空の場合、この値が返されます関数⚙️callbackを呼び出さずに。

アキュムレータの初期値

初期値を見てみましょう。 この例では、年齢の合計である数値をカウントしているため、これは0に等しくなります。 ゼロの代わりに、他の任意の数値/文字列（空かどうか）/オブジェクト/配列（累積を開始する任意の値）を指定できます。 たとえば、すべての友達の名前を1行にまとめましょう：

Live Editor

function learnJavaScript() { const friends = [ { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' }, { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' }, { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' }, { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' }, { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' }, { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' } ] const names = friends.reduce((accumulator, friend) => `${accumulator} ${friend.name}, `, 'Friends: ') return names }

function learnJavaScript() {
  const friends = [
    { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' },
    { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' },
    { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' },
    { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' },
    { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' },
    { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' }
  ]

  const names = friends.reduce((accumulator, friend) => `${accumulator} ${friend.name}, `, 'Friends: ')

  return names
}

Result

Loading...

ここで、初期値は文字列 " Friends： "で、これにすべての友達の名前が徐々に追加されていました。

ソース値を明示的に指定しない場合、それは暗黙的に配列の最初の1️⃣要素になります。 この場合、関数⚙️は呼び出されなくなります。

例

配列内のすべての値を合計する：

Live Editor

function learnJavaScript() { const initialValue = 0 const sum = [1, 2, 3].reduce((accumulator, currentValue) => { return accumulator + currentValue }, initialValue) return sum }

function learnJavaScript() {
  const initialValue = 0

  const sum = [1, 2, 3].reduce((accumulator, currentValue) => {
    return accumulator + currentValue
  }, initialValue)

  return sum
}

Result

Loading...

そして、1行のコードで同じこと：

Live Editor

function learnJavaScript() { const sum = [1, 2, 3].reduce((x, y) => x + y) return sum }

function learnJavaScript() {
  const sum = [1, 2, 3].reduce((x, y) => x + y)

  return sum
}

Result

Loading...

chaining

JavaScriptプログラミングは、便利な「チェーン」パターンをサポートしています。複数の関数⚙️を1つのチェーンに結合し、結果を順次転送します。

解析された3つのメソッドはすべて配列のコンテキストで呼び出され、そのうちの2つの2️⃣も配列を返します。 したがって、それらを組み合わせるのは非常に簡単です。

たとえば、すべての男の子の合計年齢を計算してみましょう：

Live Editor

function learnJavaScript() { const friends = [ { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' }, { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' }, { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' }, { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' }, { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' }, { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' } ] let totalBoysYears = friends .filter(friend => friend.sex === 'm') .reduce((accumulator, friend) => accumulator + friend.age, 0) return totalBoysYears }

function learnJavaScript() {
  const friends = [
    { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' },
    { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' },
    { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' },
    { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' },
    { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' },
    { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' }
  ]
  let totalBoysYears = friends
    .filter(friend => friend.sex === 'm')
    .reduce((accumulator, friend) => accumulator + friend.age, 0)
  return totalBoysYears
}

Result

Loading...

または、女の子のパスポート番号を集めて、ラスベガス行きの飛行機のチケットを購入しましょう：

Live Editor

function learnJavaScript() { const friends = [ { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' }, { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' }, { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' }, { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' }, { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' }, { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' } ] let girlsPassports = friends.filter(friend => friend.sex === 'f').map(friend => friend.passport) + ' ' return girlsPassports }

function learnJavaScript() {
  const friends = [
    { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' },
    { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' },
    { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' },
    { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' },
    { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' },
    { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' }
  ]
  let girlsPassports = friends.filter(friend => friend.sex === 'f').map(friend => friend.passport) + ' '
  return girlsPassports
}

Result

Loading...

結論

これらの優れた機能を使用して⚙️コードが読みやすくなりました。 したがって、以下はこのトピックをより詳細にカバーする記事のリストです。

問題？

に書き込む Discord または電報 チャット, また、私たちの購読 ニュース

質問：

各配列要素に対して呼び出される関数？

1. currentValue
2. array
3. callback

配列の各要素に対して指定された関数を呼び出した結果で新しい配列を作成するメソッド：

1. map
2. filter
3. reduce

reduceメソッドの結果の値は次のようになります。

1. 番号
2. 配列
3. なんでも

配列内のすべての値の合計は、次の方法で実現されます：

1. map
2. filter
3. reduce

callback関数を呼び出すときにthisとして使用するオプションのパラメータまたは値：

1. array
2. index
3. thisArg

合格した関数で指定されたテストに合格したすべての要素を含む新しい配列を作成するメソッド：

1. map
2. filter
3. reduce

複数の機能を1つのチェーンに結合し、結果を順次転送します。

1. unity
2. chaining
3. merger

このレッスンでどれだけ学んだかを理解するために、モバイルアプリ このトピックに関する私たちの学校。

リンク：

1. Упрости свой JavaScript – используй map, reduce и filter
2. 15 Полезных javascript примеров map(), reduce() и filter()
3. Array.prototype.map()
4. Array.prototype.filter()
5. Array.prototype.reduce()

Contributors ✨

Thanks goes to these wonderful people (emoji key):

AlisaNasibullina

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨