目录
- 一、介绍
- 二、准备
- 三、目标
- 四、代码
- 五、答案
一、介绍
期末考试结束不久，辛勤的园丁们就将所有学生的考试成绩汇总完毕。不过现在遇到一个问题，那就是目前所有学生的考试数据均混杂在一起。这些数据结构如下：
[
{
name: "潇然",
class: 2, // 班级
math: 110, // 数学成绩
language: 92, // 语文成绩
english: 114, // 英语成绩
physics: 56, // 物理成绩
chemistry: 74, // 化学成绩
},
{
name: "张三",
class: 1,
math: 100,
language: 80,
english: 60,
physics: 80,
chemistry: 60,
},
// ...
];
从上面的数据结构来看，老师们很难从中分辨出自己班级的学生，更不用说班级学生的成绩排名了。因此我们需要封装一个用于处理这些数据对工具函数，以便帮助老师们更好的查看自己班级的学生成绩。
二、准备
本题已经内置了初始代码，打开实验环境，目录结构如下：
├── index.html
└── student-grade.js
其中：
- index.html 是主页面。
- student-grade.js 是待补充的 js 文件。
三、目标
补充文件 student-grade.js 中的 orderStudentGrade 工具函数，访问 index.html 页面会按照不同的班级，且班级内降序排列所有学生的成绩。最终效果如下：
具体功能说明：
- 接收所有学生成绩的数组。
- 将学生按不同的班级分组，且班级内按照总分降序排列（如果学生 A、B 的总分相同，则按照学生在原数据中的先后顺序进行排列，不要在学生成绩的数据对象中添加多余的字段，确保排序后的对象和排序前一致）。
- 返回分班排序后的对象（如果传入的学生成绩列表为空，则返回一个空对象），形如：
// 返回的结果对象：
// key 是班级号，同一个班级中学生成绩降序排列
{
1: [
{
name: "潇然",
class: 1,
math: 110,
language: 92,
english: 114,
physics: 56,
chemistry: 74,
},
{
name: "张三",
class: 1,
math: 10,
language: 8,
english: 60,
physics: 8,
chemistry: 60,
},
// ...
],
2: [
// ...
],
};
四、代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>考试成绩排序</title>
</head>
<style>
#output-container {
width: 600px;
margin: 0 auto;
}
.cls {
display: flex;
flex-direction: column;
}
.cls + .cls {
margin-top: 30px;
}
.cls-header {
font-size: 30px;
}
td {
text-align: center;
}
</style>
<body>
<div id="output-container"></div>
<script>
module = {};
</script>
<script
type="text/javascript"
src="./student-grade.js
"
></script>
<script>
const orderStudentGradeFn = module.exports;
const output = document.getElementById("output-container");
const students = [
{
name: "张三",
class: 1,
math: 100,
language: 80,
english: 60,
physics: 80,
chemistry: 60,
},
{
name: "李四",
class: 1,
math: 120,
language: 60,
english: 20,
physics: 100,
chemistry: 100,
},
{
name: "王五",
class: 1,
math: 140,
language: 90,
english: 120,
physics: 60,
chemistry: 60,
},
{
name: "苑博",
class: 2,
math: 140,
language: 90,
english: 120,
physics: 60,
chemistry: 60,
},
{
name: "文轩",
class: 2,
math: 110,
language: 60,
english: 120,
physics: 30,
chemistry: 30,
},
{
name: "聪健",
class: 3,
math: 110,
language: 60,
english: 120,
physics: 30,
chemistry: 30,
},
{
name: "烨磊",
class: 3,
math: 88,
language: 70,
english: 100,
physics: 45,
chemistry: 56,
},
{
name: "烨霖",
class: 3,
math: 120,
language: 60,
english: 100,
physics: 50,
chemistry: 60,
},
{
name: "荣轩",
class: 2,
math: 90,
language: 160,
english: 120,
physics: 50,
chemistry: 50,
},
{
name: "懿轩",
class: 2,
math: 100,
language: 90,
english: 120,
physics: 90,
chemistry: 90,
},
{
name: "擎苍",
class: 2,
math: 100,
language: 130,
english: 120,
physics: 10,
chemistry: 40,
},
{
name: "绍齐",
class: 1,
math: 100,
language: 90,
english: 120,
physics: 60,
chemistry: 60,
},
{
name: "皓轩",
class: 1,
math: 100,
language: 120,
english: 120,
physics: 50,
chemistry: 50,
},
{
name: "鹭洋",
class: 1,
math: 100,
language: 80,
english: 120,
physics: 30,
chemistry: 90,
},
{
name: "潇然",
class: 2,
math: 110,
language: 92,
english: 114,
physics: 56,
chemistry: 74,
},
{
name: "智宸",
class: 1,
math: 100,
language: 100,
english: 100,
physics: 30,
chemistry: 30,
},
{
name: "风华",
class: 1,
math: 110,
language: 60,
english: 120,
physics: 80,
chemistry: 79,
},
{
name: "雨泽",
class: 1,
math: 100,
language: 68,
english: 115,
physics: 36,
chemistry: 83,
},
{
name: "浩然",
class: 2,
math: 105,
language: 116,
english: 120,
physics: 90,
chemistry: 60,
},
{
name: "瑾瑜",
class: 3,
math: 110,
language: 60,
english: 120,
physics: 99,
chemistry: 98,
},
];
const result = orderStudentGradeFn(students);
Object.keys(result).forEach((cls) => {
const clsContainer = document.createElement("div");
clsContainer.className = "cls";
const clsHeader = document.createElement("div");
clsHeader.className = "cls-header";
clsHeader.innerText = `第${cls}班`;
clsContainer.appendChild(clsHeader);
const table = document.createElement("table");
table.border = 1;
table.align = "center";
table.width = "100%";
const header = document.createElement("tr");
const th1 = document.createElement("th");
th1.innerText = "姓名";
header.appendChild(th1);
const th2 = document.createElement("th");
th2.innerText = "语文";
header.appendChild(th2);
const th3 = document.createElement("th");
th3.innerText = "数学";
header.appendChild(th3);
const th4 = document.createElement("th");
th4.innerText = "英语";
header.appendChild(th4);
const th5 = document.createElement("th");
th5.innerText = "物理";
header.appendChild(th5);
const th6 = document.createElement("th");
th6.innerText = "化学";
header.appendChild(th6);
const th7 = document.createElement("th");
th7.innerText = "总分";
header.appendChild(th7);
table.appendChild(header);
const students = result[cls];
students.forEach((student) => {
const tr = document.createElement("tr");
const td1 = document.createElement("td");
td1.innerText = student.name;
tr.appendChild(td1);
const td2 = document.createElement("td");
td2.innerText = student.language;
tr.appendChild(td2);
const td3 = document.createElement("td");
td3.innerText = student.math;
tr.appendChild(td3);
const td4 = document.createElement("td");
td4.innerText = student.english;
tr.appendChild(td4);
const td5 = document.createElement("td");
td5.innerText = student.physics;
tr.appendChild(td5);
const td6 = document.createElement("td");
td6.innerText = student.chemistry;
tr.appendChild(td6);
const td7 = document.createElement("td");
td7.innerText =
student.math +
student.language +
student.english +
student.physics +
student.chemistry;
tr.appendChild(td7);
table.appendChild(tr);
});
clsContainer.appendChild(table);
output.appendChild(clsContainer);
});
</script>
</body>
</html>
student-grade.js
function orderStudentGrade(students) {
// TODO: 在这里写入具体的实现逻辑
// 将学生的成绩按班级分组，同一班级中按照总分从高到底排序
}
module.exports = orderStudentGrade; // 检测需要，请勿删除
五、答案
function orderStudentGrade(students) {
// TODO: 在这里写入具体的实现逻辑
//如果传入的学生成绩列表为空，则返回一个空对象
if(students==''){
return {}
}
let newObj = {
1: [],
2: [],
3: [],
};
//按班级分类
students.forEach(item=>{
newObj[item.class].push(item)
})
//排序
//1.计算总分
for(item in newObj){
for(item2 in newObj[item]){
let obj = newObj[item][item2]
obj.total = obj.math+obj.language+obj.english+obj.physics+obj.chemistry
}
}
// //2.sort排序
for(item in newObj){
newObj[item].sort((a,b)=>{return b.total-a.total})
}
//3.删除total
for(item in newObj){
for(item2 in newObj[item]){
let obj = newObj[item][item2]
delete obj.total
}
}
return newObj
}
module.exports = orderStudentGrade; // 检测需要，请勿删除
