js数组排序输出
项目要求,需要在前端做筛选排序,数据都是用ajax向服务器请求返回json数据
参考:https://blog.csdn.net/bobobocai/article/details/78028497
用到js 的sort()方法
定义和用法
sort() 方法用于对数组的元素进行排序。
参数 | 描述 |
---|---|
sortby | 可选。规定排序顺序。必须是函数。 |
返回值
对数组的引用。请注意,数组在原数组上进行排序,不生成副本。
说明
如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。
如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
- 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
- 若 a 等于 b,则返回 0。
- 若 a 大于 b,则返回一个大于 0 的值。
更多资料可以看:http://www.w3school.com.cn/jsref/jsref_sort.asp
下面贴代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js数组排序输出</title>
<script src="http://www.xxiaoyuan.top/jquery-1.9.1.js"></script>
</head>
<body>
<div class="box">
<ul>
</ul>
</div>
</body>
<script>
$(function () {
var Obj = [
{
id:20,
name:"Back",
age:26,
sex:"男"
},
{
id:21,
name:"Jun",
age:19,
sex:"男"
},
{
id:22,
name:"Mark",
age:36,
sex:"女"
},
{
id:23,
name:"Tony",
age:23,
sex:"男"
}
];
//定义一个函数
function compare(pro) {
return function (obj1, obj2) {
var val1 = obj1[pro];
var val2 = obj2[pro];
if (val1 < val2 ) { //正序
return 1;
} else if (val1 > val2 ) { //倒序
return -1;
} else {
return 0;
}
}
}
//按年龄降序排序
var pai = Obj.sort(compare("age"));
console.log(pai);
for(var i in pai){
$(".box ul").append(`
<li>
姓名:<span>${Obj[i].name}</span>
年龄:<span>${Obj[i].age}</span>
性别:<span>${Obj[i].sex}</span>
</li>
`);
}
});
</script>
</html>
上面代码可以直接复制用,自己控制台打印看看,
还没有评论,来说两句吧...