【JavaScript ECMAScript】Array::Array.prototype.mapインスタンスメソッドの使い方
Array.prototype.map()インスタンスメソッドの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
Array.prototype.map()メソッドは、呼び出し元の配列の各要素に対して提供された関数を実行し、その結果から新しい配列を生成して返すメソッドです。
このメソッドは、配列の各要素を特定のルールに基づいて変換し、その変換結果を集めて新しい配列を作成したい場合に利用できます。元の配列は変更されず、常に新しい配列が生成されます。この操作は非破壊的です。
map()メソッドは、各要素に適用するコールバック関数を引数として受け取ります。このコールバック関数は、配列の各要素に対して一度ずつ実行されます。コールバック関数には、現在の要素の値、その要素のインデックス、そしてmap()メソッドが呼び出された元の配列自体が引数として渡されます。
コールバック関数が各要素に対して返した値が、新しく生成される配列の対応する位置の要素となります。最終的に、元の配列と同じ長さの新しい配列が戻り値として返されます。例えば、数値の配列の全ての要素を2倍にしたり、オブジェクトの配列から特定のプロパティだけを抽出した新しい配列を作成したりする場合に非常に便利です。これにより、既存のデータを加工して新しい形式のデータを簡単に得ることができます。
公式リファレンス: Array.prototype.map()
構文(syntax)
1const newArray = array.map((element, index, array) => { 2 return /* 各要素から新しい要素を生成する式 */; 3});
引数(parameters)
callbackFn, thisArg
- callbackFn: 各配列要素に対して実行される関数。この関数は3つの引数（currentValue, index, array）を受け取ります。
- thisArg: callbackFn を実行する際に、this として使用される値。
戻り値(return)
Array
新しい配列を返します。この新しい配列の各要素は、元の配列の各要素に対して指定されたコールバック関数を実行した結果となります。