这篇博客通过JavaScript展示了如何对数据对象数组进行升序和降序排序，以年龄属性为例，提供了排序函数并绑定了按钮点击事件，动态更新列表展示。
<body>
<button id='btn'>年龄升序</button>
<ul id='ul'>
<h2>556756757575</h2>
</ul>
</body>
</html>
<script>
// ul.innerHTML = `<li>姓名小红；年龄10岁</li>
// <li>姓名小红2；年龄120岁</li>
// <li>姓名小红3；年龄130岁</li>
// <li>姓名小红4；年龄140岁</li>
// <li>姓名小红5；年龄150岁</li>`
var list = [{
name:"小红",
age:10
},
{
name:"张三",
age:120
},
{
name:"李四",
age:140
},
{
name:"王五",
age:105
},
{
name:"小名5",
age:106
}
]
render()
let flag = 1; // 1升 -1 降
btn.onclick = function () {
// 把list数组按照 age属性进行升序排序
flag *= -1;
list.sort((a, b) => {
// return a.name.localeCompare(b.name)
return (a.age - b.age) * flag
})
render()
}
function render() {
// 根据list去渲染 ul的内容
let str = '';
list.forEach(item=> {
str = str + `<li>姓名是${item.name},年龄是${item.age}岁</li>`
})
ul.innerHTML = str; // innerHTML innerText
}
</script>
升序
降序
若有收获，就点个赞吧
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
