ES6 Map集合操作用Map存储学号和成绩，输入10个数据，输出所有大于平均分的学生信息

最新推荐文章于 2022-11-27 10:41:10 发布

Rtwo

最新推荐文章于 2022-11-27 10:41:10 发布

阅读量1k

点赞数

文章标签： es6

本文链接：https://blog.csdn.net/qq_39146072/article/details/105490647

版权

ES6 Map 学习

菜鸟教程Map学习：https://www.runoob.com/w3cnote/es6-map-set.html

实践

1. 题目
用 Map 存储学号和成绩，输入 10 个数据，输出所有大于平均分的学生信息，格式为<学号，成绩>

2. 思考

界面：输入学生信息的界面我采用了表格的形式；一个提交按钮点击后计算平均分然后输出分数大于平均分的学生信息
逻辑：将输入的信息存到Map里，累加学生成绩，计算出总分，然后计算平均分；forEach Map，分数大于平均分，则输出。

3. 实现
也没有什么注释，操作一目了然。

<!DOCTYPE html>
<html>

<head> 
    <meta charset="utf-8"> 
    <title>MAP</title> 
</head>

<body>
    <script>
        function myFunction() {
            var num = 10;
            var studentMap = new Map();
            for (i = 1; i <= num; i++) {
                no = "no" + i;
                score = "score" + i;
                var s1 = document.getElementById('' + no).value;
                var s2 = document.getElementById('' + score).value;
                studentMap.set(s1, s2);
            }
            var total = 0;
            studentMap.forEach(function (value, key) {
                total += parseInt(value);
            }, studentMap);
            var avr = total / num;
            document.getElementById("hint").innerHTML = "大于平均分" + avr + "分的学生信息：";
            var stu = "";
            studentMap.forEach(function (value, key) {
                if (parseInt(value) >= avr) {
                    stu += "<" + key + " , " + value + "><br />";
                }
            }, studentMap);
            document.getElementById("student").innerHTML = stu;
        }
    </script>
    <br /><b id="title"></b><br /><br />
    <script>
        document.getElementById("title").innerHTML = "请输入学生信息：";
        var rows = 3;
        var cols = 10;
        var str = "<table border='1dp'><thead><tr><td style='text-align: center;'></td><td style='text-align: center;'>学号</td><td style='text-align: center;'>成绩</td></tr></thead><tbody>";
        for (i = 1; i <= cols; i++) {
            s = "学生 " + i;
            no = "no" + i;
            score = "score" + i;
            str += "<tr><td>" + s + "</td>"
            str += "<td><input id='" + no + "' type='text'></td>";
            str += "<td><input id='" + score + "' type='text'></td></tr>"
        }
        str += "</tbody></table>";
        document.write(str)
    </script>
    <input type="submit" onclick="myFunction()" value="计算" style="margin-top: 10px;margin-bottom: 10px;"><br />
    <b id="hint"></b><br />
    <a style="margin-top: 10px;" id="student"></a><br />
</body>

</html>

结果

输入信息
点击计算，输出信息：

总结

对ES6语法有了初步的认识，对Map的集合操作能够实际应用

Rtwo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES6 Map集合操作用Map存储学号和成绩，输入10个数据，输出所有大于平均分的学生信息

ES6 Map 学习菜鸟教程Map学习：https://www.runoob.com/w3cnote/es6-map-set.html实践1. 题目用 Map 存储学号和成绩，输入 10 个数据，输出所有大于平均分的学生信息，格式为<学号，成绩>2. 思考界面：输入学生信息的界面我采用了表格的形式；一个提交按钮点击后计算平均分然后输出分数大于平均分的学生信息逻辑：...
复制链接

扫一扫