1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【JavaScript】mapメソッド

Posted at

mapで配列の処理

JSを学習していて、mapについての理解に時間がかかったので記録しておきます。

mapとは?

mapとは、配列データに対して使うメソッドの一つです。それぞれの要素に対してコールバック関数を使って、その結果を新しい配列として返すメソッド...
と、文章だけだと分からないですね。(自分も分からない...)

コードで説明していきますね。まずは配列を用意します。

const pokemons = ["ピチュー","ピカチュウ","ライチュウ"]

上記の文を繰り返し処理によって順番に出力したい...
通常だと、ここでfor文を使いたい...まずはfor文を...

for (let index=0;index<pokemon.length;index++){
console.log(pokemon[index]);
}
//出力結果
ピチュー
ピカチュウ
ライチュウ

for文を記述することによって、繰り返し処理をしました。しかし、コードが少し面倒...
そこで、mapの出番。
上のpokemonsの配列はそのまま使えるのでそのまま利用。
続けて下記のように記述。

pokemons.map((pokemon)=>console.log(pokemon));
//出力結果
ピチュー
ピカチュウ
ライチュウ

これだけでfor文と同じことができてしまいました...。
配列に対して繰り返し処理をしたい時に使うといいかもしれませんね。

認識としては、pokemons変数にmapを使い、取り出した値を引数に指定した変数名にした上で、一個ずつ出力していった...と言う認識です。

別パターン

繰り返し処理以外にもこんな使い方が...まずは配列を用意

const counts = [1,2,3,5,7,11,13];

これらの素数を倍にしたいとします。

const result = counts.map((count)=>{
  return count *2;
});
// 出力結果
[2, 4, 6, 10, 14, 22, 26]

一つずつ取り出した値を倍にしたものを戻り値として返す...といった使い方も。

総評

mapメソッドいうのは、一つの配列のデータに対して使えるメソッドで
配列のデータを元に、また新しい配列を作り、出力するメソッド...という認識だと自分は思いました。

何かおかしな点があればご一報ください。
ありがとうございました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?