js数组排序输出

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

项目要求，需要在前端做筛选排序，数据都是用ajax向服务器请求返回json数据  
参考：[https://blog.csdn.net/bobobocai/article/details/78028497][https_blog.csdn.net_bobobocai_article_details_78028497]

用到js 的**sort()**方法

## 定义和用法 ##

sort() 方法用于对数组的元素进行排序。

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>sortby</em></td> 
   <td>可选。规定排序顺序。必须是函数。</td> 
  </tr> 
 </tbody> 
</table>

### 返回值 ###

对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

### 说明 ###

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

*  若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
 *  若 a 等于 b，则返回 0。
 *  若 a 大于 b，则返回一个大于 0 的值。

更多资料可以看：[http://www.w3school.com.cn/jsref/jsref\_sort.asp][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>

上面代码可以直接复制用，自己控制台打印看看，

[https_blog.csdn.net_bobobocai_article_details_78028497]: https://blog.csdn.net/bobobocai/article/details/78028497
[http_www.w3school.com.cn_jsref_jsref_sort.asp]: http://www.w3school.com.cn/jsref/jsref_sort.asp