JavaScript中,json遍歷後存入新的json,以及 JSON.stringify的使用(設計一個程序, 使用者輸入的5門課程的成績後在頁面上顯示總成績和平均分, 並列出大於60的成績)

今天看到一份面試題,做了很久才做出來,由此記錄一下

1、題目:

使用JavaScript 設計一個程序, 使用者輸入的5門課程的成績後在頁面上顯示總成績和平均分, 並列出大於60的成績

2、代碼如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Language" content="zh-cn"/>
    <title></title>
</head>
<body>
課程1:<input type="text" id="kc1"/><br/>
課程2:<input type="text" id="kc2"/><br/>
課程3:<input type="text" id="kc3"/><br/>
課程4:<input type="text" id="kc4"/><br/>
課程5:<input type="text" id="kc5"/><br/>
<button id="btn" onclick="btn();">確定</button>

<div id="did"></div>
<script>
    function btn() {
        /**
         * 獲取 五門課程 的值,並轉換爲浮點數,parseFloat(),是把字符串轉換爲浮點數
         * @type {number}
         */
        var kc1 = parseFloat(document.getElementById("kc1").value);
        var kc2 = parseFloat(document.getElementById("kc2").value);
        var kc3 = parseFloat(document.getElementById("kc3").value);
        var kc4 = parseFloat(document.getElementById("kc4").value);
        var kc5 = parseFloat(document.getElementById("kc5").value);

        /**
         * 設置一個 div ,用於顯示結果
         * @type {HTMLElement}
         */
        var div_id = document.getElementById("did");

        /**
         * 判斷獲取到的每一值都是大於0 的數,並且不能爲空,否則就顯示輸入異常
         */
        if (kc1 >= 0 && kc2 >= 0 && kc3 >= 0 && kc4 >= 0 && kc5 >= 0) {
            var total = kc1 + kc2 + kc3 + kc4 + kc5;//得到總成績
            var svg = total / 5;//得到平均成績

            /**
             * 由於 {課程 :成績} 是成對存在,我們創建一個 json 對象,並對其遍歷
             * 如果有 成績>60 的,把這個對象存入一個新的 json對象
             * @type {{課程5: number, 課程1: number, 課程2: number, 課程3: number, 課程4: number}}
             */
            var json_obj = {"課程1": kc1, "課程2": kc2, "課程3": kc3, "課程4": kc4, "課程5": kc5};//需要遍歷的 json 對象
            var json_new = {};//遍歷後,符合要求的,存在這個對象中
            for (var key in json_obj) {//遍歷
                //console.log( key+' : '+json_obj[key] );//控制檯打印測試
                if (json_obj[key] >= 60) {//判斷
                    json_new[key] = json_obj[key];//存入新的對象
                }
            }
            div_id.innerHTML = '總成績爲:' + total + '<br>平均成績爲:' + svg + '<br>高於60分的成績有:' + JSON.stringify(json_new);//JSON.stringify()的作用是將 JavaScript 對象轉換爲 JSON 字符串
        } else {
            alert("輸入有誤,請重新輸入");
        }
    }
</script>
</body>
</html>

3、運行後:

在這裏插入圖片描述

4、運行後:

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章