[js]繰り返し処理いろいろ #JavaScript

メモ帳に書いてたやつをQiitaに其の１

メモってるのをわりとそのまま
「○」とか「□」とかの記号部分は自分にとって分かりやすいメモの取り方だったのでそれはそのままにしてるのであしからず
- 好き勝手に付けていい=変更可能なやつのこと ※変数のことや
- code関連は一言一句ちがったらいかんやつもあるので、個人的にこういう書き方が分かりやすかった

for文：
　　　　for ( let ◯=0; ◯< □; ◯++){ /*処理*/ }
　　　　　　　　↑超一般的なあれ　　　　　

　　　　for ( let ◯ of □){ /*処理*/ }
　　　　　　　　↑配列に使う

　　　　for ( let ◯ in △){ /*処理*/ }
　　　　　　　　↑オブジェクトに使う　　　　　　　

while文：while、do while：◎実行速度早い ⚠︎無限roopに陥りがち要注意

forEachとか：forEach　配列の先頭から順番に要素が渡されて実行される

各構文の簡単なまとめ

for文：一般的に繰り返し回数の指定に使われる@超一般的なあれ
　　　　→繰り返し回数が決まっている場合はfor文
　　　　→途中でループを抜けることが想定されるのであればfor文
for-of文：配列やMapや文字列使える、比較的新しい構文 ECMAScript2015
　　　　→イテラブルなオブジェクトに対するループ
for-in文：オブジェクトに使えるループ ~~比較的新しい(以下同文)~~
while文：配列や値に条件を指定して処理を行いたい時
　　　　→繰り返しに配列や値に条件を指定したい場合はwhile文
　　　　→処理速度は基本的に最速≒パフォーマンス重視ならこれ
　　　　└→【!!】for文とwhile文は誤差程度の違いという計測結果・私見のものもある
forEach：配列の要素のみ
　　　　→関数コストが高いためたの繰り返し文と比較すると遅い
ループ処理を抜ける方法：＜使用可：for文,while文＞
　　continue; //処理を中断して条件式に戻る/スキップする
　　break; //処理中の文から抜けて次の文へ移行. 繰り返し終了＠for-inなど

※追記:コメントよりご指摘いただき事実と異なるヶ所を打ち消し線表示

for文書き方速度について
JavaScriptのループはどれが一番高速なのか - Qiita
(forEachが比較対象に入ってない、while文も比較対象に入ってない)

最速結論これ

for (let i=0; i<●; i=(i+1)|0){ /*処理 */ }

i++ 対 i = i+1
　　　　すべてのブラウザで、i = i+1 / i = i-1が最速
　　　　最速コードを++/--にしたコードは、約３倍遅い
|0 で型を認識
　　　　すべてのブラウザで、|0でtypedを施したコードが最速
　　　　使わない場合２〜３倍の差

for文

　　↓初期値; ↓条件式; ↓増減式
for ( let 〇=0; 〇< □; 〇++){ //□は配列名
/* 処理 */
}
　↓初期値; ↓条件式; ↓増減式 (最速結論)
for (let 〇=0; 〇< □; 〇=(i+1)|0){ //□は配列名
/* 処理 */
}

for(let i=△; i—){/*処理*/}という書き方もある

while文

const i=0;　//←while外に条件式に使う実行回数の初期値を書かなアカン
while ( i <10){ //←この例は 1〜10の繰り返し処理
　　　　/* 実行文 */
}

条件式がtrueである限り反復処理する
- └繰り返し回数が決まっていないループ処理に最適
最初から条件式がfalseなら何も実行せず終わる
⚠︎条件式に直接trueを記述すると無限ループに!ダメ絶対ダメ
実行速度が速いといわれてるが誤差範囲という見方もあり

//while : 1〜10の繰り返し処理
var i=0;
while ( i <10) {
    console.log(i);
    i++; 
    //or以下のような書き方
    //conlole.log(i++);
}

//while : coutinueを使って処理をスキップ(条件式に戻る)
var i=0;   ┏━━━━━━━━━━━━━━━━┓
           ↓                ┃
while ( i <10 ) {           ┃ ⚠︎if文で偶数の時だけcontinue
    i++;                    ┃  以降の処理を中断し条件式に戻る
    if(i %2===0) continue; ━┛
    conlole.log(i++); //←結果的に奇数だけがconsole.logに表示
}

//while : breakを使って繰り返し処理終了
var i=0; 
while ( i <10 ) {
    i++; 
    if(i %2===0) break;  ┓
    conlole.log(i++);　　 ┃//←結果的に最初の「1」だけ表示
}  ┏━━━━━━━━━━━━━━━━━━━━━┛ ⚠︎if文で偶数の時だけbreak
   ↓      ⚠︎while文を途中で終了(繰り返し処理終了)、 次のコードに
//次のコード

//while - 配列の繰り返し処理
var arr=[‘a’,b’’,’c’], i=0, len=arr.length; //←配列, iとは, lenとは;
while(i<len){
    console.log(arr[i++]);
}

//while - イテレータの繰り返し処理
var mapIterator =new Map([[0,’a’],[1,’b’],[2,’c’]]).entries();
var iteratorResult;
while (iteratorResult =mapIterator.next(), !iteratorResult.done){
    console.log(eteratorResult.value);
}

for-of文

配列やMapで使う処理

for (let ● of □){ //□は配列名かMap
    /*処理*/
}

「for…of」は主に配列やMapで使える.「values」(=値そのもの) をとってくる
指定された配列の中身(各要素)を取り出しながら繰り返し処理
⚠︎順番通りではないので注意が必要
配列,文字列,マップ(Map),DOMなど
イテラブルなオブジェクトに対するループ(オブジェクトには利用できない)
比較的新しい構文 ECMAScript2015

//例1
let 〇〇 =[10,20,30];
for(let e of 〇〇){
    console.log(e); //結果 10,20,30 ←valuesを取得
} 
//例2
var arr=[0,1,2,3,4];
for(var val of arr){
      console.log(val); //
}
console.log(Array.from(arr)); //配列として出力

for-in文

オブジェクトで使う処理

for (let ● in □){ //□は配列名
    /*処理*/
}

「for…in」は主にオブジェクトで使う.「プロパティ」をとってくる
指定された配列のプロパティを順に取り出しながら繰り返し処理
オブジェクト=名前と値で管理する
オブジェクトに含まれるプロパティの数だけ繰り返す=条件式や変化式が不要
比較的新しい構文 ECMAScript2015

forEach文

□.forEach( v =>    /*1行なら*/　);　//アロー関数, 1行, {(大カッコ)}不要
□.forEach( v => {   /*処理*/　});　//アロー関数, 1行で
□.forEach( (v,i,a) => {//アロー関数で
    /*処理*/
});
□.forEach( function(val,idx,arr){ //functionで
    /*処理*/
});

配列の繰り返し処理にだけ使える構文
配列の要素としてオブジェクトを格納しているような配列操作も可
breakやcontinueは使えない
類似メソッド：
- map：返り値がある=新たな配列として作成可
- forEach：返り値がない=新たな配列としては作れない
  - 外側に予め空配列を作ってpushするなら可(map使ったらよか)

do while文

do{/*実行文*/}while(条件式);

最初から条件を満たさない場合falseでも初回の実行文が処理される
⚠︎条件式に直接trueを記述すると無限ループに!ダメ絶対ダメ

//例
const x=1000;
do{
  /*実行文*/
  console.log(x); //
} while (x < 1000);