iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 15
2
Modern Web

JavaScript 初心者筆記系列 第 15

JavaScript 初心者筆記: 迴圈如何加總

  • 分享至 

  • xImage
  •  

昨天簡介完迴圈的基本觀念之後,今天要分享一個迴圈加總的範例,透過範例應該能夠更清楚迴圈實際的運作。


有一個村莊,裡面有三個農場,要如何透過迴圈計算三個農場的香蕉總產量呢?

var farms = [
  {
    farmer: '卡斯伯',
    field: 6,
    chick: 200,
    banana: 5000
  },
  {
    farmer: '查理',
    field: 10,
    chick: 50,
    banana: 1000
  },
  {
    farmer: '約翰',
    field: 6,
    chick: 120,
    banana: 3215
  }
]

// 計算今年的香蕉採收總數
var farmsTotal = farms.length;
var thisYearBananaGoal = 0;
// 香蕉總數是 0,因為還不知道農田所有的香蕉數量是多少,而我們預期會得到一組數字所以先宣告一個為 0 的初始值。
for (var i = 0; i < farmsTotal; i++) {
  thisYearBananaGoal += farms[i].banana;
}
console.log('今年的香蕉總採收數量是:' + thisYearBananaGoal);

首先我們有一個陣列資料庫,任務是計算陣列裡所有農場的香蕉產量。

  1. 宣告一個變數 thisYearBananaGoal = 0 作為產量的初始值,且該變數將被用以儲存加總後的數字
  2. 宣告一個 for 迴圈去執行加總的動作,這個部分的核心觀念是「累加」:
    thisYearBananaGoal += farms[i].banana;
    (這行的意思也可以看作是 thisYearBananaGoal = thisYearBananaGoal + farms[i].banana;
    farms[i].banana; 代表跑迴圈時,會去抓取陣列 farms 對應物件裡的 banana 值,比如說跑第一次時 i = 0;farms[0] 就會去抓第一個物件(banana 的值是 5000)。

所以,第一圈會跑 thisYearBananaGoal = 0 + 5000;(共 5000)
接著再跑第二圈 thisYearBananaGoal = 5000 + 1000; (共 6000)
再跑第三圈 thisYearBananaGoal = 6000 + 3215;
跑完第三圈之後,因為條件已經成就,再跑下去條件將會回傳 false,所以迴圈會到此停止。
最後我們得到 thisYearBananaGoal = 9215


不知不覺我的鐵人賽已經進行到一半了,希望接下來的 15 天我也能堅持住 ><


上一篇
JavaScript 初心者筆記: 迴圈簡介
下一篇
JavaScript 初心者筆記: 在迴圈中 take a "break"
系列文
JavaScript 初心者筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言