JavaScript Array map()

定義と使用方法

map() 各数列要素に対して関数を実行した結果を用いて新しい数列を作成する方法。

map() 提供された関数を数列の各要素に対して順に一度呼び出す方法。

注：map() 値を持たない数列の要素に対して関数を実行しません。

注：map() 元数列を変更しません。

例

例 1

返還元数列中所有值的平方根の数列：

var numbers = [4, 9, 16, 25];
var x = numbers.map(Math.sqrt);
document.getElementById("demo").innerHTML = x;

自分で試してみる

例 2

配列のすべての値を 10 で乗算する：

var numbers = [65, 44, 12, 4];
var newarray = numbers.map(myFunction)
function myFunction(num) {
  return num * 10;
}
document.getElementById("demo").innerHTML = newarray;;

自分で試してみる

例 3

配列の各人のフルネームを取得する：

var persons = [
  {firstname : "Malcom", lastname: "Reynolds"},
  {firstname : "Kaylee", lastname: "Frye"},
  {firstname : "Jayne", lastname: "Cobb"}
];
function getFullName(item) {
  var fullname = [item.firstname,item.lastname].join(" ");
  return fullname;
}
function myFunction() {
  document.getElementById("demo").innerHTML = persons.map(getFullName);
}

自分で試してみる

文法

array.map(function(currentValue, index, arr), thisValue)

パラメータ値

パラメータ 説明
function(currentValue, index, arr) 必須。配列の各要素に対して実行される関数。

関数パラメータ：

パラメータ 説明
currentValue 必須。現在の要素の値。
index オプション。現在の要素の配列インデックス。
arr オプション。現在の要素が属する配列オブジェクト。
thisValue

オプション。関数に渡してその「this」値として使用する値。

このパラメータが空の場合、値「undefined」がその「this」値として渡されます。

技術的詳細

返り値： 配列、各要素に対して提供された関数を呼び出した結果を含む。
JavaScript バージョン： ECMAScript 5

ブラウザのサポート

テーブルの数字には、このメソッドを完全にサポートする最初のブラウザバージョンが記載されています。

すべてのブラウザが完全にサポートしています map() 方法：

クローム IE エッジ ファイアフォックス サファリ オペラ
クローム IE エッジ ファイアフォックス サファリ オペラ
サポート 9.0 サポート サポート サポート サポート

関連ページ

チュートリアル：JavaScript 配列

チュートリアル：JavaScript 配列 Const

チュートリアル：JavaScript 配列メソッド

チュートリアル：JavaScript 配列のソート

チュートリアル：JavaScript 配列のイテレーション