提姆寫程式

0%

JS 筆記 - for 迴圈，i++、加總、break 的使用

發表於 分類於 Disqus：
for 迴圈的綜合應用

JavaScript Note

i++

for 迴圈內有一個所產生的值，會用 i++ 登打，

1
2
3
for (var = 0; i < array.length; i++) {
 ...
}

寫法有三種，但都是在做同一件事情

1
2
3
4
5
6
7
8
9
10
var i = 0;
console.log(i); //結果會是 0

i = i + 1;
console.log(i); //結果會是 1

i + 1 = 2; // (1+1 =2)

i++ = 1;
//不斷反覆輸入 i++ 就會一直累加前一次的結果，會變成 2, 3, 4...

用 for 迴圈做加總

從陣列中取出資料，並使用 for 迴圈做加總的練習。

今天老闆需要知道不同分店可樂的總銷售狀況，可以這樣寫。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var shops = [
  {
    captain: "Tim",
    chicken: 150,
    coke: 200,
    fries: 70,
    set: 99,
  },
  {
    captain: "Min",
    chicken: 99,
    coke: 77,
    fries: 55,
    set: 101,
  },
  {
    captain: "Mike",
    chicken: 105,
    coke: 111,
    fries: 75,
    set: 130,
  },
];
//陣列資料

計算可樂的數量。

1
2
3
4
5
6
7
8
9
var shopsTotal = shops.length; //先抓取店面的資料
console.log(shopsTotal); //結果會得到 3
var cokeTotal = 0; //先預設數量為 0
for (var i = 0; i < shopsTotal; i++) {
  //從第一個開始迴圈；在店家數以內條件以內；加總
  cokeTotal += shops[i].coke; //"+=" 要寫在一起，不能空白
}

console.log("今年的可樂銷售額為: " + cokeTotal); //結果會得到 今年的可樂銷售額為: 388

codepen https://codepen.io/hnzxewqw/pen/vYEOJMB

for 迴圈與 break

break 在 for 迴圈中的基本寫法：

1
2
3
4
for (var i = 0; i < shopsTotal; i++) {
  console.log(i);
  break; //跑到這裡就停止
}

沿用上方資料，會用到 break 的情況：
要找可以買 100 份炸雞的老闆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var shops = [
  {
    captain: "Tim",
    chicken: 150,
    coke: 200,
    fries: 70,
    set: 99,
  },
  {
    captain: "Min",
    chicken: 99,
    coke: 77,
    fries: 55,
    set: 101,
  },
  {
    captain: "Mike",
    chicken: 105,
    coke: 111,
    fries: 75,
    set: 130,
  },
];
//陣列資料

因為有條件出現，可以在 for 迴圈中用 if 來寫：

1
2
3
4
5
6
7
8
9
10
var shopsTotal = shops.length;
console.log(shopsTotal);
for (var i = 0; i < shopsTotal; i++) {
  if (shops[i].chicken > 100) {
    console.log(shops[i].captain + "的店家有足夠 100 份炸雞");
    // 結果會得到:
    //Tim的店家有足夠 100 份炸雞
    // Mike的店家有足夠 100 份炸雞
  }
}

畫面會顯示如下：

https://ithelp.ithome.com.tw/upload/images/20191205/20119300li6h5uabDP.png

可是只要找到一間店有賣超過 100 份炸雞就可以，所以可以加上 break， break 都是搭配 for 迴圈使用的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var shops = [
  {
    captain: "Tim",
    chicken: 150,
    coke: 200,
    fries: 70,
    set: 99,
  },
  {
    captain: "Min",
    chicken: 99,
    coke: 77,
    fries: 55,
    set: 101,
  },
  {
    captain: "Mike",
    chicken: 105,
    coke: 111,
    fries: 75,
    set: 130,
  },
];
//陣列資料

var shopsTotal = shops.length;
console.log(shopsTotal);
for (var i = 0; i < shopsTotal; i++) {
  if (shops[i].chicken > 100) {
    console.log(shops[i].captain + "的店家有足夠 100 份炸雞"); //Tim的店家有足夠 100 份炸雞
    shops[i].chicken -= 100;
    console.log(
      shops[i].captain + "的店家還剩下 " + shops[i].chicken + " 份炸雞"
    ); //Tim的店家還剩下 50 份炸雞
    break;
  }
}

呈現結果如下：

https://ithelp.ithome.com.tw/upload/images/20191205/20119300Qw5A7l5RAA.png

codepen https://codepen.io/hnzxewqw/pen/WNbvMOX