Skip to main content

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

@serverSerrverlesskiy

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

map

Create

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

構文

Book

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

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

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

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

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

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

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

例:

Math

簡単な例

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

Live Editor
Result
Loading...

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

Live Editor
Result
Loading...

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

Thermometer

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

Live Editor
Result
Loading...

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

Live Editor
Result
Loading...

filter

filter

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

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

構文

write

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

説明

m

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

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

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

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

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

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

math

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

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

Live Editor
Result
Loading...

Wow

reduce

count

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

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

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

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

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

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

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

構文

array.reduce(function callback[, initialValue])

説明

describe

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

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

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

アキュムレータの初期値

hatchng

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

Live Editor
Result
Loading...

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

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

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

Live Editor
Result
Loading...

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

Live Editor
Result
Loading...

chaining

unity

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

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

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

Live Editor
Result
Loading...

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

Live Editor
Result
Loading...

結論

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

問題?

Problem

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

質問:

Question

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

  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

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

Sumerian school

リンク:

  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

🖋 🐛 🎨

Become a Patron!