数组排序，操作dom，switch条件结构，筛选框，onchange事件，函数封装代码复用
要求
完成一个数组排序：
arr = [
{name:"alex", age:18, sex:"man", num:"10"},
{name:"sky", age:17, sex:"man", num:"101"},
{name:"rose", age:28, sex:"women", num:"2"},
{name:"roy", age:5, sex:"man", num:"16"},
]
要求排序由用户选择。比方说一开始让用以年龄从大到小的排序的话就输入 1
页面就生成一个列表是按用户要求排序好的
一共应该至少有这几个排序方式：
按年龄大到小或小到大进行排序。
按号码大到小或小到大进行排序。
按年龄与号码进行排序，也就是说年龄大的优先，但如果年龄相同则以号大的优先。
提示：以下是本篇文章正文内容，下面案例可供参考
一、html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组年龄号码排序</title>
</head>
<body>
<select name="type" οnchange="show_sub(this.options[this.options.selectedIndex].value)">
<option value="0">
原始数据
</option>
<option value="1">
按年龄大排序
</option>
<option value="2">
按年龄小排序
</option>
<option value="3">
按号码大排序
</option>
<option value="4">
按号码小排序
</option>
<option value="5">
按年龄，号码排序
</option>
</select>
<div id="wrap"></div>
</body>
</html>
二.JavaScript
代码如下（示例）：
<script>
let arr = [
{
name: 'cici', age: 18, sex: 'girl', num: 157
},
{
name: 'vivi', age: 19, sex: 'girl', num: 160
},
{
name: 'leo', age: 17, sex: 'boy', num: 171
},
{
name: 'ian', age: 20, sex: 'boy', num: 180
},
{
name: 'jaskon', age: 20, sex: 'boy', num: 178
}
];
let wrap = document.getElementById('wrap')
function newSort(arr) {
// console.log(wrap)
wrap.innerHTML = ''
arr.forEach(item => {
// console.log(item)
let show = document.createElement('p')
show.innerHTML = '姓名：' + item.name + "年龄：" + item.age + "性别：" + item.sex + "学号：" + item.num
wrap.appendChild(show)
});
}
function show_sub(v) {
// console.log(1)
// alert(v);
console.log(typeof v)
switch (v) {
case '0':
newSort(arr);
break;
case '1':
let res = arr.sort(
(x, y) => {
return y.age - x.age
}
);
newSort(res);
break;
case '2':
let res4 = arr.sort(
(x, y) => {
return x.age - y.age
}
);
newSort(res4);
break;
case '3':
let res3 = arr.sort(
(x, y) => {
return x.num - y.num
}
);
newSort(res3);
break;
case '4':
let res2 = arr.sort(
(x, y) => {
return y.num - x.num
}
);
newSort(res2);
break;
case '5':
let res1 = arr.sort(
(x, y) => {
if (y.age - x.age == 0) {
return y.num - x.num
} else {
return y.age - x.age
}
}
);
newSort(res1);
break;
}
}
</script>
1.Onchange 下拉框传值
获在select onchange时获取option的value值：
this.options[this.options.selectedIndex].value
2.清空HTML页面div内容
<div id="wrap"></div>
let wrap = document.getElementById('wrap')
wrap.innerHTML = ''
3 数组排序sort（）
根据返回值大于或小于0的关系，来比较，确定是否调换两位参数在数组中的位置，从而输出排序后的结果。
4 switch条件结构格式
switch(表达式)
{
case 取值1:
执行语句；
break；
case 取值2:
执行语句；
break；
…...
default:
执行语句；
break；
}
5 函数封装复用
数组需要多次调用排序及显示，封装一个函数，传入排序后的参数，在页面显示。显示后需要清空HTML内容。
总结
数组排序，操作dom，switch条件结构，筛选框，onchange事件及传值，函数封装代码复用。数组排序及下拉框筛选页面显示功能需要用到的知识点
194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
