【JavaScript】ES6で使える便利な配列メソッド

Introduction

こんにちは、JJ(@JJ_1123_I)です! 今回は、Udemyの「【世界で2万人が受講】JavaScriptエンジニアのためのES6完全ガイド」での学びをまとめてみました。より詳細な内容が気になる場合は、上記受講する事を強くお勧めします!!

対象

  • JavaScript初心者の方

ES5まで使われているforループ

  • 機能:配列の中身を順番に取り出す一般的なやり方
  • ユースケース:ES5までだいたいこのやり方で配列の中身を取得
  • 注意点:3行目の「for〜」の部分の情報が少し多く、若干可読性に欠ける

forEach

  • 機能:配列の中身の数だけコールバック関数(functionの中身)を繰り返すメソッド
  • ユースケース:コールバック関数で特定のメソッドを実行したい場合など(forループより可読性が増すと思われる)
  • 注意点:ループ処理を読み解く必要があるので、何でもかんでもforEachを利用するのはNG

map

  • 機能:配列の中身の数だけコールバック関数(functionの中身)を繰り返し実行し、その返り値を新しい配列に入れるメソッド
  • ユースケース:配列にあるオブジェクトを抜き出し、ある画面で一覧表示させたい場合など
  • 注意点:「return」のつけ忘れに注意。結構忘れる。

filter

  • 機能:配列の中身の数だけコールバック関数(functionの中身)を繰り返し実行し、結果が「True」であればその返り値を新しい配列に入れるメソッド
  • ユースケース:一覧の中から興味のあるデータだけを絞る場合など
  • 注意点:「return」のつけ忘れに注意。結構忘れる。if文もわざわざ記載する必要もなし

find

  • 機能:配列順にコールバック関数(functionの中身)を実行し、結果が「True」だと処理を終了しその結果をのみ返すメソッド
  • ユースケース:一覧の中から指定したデータIDと表示するデータIDを紐付ける場合など
  • 注意点:一番最初の要素のみだけしか返って来ないので注意

every(論理積)

  • 機能:配列の中身が条件式で全て「True」であれば「True」を返すメソッド
  • ユースケース:バリデーションで全部OKを判定したい場合など
  • 注意点:全てが正しく無いと「False」になるので注意

some(論理和)

  • 機能:配列の中身が条件式で一つでも「True」であれば「True」を返すメソッド
  • ユースケース:複数条件で一つでもヒットしたらデータを取得したい場合など
  • 注意点:全てが正しくなくても「True」になるので注意

reduce

  • 機能:配列の中身を一つの数値や文字列に集約するメソッド配列
  • ユースケース:配列の合計を求めたい場合など
  • 注意点:第二引数があるなど、他のメソッドと記述が異なるので注意

まとめ

forで書くより短く書けるので可読性も上がり良いですね。
ただ、使い分けが非常に重要だと感じました。この記事とか凄く勉強になりました!!

参考文献

https://www.udemy.com/share/10144MBUccdFpVTHw=/
https://qiita.com/diescake/items/70d9b0cbd4e3d5cc6fce

コメントを残す

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