> 作業効率UP!! オススメのモバイルモニターを紹介

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

  • URLをコピーしました!

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)の基本的な使い方を紹介! プログラミングでデータを格納する方法として「配列(Array)」というものがあります。 複数のデータを1度に扱うとき、効率よくデータを操作することができるので、とて...
あわせて読みたい
【JavaScript】forEachメソッドで配列の要素を取得する方法 javaScriptの配列を繰り返して処理する方法として、forEachメソッドがあります。 今回はforEachメソッドの使い方をはじめ、メリットや使うにあたってのポイントや注意点...
あわせて読みたい
【JavaScript】配列の繰り返し処理でfor文を扱う方法 JavaScriptで条件に応じて繰り返しの処理をするために用意されているのが for文です。 for文は基本となる構文ですが、使い方を間違えるとfor文から抜け出すことができず...
あわせて読みたい
【JavaScript】便利な正規表現の使い方を理解する 「正規表現て何だろう」や「正規表現て難しそう」と感じている方は多いのではないでしょうか。 JavaScriptに限らず、さまざまなプログラミング言語で登場する正規表現。...
あわせて読みたい
【JavaScript】if文で条件分岐をしよう!使い方の基礎と注意点を解説 条件分岐はさまざまなプログラミング言語でよく使われる基本です。JavaScriptの場合は「if文」を使った条件分岐が最も使われます。 本記事では、JavaScriptで扱う「if文...
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

プログラムが大好きなパンダです。
主に C# を使ってデスクトップアプリやモバイルアプリなどを開発しています。

当ブログでは C# の使い方や WPF または .NET MAUI を使ったサンプルアプリなど発信しています。

コメント

コメントする

CAPTCHA


記事の内容