mapメソッド

メソッドmapは、配列の各要素に指定された 関数を適用することを可能にします。この メソッドは元の配列を変更せず、 変更された新しい配列を返します。

このメソッドはパラメータとして、配列の各要素に対して 実行される関数を受け取ります。 その関数がreturnを通して配列の要素に対して返す値が、 その要素の新しい値となります（例を参照）。

関数には3つのパラメータを渡すことができます。 これらのパラメータが存在する場合（必須ではありません）、 最初のパラメータには自動的に配列の要素が、 2番目のパラメータにはその配列内での番号（インデックス）が、 3番目のパラメータには配列自体が渡されます。

構文

javascriptlet 新しい配列 = 配列.map(function(要素, インデックス, 配列) {
  コード
  return 変更された要素;
});

例

元の配列の対応する要素の2倍の値を持つ 新しい配列を作成しましょう：

javascriptlet arr = [1, 2, 3, 4, 5];

let res = arr.map(function(elem) {
  return elem * 2;
});

console.log(res);

コード実行結果：

javascript[2, 4, 6, 8, 10]

例

各要素の値が「要素の値 × 配列内での順番（インデックス）」 となる配列を作成しましょう：

javascriptlet arr = [1, 2, 3, 4, 5];

let res = arr.map(function(elem, index) {
  return elem * index;
});

console.log(res);

コード実行結果：

javascript[0, 2, 6, 12, 20]

例

必要に応じて、3番目のパラメータに配列自体を 渡すことができます：

javascriptlet arr = [1, 2, 3, 4, 5];

let res = arr.map(function(elem, index, arr) {
  // ここで配列arrが利用可能になります
});

例

メソッドmapは多次元配列の走査にも 使用できます。例えば、次のような配列が与えられたとします：

javascriptlet arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

この配列をmapで走査し、 その要素をコンソールに出力してみましょう：

javascriptlet arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

let result = arr.map(function(elem) {
  console.log(elem);
});

結果としてconsole.logは[1, 2, 3]、次に[4, 5, 6]、 その次に[7, 8, 9]を出力します。

ご覧の通り、変数elemには部分配列（サブ配列）が 渡されます。では、各サブ配列にmapメソッドを 適用して、その各要素を2乗してみましょう：

javascriptlet arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

let result = arr.map(function(elem) {
  return elem.map(function(num) {
    return num * num;
  });
});

console.log(result);

関連項目