map メソッドの使い方を知りたい。。。
JavaScript では配列の処理を行うメソッドとして、map()が頻繁に使用されています。
このmapメソッドは与えられた関数を配列データの全要素に対して実行し、その結果を新しい配列を生成することができます。
この記事では、配列のmapメソッドについて利用方法やポイント、使用例を紹介しています。これからmapメソッドを利用する方におススメの記事です。
オススメの書籍
初心者向けのやさしい解説が特徴で、JavaScriptの書き方や使い方、アニメーションやイベントの知識などを学べる1冊です。1章から8章まであり、プログラミングの基本から実装方法までをカバーしています。Webサイトからはサンプルデータがダウンロードできます。JavaScriptを学びたい初心者から、最新の技術を学びたい人などにオススメです。
mapメソッドについて
JavaScript の配列を扱うArrayオブジェクトには開発する上で欠かせないメソッドが標準で用意されています。mapメソッドはその中の１つです。
mapメソッドを利用することで、配列の全ての要素を１つずつ取り出してcallback関数を実行し、処理した結果を新しい配列として返します。
このメソッドを利用する、基本的な書き方は次の通りです。
配列.map( function (value) {
//配列の要素に対して処理を行う
});
mapによって配列の要素がvalueに格納され、そのvalueを利用してcallback関数内で処理が実行されます。
callback関数は、いくつかの引数を受け取ることが可能です。例えば引数が３つの場合は次のように使用します。
配列.map(function (value, index, thisArray){
//配列の要素に対して処理を行う
});
valueに配列から取り出した要素、indexに取り出した要素のインデックス番号、thisArrayが現在処理している配列となります。
mapメソッドのポイント
mapメソッドの特徴は次の通りです。
- mapメソッドはJavaScriptの配列データに対して扱えるメソッド
- 配列の先頭から最後までの要素、１つ１つに処理を加える
- 処理した結果を新しい配列にして返してくれる（返り値がある）
mapメソッドに近い処理を行うメソッドとして、forEachメソッドがあります。forEachメソッドは返り値がない一方で、mapメソッドは返り値があります。
この返り値があることで対象の配列はそのままにして、対象の配列の中から特定のオブジェクトを抜き出すことが可能です。
例えば、次のコードではオブジェクト名 students から name だけを取り出しています。
const students = [
{name : '田中', age : 24 },
{name : '佐藤', age : 19 },
{name : '原田', age : 20 },
{name : '有田', age : 21 },
{name : '木村', age : 25 }
];
const studentName = students.map(student => student.name);
console.log(studentName);実行結果は次の通りです。
// ['田中', '佐藤', '原田', '有田', '木村']対象の配列の中から特定のオブジェクトを抜き出すことができました。
このmapメソッドの弱点として、配列の中で特定の条件に一致した要素のみを抜き出すことができない点です。
mapメソッドは元の配列と同じ要素数の配列を作成します。
特定の条件に一致する配列を作成するなら、Arrayオブジェクトで用意されているfilterメソッドやforEachなどを利用しましょう。
mapメソッドの使用例
ここからはmapメソッドの使用例について紹介をします。
数値を倍に変換
mapメソッドを利用して配列内にある数値を倍に変換します。
const values = [1, 5, 13, 24, 30];
const multiple = values.map (value => value * 2);
console.log(multiple);実行結果は次の通りです。
// [2, 10, 26, 48, 60]Callback関数の処理で要素に２を掛けることで倍に変換された新しい配列を作成することができます。
要素の文字の長さを取得
配列の中にある要素の長さを取得します。
const array = ['onion', 'carrot', 'potatp', 'meat', 'pumpkin'];
const arrayLength = array.map (value => value.length);
console.log(arrayLength);実行結果は次の通りです。
// [5, 6, 6, 4, 7]Callback関数の処理でlengthプロパティを使って要素の文字の長さを取得します。取得した文字長さで新しい配列を作成します。
文字列を大文字に変換
配列の要素を大文字に変換します。
const array = ['onion', 'carrot', 'potatp', 'meat', 'pumpkin'];
const arrayUppercase = array.map (value => value.toUpperCase());
console.log(arrayUppercase);実行結果は次の通りです。
// ['ONION', 'CARROT', 'POTATP', 'MEAT', 'PUMPKIN']文字列を大文字に変換するには「toUpperCaseメソッド」を使用します。mapメソッドと組み合わせることで、配列の要素を全て大文字に変換して新しい配列を作成します。
文字列を小文字に変換
配列の要素を小文字に変換します。
const array = ['ONION', 'CARROT', 'POTATP', 'MEAT', 'PUMPKIN'];
const arrayLowercase = array.map (value => value.toLowerCase());
console.log(arrayLowercase);実行結果は次の通りです。
// ['onion', 'carrot', 'potatp', 'meat', 'pumpkin']文字列を小文字に変換するには「toLowerCaseメソッド」を使用します。mapメソッドと組み合わせることで、配列の要素を全て小文字に変換して新しい配列を作成します。
配列からオブジェクトの配列を作成
配列からオブジェクトに変換する例が次の通りです。
const array = ['onion', 'carrot', 'potatp', 'meat', 'pumpkin'];
const arrayObject = array.map (value => ({id, value}));
console.log(arrayObject);実行結果は次の通りです。
// [{id,'onion'}, {id,'carrot'}, {id,'potatp'}, {id,'meat'}, {id,'pumpkin'}]idと要素の組み合わせでオブジェクトを生成し、新しい配列を作成します。
ここで注意してほしいことが、オブジェクトを作成するには中括弧をさらに丸括弧で囲む必要があります。
アロー関数を使用しているので丸括弧の記述をしないと、Callback関数の中括弧（引数）=>｛ 処理 ｝ なのか曖昧になってしまいエラーとなってしまいます。
２つの配列を合体させたオブジェクトの配列を作成
異なる２つの配列の要素を合体させて、オブジェクトの配列を作成します。
const foods = ['gummy', 'crisps', 'chocolate', 'gum', 'senbei'];
const calories = [34, 139, 89, 43, 18];
const arrayObject = foods.map ((food, index) => ({
food : foods[index],
calorie : calories[index]
}));
console.log(arrayObject);実行結果は次の通りです。
// [{food:'gummy', calories:34},
// {food:'carrot', calories:139},
// {food:'potatp', calories:89},
// {food:'meat', calories:43},
// {food:'pumpkin', calories:18}]mapの第2引数は要素のインデックス番号になります。このインデックスを扱うことで、異なる２つの配列の要素を取り出して、オブジェクトが配列に格納されます。
元の配列をmapメソッドで変更
mapメソッドは上述している通り、基本的に新しい配列を作成します。
ただ引数を利用することで元の配列データを変更することが可能です。
const values = [0, 1, 2, 3, 4];
values.map ((value, index, array) => {
array[index] = value * 3
});
console.log(values);実行結果は次の通りです。
// [0, 3, 6, 9, 12]第３引数には元の配列データが渡されるので、arrayに処理した結果を代入することで、元の配列データを変更することができます。
まとめ
この記事でArrayオブジェクトで用意されているmapメソッドの使い方と使用例について紹介しました。
mapメソッドは配列の全ての要素に対して処理を行うことができ、元の配列を残しつつ新しい配列を作成することが可能です。
新しく作成された配列の要素を使用しない場合は、mapメソッドを使うケースに当てはまりませんので、filterメソッドやforEachメソッドを利用しましょう。
以上、最後まで読んでいただきありがとうございました。
関連記事
