英語版： https://www.javascripttutorial.net/javascript-array-map/

場合によっては、配列を取得し、その要素を変換して、結果を新しい配列に含める必要があります。

通常、ループforを使用して要素を反復処理し、各要素を個別に変換して、結果を新しい配列に送信します。

例を見てみましょう。

各要素が次のように円の半径を表す数値の配列があるとします。

以下に、各円の面積を計算し、その結果を新しい配列に送信する方法を示します。

結果：

これを行うにはかなりの量のコードが必要ですが、はるかに少ないコードを使用して別の方法で行うことができることに注意してください。

ES5以降、JavaScript Arrayタイプはmap()、ループを使用するよりもクリーンで短い方法で配列の要素を変換できるメソッドを提供しますfor。

結果：

このコードがどのように機能するかを理解します。

• まず、円の面積を計算する関数を定義します。
• 次に、関数circleAreaをmapメソッドに渡します。このメソッドmap()はcircleArea、配列の各要素で関数を呼び出し、circles変換された要素を含む新しい配列を返します。

さらに、ES6の矢印機能を使用して、よりクリーンなコードで同じ結果を得ることができます。

マップ（）メソッドの詳細

構文：

このメソッドmap()はcallback、配列のすべての要素に対してコールバック関数を呼び出し、結果を含む新しい配列を返します。

このメソッドmap()は2つの名前付き引数を取ります。最初の引数は必須で、2番目の引数はオプションです。

以下のような他の反復法と同様every()、some()、filter()、forEach()及びsort()機能は、callback()以下の形式を有します。

この関数にcallbackは3つの引数があります。

• 引数currentElementは、関数によって処理されている配列内の現在の要素callbackです。この引数は必須です。
• 機能によって処理されています。indexcurrentElementcallback
• arrayトラバースされるオブジェクト。

contexObjectmethod引数map()はオプションです。この値を渡すとthis、関数内のキーワードを使用して参照できますcallback。

このメソッドfilter()は元の配列を変更しないことに注意することが重要です。関数によって変換されたすべての要素の新しい配列を作成しますcallback。

マップ（）の例

次の例は、タイプの内部メソッドを次Mathの関数として使用して、数値の配列を変換する方法を示していますcallback。

結果：

新しい配列には、配列番号の平方根が含まれていますnumbers。

このチュートリアルでは、このメソッドを使用して、map()提供されている関数に従って配列の要素を変換する方法を学習しました。

すべてのJavaScriptチュートリアルのインデックスを参照してください

JavaScriptチュートリアル