【js（ループ処理）】for文

for文

ループする回数が決まっている
数値を基準にループしているから、数値でデータを扱えるかが判断基準
配列と相性がいい

書き方

for(初期値; 条件式; 増減式){
  //処理内容
}

普通のループ

let namesList = ['田中','中村','佐藤','山内','鈴木','マイケル','富樫'];

//全てループしたい時
for(let i = 0; i < namesList.length; i++){
  console.log(namesList[i]);
}

変数iは残り続けるので、他の箇所では使わないように！
「配列名.length」でその配列の値の数が入る

ある条件の時だけ処理を飛ばしてほしい場合

for(let i = 0; i < 5; i++){
  if(namesList[i] === '山内') continue;
  console.log(namesList[i]);
}

【結果】
田中
中村
佐藤
鈴木
マイケル
富樫

if(飛ばしたい時の条件) のを記述し、処理は 「continue;」を記述するだけでOK。
UNOで言うスキップなので処理自体は最後まで続く。

ある条件が来たらループ処理を強制終了

for(let i = 0; i < 5; i++){
  if(namesList[i] === '山内') break;
  console.log(namesList[i]);
}

【結果】
田中
中村
佐藤

if(飛ばしたい時の条件) のを記述し、処理は 「break;」を記述するだけでOK。
強制終了のため、上記部分の手前までで処理が終わる。

for-in文

オブジェクトの中身でループしたいときによく使う
オブジェクトは、数値で管理できないので基本的にプロパティの数だけループする
「for - in文」はオブジェクトを効率よく扱うための構文
列挙できるプロパティがなくなり次第プログラムは自動的に終了するようになっているので便利
※配列も扱えるが、取り出される順番が保証されないのでハ配列の場合はforやforeachを使う！

書き方

for(変数名（プロパティ）in オブジェクト名){
 if( p.hasOwnProperty( item ) ) {  
  //処理内容 
    }
}

fi文でhasOwnPropertyを必ず囲った中に処理を入れる！（継承の問題をクリアできるので）

変数部分はプロパティ名の変わり（いわゆるkey）だから何でもOK

プロパティと値を取り出してみよう

let items = {
  'やきそばパン' : 150,
  'いちごパン' : 150,
  'メロンパン' : 100,
  'のり弁当' : 300,
  '唐揚げ弁当' : 450,
  '焼肉弁当' : 500,
  '水' : 100,
  'オレンジジュース' : 125,
  'コーラ' : 150,
  '牛乳' : 180,
}

//プロパティを表示
for(let item in items){
  console.log(item);
}

//値を表示
for(let item in items){
  console.log(items[item]);
}

for-of文

配列だけ！！
オブジェクトにはつかえない！！
だけど、配列の「値」を直接変数に入れるから書き方と考え方がシンプル！
いちいち繰り返し回数とか、気にしなくてOK
イテラブル(iterable)・オブジェクト」が含まれているオブジェクトだけである

書き方

for(変数名<b>（値）</b>of オブジェクト名){
  //処理内容
}

let namesList = ['田中','中村','佐藤','山内','鈴木','マイケル','富樫'];

for(let name of namesList){
  console.log(name + 'がいます');
}

このように、これまで配列はforの条件式などで常にindex番号を軸に値を操作していたが
for-ofは、常に配列すべてにループ処理することを前提に、変数には初めから配列の値が入るのでとてもシンプル！

DOM要素も取得できるよ！

要は、jsのアクセス文で取得したhtml要素もループ処理できる

<p class="test">サンプル１</p>
<p class="test">サンプル２</p>
<p class="test">サンプル３</p>
<p class="test">サンプル４</p>

//タグでhtml要素を取得してループ処理
let p_html = document.getElementsByTagName('p');

for(let element of p_html){
  console.log(element);
}

//classでhtml要素を取得してループ処理
let class_html = document.getElementsByClassName('test');

for(let element of class_html){
  console.log(element);
}

for-Each文

配列だけに特化！！
オブジェクトにはつかえない！！
だけど、配列の「値」を直接変数に入れるから書き方と考え方がシンプル！
いちいち繰り返し回数とか、気にしなくてOK
イテラブル(iterable)・オブジェクト」が含まれているオブジェクトだけである

書き方

for(変数名<b>（値）</b>of オブジェクト名){
  //処理内容
}

まずは先にコールバック関数をまとめてからforeachをまとめる！！
https://www.sejuku.net/blog/20777www.sejuku.net