1
1

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 3 years have passed since last update.

【JavaScript】ES6の便利な配列のメソッドfilter,map

Last updated at Posted at 2020-01-25

cat_javascript.png

#はじめに
ES6(ES2015)で追加された便利な配列のメソッドfilter,mapについて説明します。

##filterとは
コールバック関数内の条件を満たした配列を抽出するメソッド

const gosanke = [
  {'name': 'ヒトカゲ'   , 'type': 'ほのお'},
  {'name': 'ゼニガメ'   , 'type': 'みず'},
  {'name': 'フシギダネ' , 'type': 'くさ'},
];

const party = gosanke.filter(pokemon => {
  return pokemon.type === 'くさ';
});

// {'name': 'フシギダネ' , 'type': 'くさ'}

pokemonに配列の各要素は代入され、typeくさのポケモンのみ抽出します。
returnを忘れないようにしましょう。

##map()とは
配列から各要素を受け取って、新しい配列を作成するメソッド

const gosanke = [
  {'name': 'リザードン' , 'type': 'ほのお'},
  {'name': 'カメックス' , 'type': 'みず'},
  {'name': 'フシギバナ' , 'type': 'くさ'},
];

const party = gosanke.map(pokemon => {
  return `メガ${pokemon.name}`;
})

/* {'name': 'メガリザードン'},
   {'name': 'メガカメックス'},
   {'name': 'メガフシギバナ'} */

map()は配列に一部処理を加えて、新たな配列を作成するイメージです。すべての配列に似たような処理をしたい時に使います。
こちらもreturnを忘れないようにしましょう。

#さいごに

初めての投稿です。これからも定期的に投稿していきます。

##参考
初めてのJavaScript 第3版

1
1
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
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?