iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 14
0
自我挑戰組

JavaScript 新手筆記系列 第 14

Day14 - 迴圈(02) - 綜合練習

  • 分享至 

  • xImage
  •  

前言

發現迴圈應用不少,結合之前的陣列、物件與判斷的部分,進行相關練習

陣列與物件

  • 在陣列內儲存物件,利用陣列來選出特定的物件內容
  • 會發現有點類似 JSON (JavaScript Object Notation,JavaScript物件表示法)格式,WIKI,對於資料交換,如:開放資料( opendata )是一個很常見的格式
var school = [
    {
        number: 1,
        studentName: "小明",
        testTimes: 3,
        chineseGrade: [40,30,50],
        englishGrade: [50,30,40],
        mathGrade: [40,30,50],
        classRoom: "一年一班"
    },
    {
        number: 2,
        studentName: "小花",
        testTimes: 3,
        chineseGrade: [60,70,80],
        englishGrade: [80,80,90],
        mathGrade: [50,40,30],
        classRoom: "一年一班"
    },
    {
        number: 3,
        studentName: "小華",
        testTimes: 3,
        chineseGrade: [60,80,70],
        englishGrade: [40,50,30],
        mathGrade: [50,60,70],
        classRoom: "一年一班"
    },
]

console.log("學生姓名:" + school[0].studentName);
// 學生姓名:小明
// 挑出第1個陣列裡面的學生姓名

console.log(school[1].studentName + "的號碼是" + school[1].number +"號");
// 小花的號碼是2號
// 挑出第2個陣列裡面的學生姓名與號碼

console.log("國文已經考了" + school[2].testTimes + "次");
console.log("國文已經考了" + school[2].chineseGrade.length + "次");
// 國文已經考了3次
// 挑出第3個陣列裡面的國文測試次數

加入迴圈

  • 利用陣列長度( length )來設定迴圈的次數,可減少變動後忘記修改
  • 在陣列上使用變數代替,如 [i]
var total = school.length
// 先設定次數(陣列長度)
for (var i = 0 ; i < total ; i++){
    console.log("第" + (i+1) + "位學生是" + school[i].studentName);
}
// 依序列出全部的學生姓名

// 第1位學生是小明
// 第2位學生是小花
// 第3位學生是小華

加入判斷

  • 例子用了2組迴圈(會不會太複雜了?),去挑出某個人的某次成績並累加
  • 之後進行成績平均
  • 使用條件判斷是否滿足及格條件
for (var i = 0 ; i < total ; i++){
    var mathTotal = 0;
    // 設定總分變數
    for (var a = 0 ; a < school[i].testTimes ; a++){
        // 挑出第i個學生的測試次數
        mathTotal += school[i].mathGrade[a];
        // 將分數累加
    }
    var mathAVG = mathTotal/school[i].testTimes;
    // 計算平均 = 總分/次數
    
    console.log("數學平均:" + mathAVG);
    if (mathAVG>= 60){
        //判斷總分是否超過60,顯示及格
        console.log("及格");
    } else {
        //否則,顯示不及格
        console.log("不及格");
    }

}

// 數學平均:40
// 不及格
// 數學平均:40
// 不及格
// 數學平均:60
// 及格

次回

好像不進入 DOM 不行了?
知識庫存量嚴重不足,感覺有點頭大


上一篇
Day13 - 迴圈(01)
下一篇
Day15 - DOM(01)
系列文
JavaScript 新手筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言