JavaScript中,json遍历后存入新的json,以及 JSON.stringify的使用(设计一个程序, 使用者输入的5门课程的成绩后在页面上显示总成绩和平均分, 并列出大于60的成绩)

今天看到一份面试题,做了很久才做出来,由此记录一下

1、题目:

使用JavaScript 设计一个程序, 使用者输入的5门课程的成绩后在页面上显示总成绩和平均分, 并列出大于60的成绩

2、代码如下:


<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 + '
平均成绩为:'
+ svg + '
高于60分的成绩有:'
+ JSON.stringify(json_new);//JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串 } else { alert("输入有误,请重新输入"); } }
script> body> html>

3、运行后:

JavaScript中,json遍历后存入新的json,以及 JSON.stringify的使用(设计一个程序, 使用者输入的5门课程的成绩后在页面上显示总成绩和平均分, 并列出大于60的成绩)_第1张图片

4、运行后:

JavaScript中,json遍历后存入新的json,以及 JSON.stringify的使用(设计一个程序, 使用者输入的5门课程的成绩后在页面上显示总成绩和平均分, 并列出大于60的成绩)_第2张图片

你可能感兴趣的:(面试题)