おはー(U 'ᴗ' U)⑅ SONYKO 打油。
今天連假第二天、我邊緣人沒烤肉
還不來寫爆文章。
　

今天來講我一直不想面對的迴圈
不想面對的東西有點多
今天講for 明天講 while ♡♡♡

跟大家分享一下我昨天寫文章時看到的網站 ⑅

這哪個白癡做的網站啊

左邊那個廣告就一直擋在那邊欸
還關不掉欸！完全看不到文章內容（゜д゜#）

分享完了我們來講迴圈吧　♪

⑅　迴圈 　ループ

每個程式語言都有迴圈、
每個程式語言的迴圈都是用來「解決重複性動作」。

我問python 朋友你們迴圈都拿來幹嘛、他說：
「迴圈拿來讀資料、for 會一筆一筆跑、while 像開關 」
很好、黑人問號。
我們今天就來看看 javaScript 的迴圈怎麼用。
　
此外這篇文章雖然不是JS、但可以稍微增加對迴圈的認知。

⑅　for迴圈 　for文

還記得我們講過 forEach 跟 for 滿像的
很適合用來列出一筆一筆資料。

假如你有一個陣列、有1000筆內容你想把他全部列出來。

let arr = ['阿貓一號','阿貓二號','阿貓三號','阿貓四號'...]
console.log(arr[0])
console.log(arr[1])
console.log(arr[2])
console.log(arr[3])
console.log(arr[4])
/*  新增1000筆((  */

列完萌夯rise 就出了w

程式語言是用來服務懶惰的人類，所以一定不可能笨笨的這樣列。
這種時候我們就能使用for 迴圈。

⑅　for迴圈　語法介紹

我們先來理解迴圈的原理。
公式長這樣：

for(let i=0 ; i<5 ; i++ ){
	console.log (i)
} 

來解釋一下他的意思：

• 它的參數帶了三個條件、我們會用分號將參數隔開來。
  　
• 第一個參數是他的 初始値 。
  我們宣告變數、其値為0 。
  　
• 第二個參數為他的 執行目標 。
  i < 5 的意思就是 「 當 i < 5 以前 、就會一直執行」。
  　
• 第三個參數為他的 執行動作。
  還記得運算子講得的 ++ 嗎？ 就是 +1 的意思。
  所以在 i < 5 之前，i 就會進行 +1 的動作。

所以上面範例結果會得到：

for(let i=0 ; i<5 ; i++ ){
	console.log (i)
} 
/*
    0
    1
    2
    3
    4
*/

原理：

　⑅　i 一開始為 0（ 印出初始値為0 ）

　⑅　i 執行第一次、他小於 5、所以 +1（ 印出第一次執行結果1 ）

　⑅　i 現在是1 、他還是< 5、所以 +1（ 印出第二次執行結果2 ）

　⑅　i 現在是2 、他依然< 5、所以 +1（ 印出第三次執行結果3 ）

　⑅　i 現在是3 、他依然< 5、所以 +1（ 印出第四次執行結果4 ）

　⑅　i 現在是4 、雖然他< 5 但+1 下去就=5 了、因此停止迴圈。

(U 'ᴗ' U)⑅　注意：　

迴圈很容易讓網頁當掉、你可以試著在codepen打上

for(let i =0 ; i >=0 ; i++){
	console.log(i)
}

他 i 會一直+1 不會停 www
　
　

⑅　for 迴圈　feat.Array

for 迴圈跟陣列是好麻吉。他們常常一起七逃（何）
所以我們要來知道一下for 迴圈怎麼用在陣列上 。

⑅　我們用這個陣列範例：

let cats = [
	{
		name : 'Miu',
		age : 10 ,
		kg : 4
	},{
		name : '阿喵',
		age : 5 ,
		kg : 10
	},{
		name : '喵仔',
		age : 3 , 
		kg : 8 
	},{
		name : '發財',
		age : 2 , 
		kg : 5
	}
]

來將貓貓們的名字列出來看看吧。

我們的基本 for 公式的第二個參數不是「執行目標」嗎
如果今天是一筆 我不知道到底有幾個項目的陣列 該怎麼設定目標呢？

