どうも、カメ助(@kamesuke_blog)です。
今回は、JavaScriptのforEach文の使い方について、実際の業務での使用頻度が高いソースコードを例に解説していきます。皆さんの業務や課題解決にご活用ください。
forEach文のサンプル
基本：配列の中身を全て出力する
|
1 2 3 4 5 |
//配列の中身を全て出力する let lists = ['1番目','2番目','3番目'];//配列に値をセット lists.forEach(function(item){ console.log(item); //コンソールに配列に入っている文字列を出力する }); |
|
1 2 3 4 |
//出力結果 1番目 2番目 3番目 |
配列【lists】の全ての要素を順番に処理し、中身の値を出力するプログラムです。上記は、最も基本的なforEach文の使用例なので覚えておきましょう。
forEach文を使用すると「配列の要素数」を意識することなく、全ての要素に対して1度ずつ処理を行うことができます。ちなみに、for文でも同じような処理を行うことも可能です。
JSON形式のデータを処理する
|
1 2 3 4 5 6 7 |
//JSON形式のデータを処理する const jsonData = '{"id":"1","name":"Kamesuke","gender":"Male"}';//JSONデータを設定 let obj = JSON.parse(jsonData);//JSONデータをオブジェクトに変換 Object.keys(obj).forEach(function(key) { console.log(key+':'+obj[key]);//JSONの各データを出力 }); |
|
1 2 3 4 |
//出力結果 id:1 name:Kamesuke gender:Male |
JSON形式のデータ【jsonData】の全ての要素を順番に処理し、中身の値を出力するプログラムです。
①：「JSON.parse()」でJSON形式のデータをオブジェクトに変換
②：「Object.keys()」を使用することでfoEach文を使用可能にしています
おまけ：アロー関数を使用
|
1 2 3 4 5 |
//配列の中身を全て出力する(アロー関数) let lists = ['1番目','2番目','3番目'];//配列に値をセット lists.forEach(item => { //アロー関数を使用 console.log(item); //コンソールに配列に入っている文字列を出力する }); |
|
1 2 3 4 |
//出力結果 1番目 2番目 3番目 |
forEach文にアロー関数を使用した例です。アロー関数を使用することでシンプルに記述できます。
forEach文での注意点
「break文」と「continue文」は使用できない
forEach文では「break文」と「continue文」は使用できません。そのため、処理の途中で処理を止めたり、スキップすることができません。
処理の途中で処理を止めたり、スキップする必要がある場合は、「for文」か「some文」を使用しましょう。(「some文」については後日解説します。)
おまけ
forEach文の書き方・利用シーンについて解説しますので、時間がある方はご覧ください。
forEach文の書き方
forEach文の基本構文は下記の通りです。
|
1 2 3 |
//JavaScriptのforEach文 [配列名］= [要素1,要素2,…]; [配列名].forEach([コールバック関数] ) ; |
実際に使用する際は以下のように記述します。
|
1 2 3 4 5 |
//配列の中身を全て出力する let lists = ['1番目','2番目','3番目'];//配列に値をセット lists.forEach(function(item){ console.log(item); //コンソールに配列に入っている文字列を出力する }); |
forEach文の利用シーン
- 配列の全ての要素に1度ずつ処理を行うとき
カメ助forEach文を使用すると、『ソースコード量を減らす』、『配列の要素数を考えなくてよい』メリットがあるよ。
以上、forEach文のサンプル例についての紹介でした。積極的にforEach文を使っていきましょう!
PS：こんなサンプルコードが欲しい、などありましたらコメントください。
その他
for文のサンプルはこちらの記事を参考にしてください。
【JavaScript】for文(繰り返し処理)を使ったサンプル例
さらに詳しくforEach文について知りたい方はこちらの記事を参考にしてください。
【JavaScript入門】これだけは覚えておけ！foreach / for-in / for-of
コメント
コメント一覧 （2件）
[…] ＞＞forEach文のサンプルはこちら […]
[…] ＞＞業務で使用できる「forEach文」のサンプルはこちら […]