JS讀書筆記30天 - Day07 迴圈

迴圈的作用

當需要不斷的在某個地方重複某些動作時，就要使用迴圈。

這樣可以讓程式自動的去執行重複的動作，使程式碼更為簡潔。

迴圈的寫法

for (初始條件; 滿足執行的條件; 更新內容){
  //執行程式碼
}

初始條件是要告知程式碼從哪裡開始運行，所以會先宣告一個變數以記憶數值，並直接賦予值。

滿足執行的條件，主要是要求這個迴圈要運行幾次，所以會運用上初始條件宣告的變數，以條件式的方式，告訴程式碼該迴圈運行的次數。當不符合執行條件時，變會跳出迴圈，繼續執行下方的程式碼。

運行完回圈後，需要重新賦予變數新值，讓迴圈繼續執行，更新內容的功用就是賦予新值。

要特別注意的是，小括弧中的前兩項（初始條件和滿足執行的條件）結尾要加半形分號（;），但更新內容不用。

ex：

for (var i=0; i<10; i++){
  console.log(i+"的平方是"+i*i);
}

//用迴圈寫九九乘法表
for(var i=2; i<10; i++){
  for(var j=1; j<10; j++){
    console.log(i+"*"+j+"="+i*j);
  }
}

當遇到比較複雜的問題時，可以先用註解寫出最終要求，再想如何寫程式碼。

迴圈的運行過程

由上圖可知，迴圈是否繼續執行，關鍵在於條件的滿足與否，所以當出現無法中斷的無限迴圈時，通常代表條件的設立上有錯。

迴圈和陣列

迴圈和陣列這兩者，經常搭配使用。

因為實際的情況下，資料經常是從資料庫中抓取，這種情況下無法預測資料筆數。

後續的程式碼，就用下面的資料為操作主體：

var school = [
  {
    subject: "English", //科目別
    teacher: "Alex", //老師名字
    student: 52, //學生總數
    girl: 22, //女學生數量
    boy: 30, //男學生數量
    leaders: ["Alice", "Peter"],// 班級幹部
    elevator: true //需要電梯與否
  },{
    subject: "Chinese",
    teacher: "Coco",
    student: 50,
    girl: 25,
    boy: 25,
    leaders: ["Tina", "Ben"],
    elevator: false
  },{
    subject: "French",
    teacher: "Dan",
    student: 30,
    girl: 17,
    boy: 13,
    leaders: ["Ann", "John"],
    elevator: false
  },{
    subject: "Spanish",
    teacher: "Vera",
    student: 40,
    girl: 21,
    boy: 19,
    leaders: ["Kathy", "Tim"],
    elevator: false
  }
];

//求各班的現在上課的科目別與老師姓名
var total = school.length;

for(var i=0; i<total; i++){
  console.log((i+1)+"班現在在上"+school[i].subject+"，老師是"+school[i].teacher);
}

但在程式中，可以經由程式碼陣列名稱.length知道當下資料的總筆數，所以搭配迴圈，就可以解決問題。

另外，如果有第N個這種和數字有關的字串，記得要i+1，因為程式碼是從0開始，所以要加一。

迴圈和判斷控制

迴圈不只可以印出資料，也可在迴圈當中加入控制判斷，用以做各種判斷、賦值與修改。

//求哪些老師的班上，男性多於女性
var total = school.length;

for(var i=0; i<total; i++){
  var boy = school[i].boy;
	var girl = school[i].girl;
  
  if(boy>girl){
    console.log(school[i].teacher+"老師的班上");
  }
}

加總

利用陣列和迴圈，也可以計算大筆資料的數量總和。

//計算全部男生、女生和總人數
var total = school.length;
var studentTotal = 0;
var boyTotal = 0;
var girlTotal = 0;

for(var i=0; i<total; i++){
  //總人數
  studentTotal += school[i].student;
  
  //男生總人數
  boyTotal += school[i].boy;
  
  //女生總人數
  girlTotal += school[i].girl;
}

console.log("總人數："+studentTotal+"人");
console.log("男生總人數："+boyTotal+"人");
console.log("女生總人數："+girlTotal+"人");

陣列要做加總時，用+=，先用變數暫存值，在用+=改變重新賦值，最後再抓取該值。

特別的+=和-=

上面的程式碼，有兩個地方都有用到重新賦值的地方，一個是迴圈裡小括弧的i++，另一個是寫在迴圈內的三行程式碼，運用了+=。

事實上，這三行程式碼還有另外的寫法：

//總人數
studentTotal = school[i].student + studentTotal;
  
//男生總人數
boyTotal = school[i].boy + boyTotal;
  
//女生總人數
girlTotal = school[i].girl + girlTotal;

但這樣程式碼就太過冗長了，所以這樣寫會更好些：

//總人數
studentTotal += school[i].student;
  
//男生總人數
boyTotal += school[i].boy;
  
//女生總人數
girlTotal += school[i].girl;

這就是+=的由來了。

而在極特殊的情況下，+=還有另外的寫法：

var i;

i = i+1;
i += 1;
i++;

在重新賦值是原值加1的情況下，上面三種的寫法都代表相同的意義，所以迴圈小括弧中的i++，其實就是i+=1，和後面大括弧中的程式碼是相同意義。

既然有加法，當然也有減法。減少的寫法是-=，在減少值為1的情況下，i--也是成立的，用法和上面的加法完全相同。

break的功用

和 if 常常會和else一起使用一樣，迴圈也常和break一起出現。

break最主要的功能在於中斷迴圈，不讓迴圈繼續運行，會放在達成目標後要中斷的位置。

for(var i=0; i<20; i++){
  console.log(i);
  break;
}
console.log('stop');

因為有break，所以原本要跑20次的迴圈，只運行了一次就中斷了。

在實際運用上，可以和其他程式碼搭配使用，像是判斷控制：

//從Alex老師的班開始，要選出100人參加校慶，選到哪位老師的班為止？
//那個老師的班上有幾人沒有被選到？
var total = school.length;
var choose = 0; //選到的班級總人數

for(var i=0; i<total; i++){
  choose += school[i].student;
  
  if(choose > 100){
    console.log("人選到"+school[i].teacher+"老師的班為止");
    console.log(school[i].teacher+"老師的班剩下"+(choose-100)+"人沒被選到");
    break;
  }
}

內容參考課程範圍

• 六角學院 JavaScript 入門篇 - 學徒的試煉 Section 8