【初級編1】JavaScriptのmapで配列処理を行おう

JavaScript入門

本記事ではJavaScriptのmapについて解説します。

mapが使えるようになるとソースコードを簡易的に書くことが可能です。

しかしmapはJavaScriptの構文の中でも、少し難しめで良く分からない人も多いのではないでしょうか?

本記事では、mapの基本的な使い方に絞って解説します。

この機会にぜひmapが使えるようになってください。

JavaScriptのmapとは?

mapは配列データに使えるメソッドの1つです。

JavaScriptの配列について詳しく知りたい方は【入門編6】JavaScriptの配列を使って複数データを扱おうを参考にしてください。

メソッドとは、関数に使いもので、配列や数値など限定したデータ型のみに使うことができます

mapはコールバック関数を実行し、新しい配列として返すことができます。

mapの関数内に実行したい処理を書いておけば、配列のデータを自由に操作することが可能です。

なお、mapではなくforEachを使うことでも同じようなことができます。

ただ、mapとforEachでは書き方が少し異なります。

そのあたりについても詳しくみていきましょう。

mapの基本的な使い方

mapメソッドの基本的な使い方をみていきます。

その前に、普通にfor文を使った場合にどのような書き方になるかみていきましょう。

○コード例

<!DOCTYPE html> <html> <head> <title>テスト画面</title> </head> <body> <script> const list = [1,2,3,4,5]; const list2 = []; for(let i = 0; i< list.length ; i++){     list2[i] = list[i] * 2 } console.log(list2); </script> </body> </html>

○実行結果

以上のコードではfor文を使って、list配列の数値を1つずつ2倍に増やしています。

このように、配列のデータを1つずつ取り出して弄る場合は、for文を使う手があります。

ところが、もっと良い方法があります。

それがmapメソッドを使う方法です。

○コード例

<!DOCTYPE html> <html> <head> <title>テスト画面</title> </head> <body> <script> const list = [1,2,3,4,5]; const list2 = list.map(function(num){     return num * 2; }); console.log(list2) </script> </body> </html>

○実行結果

先程と全く同じ処理をmapメソッドで行っています。

mapメソッドは

{配列名}.map(function({配列の要素を格納する用に変数}){
// 関数の中の処理
}

という書き方をします。

このように書くことで、配列の各要素に対し自由に操作が可能です。

上記のデータでは要素を2倍に増やしていますが、もっと複雑なこともできるでしょう。

forEach文の違いについて

JavaScriptにはforEach文という構文もあります。

forEach文でもmapと同じような処理が可能です。

○コード例

<!DOCTYPE html> <html> <head> <title>テスト画面</title> </head> <body> <script> const list = [1,2,3,4,5]; const list2 = []; list.forEach(function(num, i){   list2[i] = num * 2; }); console.log(list2); </script> </body> </html>

○実行結果

ただ、forEach文だと変数が1つ増えてしまいますね

そのため、mapを使った方がコードを見やすく書くことが可能です。

mapオブジェクトの使い方

JavaScriptにはもう1つ、mapオブジェクトというのがあるので、こちらも紹介しておきましょう。

mapオブジェクトを使うと、キーと値のペアを格納し、それを扱うことが可能です。

更に、mapオブジェクトの各メソッドを使うことで、データの追加や取得が簡単に行えます。

mapオブジェクトの作成方法

mapオブジェクトの作成方法からまず解説します。

○コード例

<!DOCTYPE html> <html> <head> <title>テスト画面</title> </head> <body> <script> var map = new Map(); map.set('age', 24); map.set('gender', 'men'); </script> </body> </html>

mapオブジェクトを新規作成するには、まずインスタンスを作る必要があります。

クラスを扱うときと同じように、newを使います

その後、setメソッドを使って、mapにデータを格納していきます。

上記の例では、keyがageとgenderであるデータをそれぞれ格納していますね

mapオブジェクトの取得方法

つづいて、mapオブジェクトの取得方法をみていきましょう。

○コード例

<script> var map = new Map(); map.set('age', 24); map.set('gender', 'men'); document.write(map.get('gender')); </script>

○実行結果

上記のようにgetメソッドを使い、引数にkeyを指定するとそのkeyのデータを取得できます。

mapオブジェクトの削除方法

最後にmapに格納したデータを削除する方法をみていきましょう。

○コード例

<script> var map = new Map(); map.set('age', 24); map.set('gender', 'men'); map.delete('age'); document.write(map.get('age')); </script>

○実行結果

データを削除する場合はdeleteメソッドを使います。

deleteメソッドの引数にkeyを入れると、そのkeyのデータが削除されます。

mapオブジェクトを使う場合は、set、get、delete、この3つのメソッドの使い方を覚えておきましょう。

まとめ

本記事では、JavaScriptのmapの使い方を解説しました。

関数におけるmapメソッドの使い方やmapオブジェクトの使い方がお分かり頂けたでしょうか?

JavaScriptのmapはつい忘れられがちな機能ですが、使ってみると案外便利なものです。

ぜひmapの使い方を覚えて使ってみてくださいね。

次回はJavaScriptのreplaceメソッドの使い方、をみていきましょう。

❤内容は役に立ちましたか?皆さまのご意見が励みになります☺
YesNo
Visited 4 times, 1 visit(s) today
READ  【初級編9】JavaScriptで日付フォーマットを指定する方法を学ぼう

コメント

タイトルとURLをコピーしました