【JavaScript】map()で指定した配列や連想配列から新たな配列を作成する!

(この記事は2022年10月22日に投稿されました。)

JavaScriptで指定した配列から新たな配列を作成する方法として、map()があります。

map()とは 指定した配列から新たな配列を作成するメソッドになります。

新しい配列を作成することから、処理を行った後の配列を返り値として返すようになります。

map()は配列に対して使用するメソッドのため、配列や連想配列だけでなく多次元配列にも使用することができます。

そして、map()のパラメータであるコールバック関数に引数を最大3つまで指定することができるため、利便性がとても高いです。

プログラミングでは配列を使うケースが多いので、map()の使い方を学習して、配列の操作を有利にしていきましょう。

今回はJavaScriptのmap()で指定した配列や連想配列から新たな配列を作成する方法について紹介していきます。

この記事はこんな方におすすめ
・配列の値全てに対して処理を行いたい場合
・連想配列でキーと値を分けて個々の配列を作成したい場合
・演算や結合を行って新しい配列を作成したい場合




map()とは

map()とは指定した配列から新たな配列を作成するメソッドになります。

配列の値に何かしらの処理を行い、処理を行った後の値を格納した配列が作成されるようになります。

map()の書き方

map()の書き方は下記のようになります。

対象の配列の後ろに「map()」と「パラメータ」を指定することで、使用することができます。

map()のパラメータ

map()のパラメータは下記のようになります。

  1. コールバック関数(必須):
    指定した配列に対して行いたい処理を関数で指定する

map()は必須なパラメータとして「コールバック関数」を指定します。

map()の返り値

map()の返り値は「コールバック関数で処理された新たな配列」となります。

map()で指定した配列から新しい配列を作成するサンプルコード

map()で指定した配列から新しい配列を作成するサンプルコードをご紹介します。

ここでは、下記の2つのパターンでmap()を使用します。

  1. 配列の値が数値である場合
  2. 配列の値が文字列である場合

配列の値が数値である場合

配列の値が数値である場合にmap()を使用します。

⚫︎ Main.js

実行結果

配列の値が数値である場合にmap()を使用した結果

map()によって指定した配列から新たな配列が作成されています。

そのため、指定した配列の値にそれぞれ10倍した値を格納した配列が表示されています。

配列の値が文字列である場合

続いて、配列の値が文字列である場合にmap()を使用します。

⚫︎ Main.js

実行結果

配列の値が文字列である場合にmap()を使用した結果

map()によって指定した配列から新たな配列が作成されています。

そのため、指定した配列の値にそれぞれ「じゅう」の文字列が結合されており、それらの値を格納した配列が表示されています。

map()で指定した連想配列から新しい配列を作成するサンプルコード

map()で指定した連想配列から新しい配列を作成するサンプルコードをご紹介します。

キーから新しい配列を作成する場合

map()で連想配列のキーから新しい配列を作成してみます。

連想配列のキーを取り出す場合はObject.keys()を使用します。

⚫︎ Main.js

実行結果

map()で連想配列のキーから新しい配列を作成した結果

map()によってObject.keys()で取り出された連想配列のキーから新しい配列を作成しています。

そのため、それぞれのキーに「ひゃく」の文字列が結合され、それらのキーを格納した配列が表示されています。

値から新しい配列を作成する場合

map()で連想配列の値から新しい配列を作成してみます。

連想配列の値を取り出す場合はObject.values()を使用します。

⚫︎ Main.js

実行結果

map()で連想配列の値から新しい配列を作成した結果

map()によってObject.values()で取り出された連想配列の値から新しい配列を作成しています。

そのため、それぞれの値に「100」が加算され、それらの値を格納した配列が表示されています。

map()で指定した多次元配列から新しい配列を作成する場合

指定した多次元配列から新しい配列を作成する場合にmap()を使用してみます。

2次元配列の場合

2次元配列に対してmap()を使用してみます。

⚫︎ Main.js

実行結果

map()で指定した2次元配列から新しい配列を作成した結果

map()によって指定した2次元配列から新しい配列を作成しています。

また、map()をネストにして使用すると、指定した2次元配列から新しい2次元配列を作成することができます。

3次元配列の場合

3次元配列に対してmap()を使用してみます

⚫︎ Main.js

実行結果

map()で指定した3次元配列から新しい配列を作成した結果

map()によって指定した3次元配列から新しい配列を作成しています。

また、map()をネストにして使用すると、指定した3次元配列から新しい3次元配列を作成することができます。

map()のコールバック関数で指定する引数を変更する場合

これまでコールバック関数の引数は1つだけ指定していましたが、実は3つまで引数を取得することができます。

引数が多くなると、値以外にも指定できる部分が増えてくるため、map()の利便性がとても高くなります。

そのため、ここではコールバック関数を下記の2つのパターンでご紹介していきます。

  1. コールバック関数の引数を2つ指定する場合
  2. コールバック関数の引数を3つ指定する場合

コールバック関数の引数を2つ指定する場合

コールバック関数の引数を2つ指定する場合にmap()を使用してみます。

2つ目の引数は「インデックス」を指定することができます。

インデックスを指定することで、配列に格納されている値のインデックスを指定して処理を行うことが可能になります。

⚫︎ Main.js

実行結果

コールバック関数の引数を2つ指定してmap()を使用した結果

map()のコールバック関数の引数を2つ指定することで新しい配列を作成しつつ、指定した配列も変更しています。

