ES6で追加された配列ループメソッドをまとめる!!【forEach,map,filter,find,everyとsome】

  • このエントリーをはてなブックマークに追加

はじめに

 

こんにちは。もっちゃんです!
ES6より追加されたループ処理のメソッドによって、ほとんどのfor文を直感的にスッキリに書けることが分かったのでアウトプットも兼ねて、記事にまとめてみることにしました。

 

※ES6は2015年から使えるようになった記法です。
対応していないブラウザもあるのでBabelなどのトランスパイラの使用をおすすめします。

これらのメソッドを使うメリット。
今回紹介していくメソッドはどれもfor文を使えば実装できます。
なのになんで、これらのメソッドを使うのか。
それは記述がスッキリすることで、誰にでも分かりやすくなるメリットがあります。

【例】 配列をループさせて中身をconsole.logする処理を
for文と、forEachメソッドの両方で書いてみました。

○ for

 

○ forEach

 

記述自体はあまり短くなってないですが、array.lengthやi++などがない分、情報が洗練されていて分かりやすいですね!
これが、今回まとめたメソッドを使用するメリットになります。

今回まとめるメソッドの一覧

forEach
map
filter
find
everyとsome

全てのメソッドの基本形

 

forEach
forEachは、一番シンプルなループ処理メソッドです。
forEachが書けたら残りのメソッドは全て作れちゃいます

 

map
mapは、配列の要素全てに処理を行い、新しい配列として生成するときに使用します。

 

filter
filterは、配列の中身を特定の条件で絞り込むときに使用します。
コールバックの returnのあとには、条件式を記述します。

 

find
findは、配列の中から特定の要素を探し出すときに使用します。
return のあとには条件式を記述します。
filterと似ているんですが、大きな違いは
条件式がtrueとなった瞬間ループが終了するところです!
↓↓↓
複数の要素を抜き出すことはできませんが、
一意な要素を抜き出す際には、処理のオーバーヘッドを防いでくれる優秀なヤーツですね。

 

every と some
everyとsomeはこれまでの4つとは少し違います。
違う点は、処理の戻り値として真偽値を返すところです
everyは、配列が条件をすべて満たす場合にtrueを返す
someは、配列が条件を1つでも満たす場合にtrueを返す
というようになってます。

every
配列の要素全てが、条件を満たしているかチェックしたいときに使用します。

 

some
配列の要素どれか1つでも、条件を満たしているかチェックしたいときに使用します。

 

おわりに

いかがだったでしょうか。

これらの高階関数を使うことで、for文を使った場合より、何をしたいのかが分かりやすくなりますね!

ぜひ使ってみてください!

※ただ処理速度では、forが少し早いそうです。

この記事を書いた人

もっちゃんもつ

抽象クラスをインスタンス化するべく修行中です。

  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績