JavaScript

【JavaScript】新しい配列を生成するmapメソッドを理解する

JavaScriptでは配列の処理を行うメソッドとして、map() が頻繁に使用されています。

このmapメソッドは与えられた関数を配列データの全要素に対して実行し、その結果を新しい配列を生成することができます。

この記事では、配列のmapメソッドについて利用方法やポイント、使用例を紹介しています。これからmapメソッドを利用する方におススメの記事です。

mapメソッドについて

JavaScriptの配列を扱うArrayオブジェクトには開発する上で欠かせないメソッドが標準で用意されています。mapメソッドはその中の1つです。

mapメソッドを利用することで、配列の全ての要素を1つずつ取り出してcallback関数を実行し、処理した結果を新しい配列として返します。

このメソッドを利用する、基本的な書き方は次の通りです。

配列.map( function (value) {
//配列の要素に対して処理を行う
});

mapによって配列の要素がvalueに格納され、そのvalueを利用してcallback関数内で処理が実行されます。

callback関数は、いくつかの引数を受け取ることが可能です。例えば引数が3つの場合は次のように使用します。

配列.forEach(function (value, index, thisArray){
//配列の要素に対して処理を行う
});

valueに配列から取り出した要素、indexに取り出した要素のインデックス番号、thisArrayが現在処理している配列となります。

mapメソッドのポイント

mapメソッドの特徴は次の通りです。
  • mapメソッドはJavaScriptの配列データに対して扱えるメソッド
  • 配列の先頭から最後までの要素、1つ1つに処理を加える
  • 処理した結果を新しい配列にして返してくれる(返り値がある)

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メソッドは元の配列と同じ要素数の配列を作成します。

Callback関数で返された配列の要素を使用しない場合は、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関数の処理で要素に2を掛けることで倍に変換された新しい配列を作成することができます。

要素の文字の長さを取得

配列の中にある要素の長さを取得します。
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関数の中括弧 (引数)=>{ 処理 } なのか曖昧になってしまいエラーとなってしまいます。

2つの配列を合体させたオブジェクトの配列を作成

異なる2つの配列の要素を合体させて、オブジェクトの配列を作成します。
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引数は要素のインデックス番号になります。このインデックスを扱うことで、異なる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]

第3引数には元の配列データが渡されるので、arrayに処理した結果を代入することで、元の配列データを変更することができます。

まとめ

この記事でArrayオブジェクトで用意されているmapメソッドの使い方と使用例について紹介しました。

mapメソッドは配列の全ての要素に対して処理を行うことができ、元の配列を残しつつ新しい配列を作成することが可能です。

新しく作成された配列の要素を使用しない場合は、mapメソッドを使うケースに当てはまりませんので、filterメソッドやforEachメソッドを利用しましょう。

以上、最後まで読んでいただきありがとうございました。

関連記事

【JavaScript】配列(Array)の基本的な使い方を紹介!「JavaScriptで配列(Array)を使用するには?」JavaScript 初心者の方に配列の基本的な使い方を詳しくまとめました。使用頻度が高い JavaScriptの配列を初期化・追加・検索・展開・連想配列の使用方法について解説をしていますので、ぜひ参考にしてみてください。...
【JavaScript】forEachメソッドで配列の要素を取得する方法JavaScriptのforeachメソッドで配列の要素を取得・Indexの取得など使い方や使用例、メリットとデメリットなどを解説します。これからJavaScriptをはじめる初心者の方や復習をしたい方に向けて分かりやすく説明をしています。...
【JavaScript】配列の繰り返し処理でfor文を扱う方法JavaScriptで for文 を使えば、配列の1つずつの要素に対して 繰り返して処理を実行できます。またループの回数を指定したり、break文や continue文で処理を中断、スキップができるので、より細かい制御をすることが可能です。...
【JavaScript】便利な正規表現の使い方を理解する便利な正規表現を扱えるようになりましょう。JavaScripでは「正規表現」を使うための記述方法やメソッドの使用方法を詳しく説明しています。正規表現を使いこなせると、プログラミングの幅がぐっと広がりますので、ぜひ本記事を参考にしてみてください。...
【JavaScript】if文で条件分岐をしよう!使い方の基礎と注意点を解説JavaScriptの「if文」の基本的な使い方と注意点を解説した記事です。「if 文」や「else if」、「else」などを上手に使うことで複数の条件を組み合わせて複雑な分岐をすることが可能です。JavaScriptのプログラミングで必須の構文(if文)をマスターしましょう。...
プログラミングを学習したいなら…

プログラミングスキルを身に付けるなら、プログラミングを効率良く学べる
プログラミングスクール」がオススメです。

特にこんな方にオススメ!!
これからエンジニアを目指したい
プログラミングの専門性を高めたい
プログラミングを学んで副業をしたい
エンジニアに転職して年収をアップさせたい

プログラミングを触ったことがない未経験からでも、プログラミングスクールで学習すれば、エンジニアへ就職・転職することも可能です。

あなたの「行動力」と「やる気」で、あなたの人生を大きく変えるチャンスになることでしょう。

プログラミングスクールに興味がある方は是非チェックしてみてください。

> プログラミングを学ぶ <

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA