JavaScript配列 map：要素の変換

概要：このチュートリアルでは、JavaScript配列のmap()メソッドを使用して、配列内の要素を変換する方法を学習します。

JavaScript配列 map()メソッドの紹介

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

通常は、forループを使用して要素を反復処理し、個々の要素を変換して、結果を新しい配列にプッシュします。

例を見てみましょう。

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

let circles = [
    10, 30, 50
];
Code language: JavaScript (javascript)

以下は、各円の面積を計算し、結果を新しい配列にプッシュする方法を示しています。

let areas = []; // to store areas of circles
let area = 0;
for (let i = 0; i < circles.length; i++) {
    area = Math.floor(Math.PI * circles[i] * circles[i]);
    areas.push(area);
}
console.log(areas);Code language: JavaScript (javascript)

出力

これを実現するには、かなりの量のコードが必要です。

ES5以降、JavaScript配列型は、配列要素をよりクリーンな方法で変換できるmap()メソッドを提供します。

function circleArea(radius) {
    return Math.floor(Math.PI * radius * radius);
}
let areas = circles.map(circleArea);
console.log(areas);
Code language: JavaScript (javascript)

出力

[314, 2827, 7853]Code language: JSON / JSON with Comments (json)

仕組み

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

短くするために、map()メソッドに匿名関数を渡すことができます。

let areas = circles.map(function(radius){
    return Math.floor(Math.PI * radius * radius);
});
console.log(areas);
Code language: JavaScript (javascript)

また、ES6のアロー関数を使用して、よりクリーンなコードで同じ結果を得ることができます。

let areas = circles.map(radius => Math.floor(Math.PI * radius * radius));
console.log(areas);Code language: JavaScript (javascript)

JavaScript配列 map()メソッドの詳細

以下は、map()メソッドを示しています。

arrayObject.map(callback[,contextObject]);Code language: CSS (css)

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

every()、some()、filter()、forEach()、sort()などの他の反復メソッドと同様に、callback()関数は次の形式を持ちます。

function callback(currentElement,index,array){
  // ... 
}Code language: JavaScript (javascript)

callback()関数は3つの引数を取ります。

• currentElementは、処理中の配列の現在の要素です。
• indexは、currentElementのインデックスです。
• arrayは、トラバースされている配列オブジェクトです。

currentElementは必須ですが、indexとarray引数はオプションです。

contextObjectをmap()メソッドに渡すと、thisキーワードを使用してcallback()関数内でcontextObjectを参照できます。

map()メソッドは元の配列を変更せず、コールバック関数によって変換されたすべての要素の新しい配列を作成することに注意することが重要です。

JavaScript配列 map()のその他の例

次の例は、Math型の組み込みメソッドをcallback()関数として使用して、数値の配列を変換する方法を示しています。

let numbers = [16, 25, 36];
let results = numbers.map(Math.sqrt);
console.log(results);Code language: JavaScript (javascript)

出力

 [4, 5, 6]Code language: JSON / JSON with Comments (json)

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

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