BETA

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

投稿日:2019-05-06
最終更新:2019-05-06
※この記事は外部サイト(https://jj-tech-blog.com/%E3%80%90javascri...)からのクロス投稿です

Introduction

こんにちは、JJ(@JJ_1123_I)です!

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

対象

  • JavaScript初心者の方

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

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

for (var i = 0; i < animals.length; i++) {  
    console.log(numbers[i]); //forの条件式範囲で繰り返し実行する  
}  

forEach

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

numbers.forEach(function(animal) {  
    console.log(animal); //配列の中身の数だけコールバック関数を実行する  
});  

map

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

const types = animals.map(function(animal) {  
    return animal.type; //結果  typesに ["dog","cat","gorilla"]が入る  
});  

filter

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

animals.filter(function(animal){  
  return animal.type === 'dog'; // 結果 dogしか合うのが無いのでdogだけ返す  
});  

find

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

animals.find(function(animal){  
    return animal.type === 'dog'; // 結果 最初にdogがあったのでdogだけ返す。それ以降の処理は行わない  
});  

every(論理積)

  • 機能:配列の中身が条件式で全て「True」であれば「True」を返すメソッド
  • ユースケース:バリデーションで全部OKを判定したい場合など
  • 注意点:全てが正しく無いと「False」になるので注意
const animals = [  
    {type: 'dog' ,size: 'medium'},   
    {type: 'cat', size: 'small'},  
    {type: 'gorilla', size: 'large'}  
];  

animals.every(function(animal){  
    return animal.type.length >= 4; //結果 全てが4文字以上では無いので「False」  
});  

some(論理和)

  • 機能:配列の中身が条件式で一つでも「True」であれば「True」を返すメソッド
  • ユースケース:複数条件で一つでもヒットしたらデータを取得したい場合など
  • 注意点:全てが正しくなくても「True」になるので注意
const animals = [  
    {type: 'dog' ,size: 'medium'},   
    {type: 'cat', size: 'small'},  
    {type: 'gorilla', size: 'large'}  
];  

animals.some(function(animal){  
    return animal.type.length >= 4; //結果 1つでも4文字以上があるので「True」  
});  

reduce

  • 機能:配列の中身を一つの数値や文字列に集約するメソッド配列
  • ユースケース:配列の合計を求めたい場合など
  • 注意点:第二引数があるなど、他のメソッドと記述が異なるので注意
const animals = [  
    {type: 'dog' ,size: 'medium'},   
    {type: 'cat', size: 'small'},  
    {type: 'gorilla', size: 'large'}  
];  

animals.reduce(function(prv, animal){  
    prv.push(animal.type)  
    return prv  
},[]);  

まとめ

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

参考文献

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

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

テクノロジーに関する情報、学んだ事を発信します!

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!