js数组排序输出-蒲公英云

js数组排序输出

短命女 2022-04-22 06:14 307阅读 0赞

项目要求，需要在前端做筛选排序，数据都是用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>