そのため、配列の番号が偶数の場合は1000倍された値を、奇数の場合は100倍された値を格納した配列が表示されています。

コールバック関数の引数を3つ指定する場合

コールバック関数の引数を3つ指定する場合にmap()を使用してみます。

3つ目の引数は「配列」を指定することができます。

配列を指定することで、指定した配列の値を操作することが可能になります。

⚫︎ Main.js

実行結果

コールバック関数の引数を3つ指定してmap()を使用した結果

map()のコールバック関数の引数を3つ指定することで新しい配列を作成しつつ、指定した配列も変更しています。

そのため、こちらも同様に配列の番号が偶数の場合は「1000倍」された値を、奇数の場合は「100倍」された値を格納した配列が表示されています。

そして、指定した配列の偶数番号の値には「1」を、奇数番号の値には「10000」が格納されています。

map()とforEach文との違い

map()以外にも実はfoEeach文でも新しい配列を作成することが可能です。

しかし、両者の方法には大きな違いがあります。

それは「返り値を返すか返さないか」です。

例えば、指定した配列の値にそれぞれ3倍した新しい配列を作成するとします。

まずmap()を使用すると、下記のようなコードになります。

⚫︎ Main.js

実行結果

map()で指定した配列から新たな配列を作成した結果(返り値ありと返り値なし)

map()を使用する場合は、処理した値を定義した変数に格納する必要があるため、返り値(return)を使用します。

また、返り値(return)なしでmap()を使用すると、指定した配列がそのまま格納されます。

次にforEach文を使用すると、下記のようなコードになります。

⚫︎ Main.js

実行結果

forEach文で指定した配列から新たな配列を作成した結果(返り値ありと返り値なし)

forEach()を使用する場合は、指定した配列の値を取り出して処理を行うだけのため、返り値(return)は必要ありません。

逆に返り値(return)を指定すると、返す値が不明であるため「undefined」が返されます。

以上のことから、指定した配列に処理を行って新しい配列を作成する場合はmap()を、取り出した配列の値に対して何かしらの処理を行いたい場合はforeach文を使用します。

つまり、「返り値があるかないか」ということがmap()とforEach文の大きな違いになります。

コールバック関数を使用するメソッドの一覧

map()以外にもコールバック関数を使用するメソッドが存在します。

そのため、ここではコールバック関数を使用するメソッドの一覧についてご紹介します。

filter()

filter()とは、指定した配列から条件を満たす値のみを抽出し、新しい配列を作成するメソッドになります。

⚫︎ Main.js

実行結果

filter()で指定した配列から条件を満たす値のみを抽出して新しい配列を作成した結果

filter()によって指定した配列から条件を満たす新しい配列を作成しています。

今回の条件は値が「15以上」のため、新しい配列には「15」と「100」と「120」が格納されています。

もし、filter()について詳しく知りたい場合は下記の記事をご参考ください。

reduce()

reduce()とは、指定した配列の中身を単一の値にするメソッドになります。

例えば、「配列に格納されている値を1つずつ足していき、合計値を求める」ということができます。

⚫︎ Main.js

実行結果

reduce()で指定した配列の中身を単一の値にした結果

reduce()によって、指定した配列の値を単一の値にしています。

今回は格納された値を足し算しているため、配列の値の合計値が表示されています。

もし、reduce()について詳しく知りたい場合は下記の記事をご参考ください。

sort()

sort()とは、指定した配列の値を並び替えるメソッドになります。

⚫︎ Main.js

実行結果

sort()で指定した配列の値を並び替えた結果

sort()メソッドによって、配列の値を並び替えています。

今回は、降順に設定しているため、配列が小さい順に並び替わっています。

もし、sort()について詳しく知りたい場合は下記の記事をご参考下さい。

find()

find()とは、配列から条件に合う要素を取り出すメソッドになります。

⚫︎ Main.js

実行結果

find()で配列から条件に合う要素を取り出した結果

find()メソッドによって、配列から条件に合う要素を取り出しています。

今回は、条件が「20」であるため、配列の要素に格納されている「20」が表示されています。

もし、find()について詳しく知りたい場合は下記の記事をご参考下さい。

まとめ

⚫︎ map()とは指定した配列から新たな配列を作成するメソッドである

⚫︎ map()はコールバック関数というパラメータを指定する

⚫︎ 配列の値が数値である場合にmap()を使用すると、演算した値を格納した新たな配列を返す

⚫︎ 配列の値が文字列である場合にmap()を使用すると、結合した値を格納した新たな配列を返す

⚫︎ map()は指定した連想配列から新しい配列を作成することができる
(キーと値のどちらでも可能)

⚫︎ map()は指定した多次元配列から新しい配列を作成することができる
(多次元配列のまま返したい場合はmap()をネストにして使用する)

⚫︎ map()のコールバック関数の引数を2つ指定すると、配列に格納されている値のインデックスを指定できる

⚫︎ map()のコールバック関数の引数を3つ指定すると、指定した配列の値を操作できる

⚫︎ map()とforEach文との違いは「返り値を返すか返さないか」である

⚫︎ 指定した配列から条件を満たす値のみを抽出し、新しい配列を作成するにはfilter()を使用する

⚫︎ 指定した配列の中身を単一の値にするにはreduce()を使用する

⚫︎ 指定した配列の値を並び替えるにはsort()を使用する

⚫︎ 配列から条件に合う要素を取り出すにはfind()を使用する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です