IT~情報と技術

ドットインストール「詳解JavaScriptオブジェクト編」で勉強#12(map()とfilter()を使ってみる)

ドットインストールというオンラインのプログラミング講座に「詳解JavaScript」というのがあります。

これでJavaScriptの基礎を勉強していきましょう。「基礎文法編」の次は「オブジェクト編」です。

今日のメイントピックは、map()とfilter()を使ってみる、です。

詳解JavaScript

ドットインストールのレッスン一覧に「②もっと詳しくJavaScriptを学ぼう」というセクションがあります。

ここに3つ並んでいる

  • 詳解JavaScript 基礎文法編(全24回)
  • 詳解JavaScript オブジェクト編(全23回)
  • 詳解JavaScript DOM編(全15回)

で勉強していきたいと思います。

これまでの勉強した内容はこちらです。

オブジェクト編 #12

詳解JavaScript 基礎文法編 #12 map、filterを使ってみよう

今日は、前回の#11で勉強したforEach()のつづきで、map()とfilter()を使ってみる、です。

下の3つの例では、アロー関数を与えています。前回の#11基礎文法編の#23を参考にしてください。

forEach()

forEach() メソッドは与えられた関数を、配列の各要素に対して一度ずつ実行します。(MDNのforEach()から)

配列の各要素に対して、与えられた関数を実行します。

以下のように書くと、コンソールに[10, 30, 51, 100]が表示されます。

map()

map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。(MDNのmap()から)

配列の各要素に対して、与えられた関数を実行し、新しい配列を作ります

以下のように書くと、新しくdoubleという配列が作られて、コンソールに[20, 60, 102, 200]が表示されます。(数字が2倍になる)

filter()

引数として与えられたテスト関数を各配列要素に対して実行し、それに合格したすべての配列要素からなる新しい配列を生成します。(MDNのfilter()から)

配列の各要素に対して、与えられたテスト関数を実行し、それに合格した配列要素から新しい配列を作ります

以下のように書くと、偶数のみで新しくevenという配列が作られて、コンソールに[10, 30, 100]が表示されます。(51が除外される)

今日のまとめ

まとめるとこんな感じ。

  • forEach()・・・与えられた関数を各要素に対して実行する
  • map()・・・与えられた関数を各要素に対して実行し、新しい配列を作る
  • filter()・・・与えられたテスト関数を各要素に対して実行し、合格した要素で新しい配列を作る

超スローペースなプログラミング学習ですが、マイペースでぼちぼち続けています。

JavaScriptはちょっと難しいですが、がんばって一通りやってみましょう!