JavaScript

Array.prototype.map()メソッド

 編集:2022.08.18 by T.A.

その Array の各要素をコールバック関数に掛けてその結果の値からなる新しい配列を生成します。空要素は処理されません。

コールバック関数による:

arr.map(callback[, thisArg])
関数:
function 関数名(currentValue[, index[, array]]){
 処理
}

インライン コールバック関数による:

arr.map(function(currentValue[, index[, array]]){処理}[, thisArg])

アロー関数による:

arr.map( (currentValue[, index[, array]]) => {処理})
arr Arrayオブジェクト
callback 実行する関数名を記述。
関数名 callbackと同じ名前を記述。
処理 処理プログラム。必ずreturnで結果値を返すこと。

アロー関数使用の場合、「{ }」に囲まれていない場合は値を表す式となります。

currentValue 現在処理中の要素の値です。
index 省略可。現在処理中の要素の配列内における添字です。
array 省略可。map() が実行されている配列です。
thisArg 省略可callback を実行するときに this として使う値です。
戻り値

関数処理した結果の値を要素とした新しい配列です。

解説

map() は、与えられた callback 関数を配列の順番通りに、各要素に対して一度ずつ呼び出し、その結果から新しい配列を生成します。callback は、値が代入されている配列の要素に対してのみ呼び出されます(undefined が代入されているものも含みます)。

これは配列の中で存在しない要素、すなわち以下の要素に対しては呼び出しません:

map() を使用すべきではない場合

map は新しい配列を作成するので、返された配列を使わない場合、map を使うのはパターンに合いません。代わりに forEach() または for~of を使用してください。

map を使用するべきでないのは以下の場合です:

¶省く

数値の配列を平方根の配列にマッピング

次のコードは、数値からなる配列を取り、それらの数値の平方根からなる新しい配列を生成します。

let numbers = [1, 4, 9]
let roots = numbers.map(function(num) {
    return Math.sqrt(num) //√計算
})
D=roots; //=[1, 2, 3]
map を使用して配列内のオブジェクトを再フォーマット

次のコードは、オブジェクトの配列を受け取り、新たにフォーマットされた新しい配列を生成しています。

let kvArray = [{key:1, value:10},
               {key:2, value:20},
               {key:3, value:30}
];	//要素の値がオブジェクト
let reformattedArray = kvArray.map(obj => {
   let rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
D=reformattedArray; //=[{1: 10}, {2: 20}, {3: 30}]
引数を含む関数を使用して数値配列をマッピングする

次のコードは、1 つの引数を必要とする関数を使用するときに map がどのように動作するかを示しています。引数は元の配列を通した map ループとして、配列の各要素に自動的に割り当てられます。

let numbers = [1, 4, 9];
let doubles = numbers.map(function(num) {
  return num * 2
});
D=doubles; //=[2, 8, 18]
汎用的な map の使用

以下の例は、各文字を表す ASCII エンコードのバイトの配列を得るために String に map を使う方法を示しています:

let map = Array.prototype.map;
let a = map.call('Hello World', function(x) {
  return x.charCodeAt(0)
});
D=a; //=[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

¶以下を省く


テスト