還記得 length 這個東西嗎 (U 'ᴗ' U)⑅
可以帶出陣列長度 的語法。
我們可以使用它取得長度、作為我們的執行目標。

// 取出陣列長度
let cat_num = cats.length

// 將變數帶入參數
for( let i= 0 ; i< cat_num ; i++ ){
	console.log(cats[i].name)
}

如此一來我們就能列出貓貓們的名字 。

　
⑅ 結果如下圖：

這邊再次提醒大家：
　　　⑅　取出陣列用　中括號
　　　⑅　取出物件用　點

⑅　for迴圈　feat. if

for 還可以做很多很多事情！
我們來試試看、加入 if 該怎麼運用吧。

情境：
今天我們要挑出體重超過 5 公斤的貓貓、太胖了要帶去檢査。

for(let i=0; i<cat_num; i++){
	if(cats[i].kg > 5){
		console.log(`${cats[i].name} 的體重超過 5 公斤！要注意！`)
	}
}

/* console 結果
		"阿喵 的體重超過 5 公斤！要注意！"
		"喵仔 的體重超過 5 公斤！要注意！"
*/

很簡單吧！
這樣就能針對資料內容進行篩選了喔。

⑅　for迴圈　加總功能

我今天想算我的貓貓們平均幾公斤。
要怎麼用 for迴圈 去算呢？

let kgTotal = 0 ;
let ave ;
for(let i=0; i<cat_num; i++){
	kgTotal += cats[i].kg
	ave = kgTotal/cat_num	
}
console.log(kgTotal)   // 27
console.log(ave)       // 6.75

• 先在迴圈外面 設變數。
  設在裡面會因迴圈重複執行、每跑一次就會把總體重歸零一次。
• 將貓貓的體重加總起來、再除以貓貓數量。
  可以得到貓貓的平均體重。
• ave 為 計算貓貓平均體重的變數。

我們就能得到貓貓的平均體重為：6. 75
滿胖的。

⑅　for迴圈　feat. break

for 迴圈還可以加 break 好炫炮
break 可以用在什麼場合呢？
　
情境：
我今天想養領養貓貓、領養代替購買。
然後我想找年紀小於五歲的貓貓、才能陪我久一點。
我養一隻就好了、我要選出天選隻貓來陪伴我、給我一個結果就好了。

觀音媽：我知道了、我就告訴你命運之貓的名字吧。於是他開始coding 。

for(let i=0; i<cat_num; i++){
	if(cats[i].age < 5){
		console.log(`${cats[i].name} 就是你的天選之貓。`)
		break;
	}
}

// "喵仔 就是你的天選之貓。"

break 會篩選你的陣列、只要有選到符合的項目，就停止篩選。
我們的貓貓陣列小於 5 歲的貓貓有 喵仔 和 發財 、
因為先篩到 喵仔小於5歲 、所以迴圈就停止運行了。

以上就是我們 for 迴圈結合 break 的介紹。

今天的 for 也介紹到這邊。也提供以上範例的 codepen 給各位 ♡♡♡

୨୧(U 'ᴗ' U) SONYKO的　前端日文小教室 ♡

音檔

⑅　迴圈的日文是 ループ　也就是英文的 loop 。
⑅　但 for迴圈 不是 forループ、而是 for文（ふぉーぶん）

⑅　今天來看些句子：

1. 同じような処理を繰り返す
   おなじようなしょりをくりかえす
   反覆執行類似的操作。
   　
2. ナンセンス
   nonsense
   沒意義的
   　
3. for文は、3つの引数を与えてあげるのが一般的です。
   ふぉーぶんは、みっつのひきすうをあたえてあげるのがいっぱんてきです。
   for迴圈通常會帶入三個參數。
   　
4. プログラムがとてもスッキリしましたね。
   程式碼變得非常乾淨呢。
   　
5. break：途中で処理を中断する
   break：とちゅうでしょりをちゅうだんする
   break：在中途停止執行。

以上　♡♡♡
またねー(U 'ᴗ' U)