转载：https://www.cnblogs.com/jasonwang2y60/p/6656103.html

在实际工作经常会出现这样一个问题：后台返回一个数组中有i个json数据，需要我们根据json中某一项进行数组的排序。

例如返回的数据结构大概是这样：

   {

    result:[

      {id:1,name:'中国银行'},

      {id:3,name:'北京银行'},

      {id:2,name:'河北银行'},

      {id:10,name:'保定银行'},

      {id:7,name:'涞水银行'}

    ]

   }

现在我们根据业务需要，要根据id的大小进行排序，按照id小的json到id大的json顺序重新排列数组的顺序

在js中添加排序的方法：

这里使用JavaScript sort() 方法，首先解释下这个sort的方法

语法：arrayObject.sort(sortby)          　　sortby：可选，规定排序顺序。必须是函数。

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

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

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

下面开始使用sort(sortby) 来进行这个排序，并打印到控制台：

    function sortId(a,b){

       return a.id-b.id

    }

    result.sort(sortId);

    console.log(result);

然后查看控制台，排序成功：

附： 前端机试题一个（对数据进行排序）

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        body, html {

            padding: 0;

            margin: 0;

            font-size: 14px;

            color: #000000;

        }

        table {

            border-collapse: collapse;

            width: 100%;

            table-layout: fixed;

        }

        thead {

            background: #3d444c;

            color: #ffffff;

        }

        td, th {

            border: 1px solid #e1e1e1;

            padding: 0;

            height: 30px;

            line-height: 30px;

            text-align: center;

        }

        .sort-asc::after,

        .sort-desc::after {

            content: ' ';

            display: inline-block;

            margin-left: 5px;

            vertical-align: middle;

        }

        .sort-asc::after {

            border-left: 4px solid transparent;

            border-right: 4px solid transparent;

            border-bottom: 4px solid #eee;

        }

        .sort-desc::after {

            border-left: 4px solid transparent;

            border-right: 4px solid transparent;

            border-top: 4px solid #eee;

        }

    </style>

</head>

<body>

<table>

    <thead id="jsHeader">

    <tr>

        <th>product</th>

        <th>price</th>

        <th>sales</th>

    </tr>

    </thead>

    <tbody id="jsList">

    <tr>

        <td>1</td>

        <td>10.0</td>

        <td>800</td>

    </tr>

    <tr>

        <td>2</td>

        <td>30.0</td>

        <td>300</td>

    </tr>

    <tr>

        <td>3</td>

        <td>20.5</td>

        <td>100</td>

    </tr>

    <tr>

        <td>4</td>

        <td>40.5</td>

        <td>200</td>

    </tr>

    <tr>

        <td>5</td>

        <td>60.5</td>

        <td>600</td>

    </tr>

    <tr>

        <td>6</td>

        <td>50.0</td>

        <td>400</td>

    </tr>

    <tr>

        <td>7</td>

        <td>70.0</td>

        <td>700</td>

    </tr>

    <tr>

        <td>8</td>

        <td>80.5</td>

        <td>500</td>

    </tr>

    </tbody>

</table>

<script type="text/javascript">

    /**

     *  请完成 sortData 函数，根据参数的要求对表格所有行进行重新排序。

     *  1、type为product、price或者sales，分别对应第1 ~ 3列

     *  2、order为asc或者desc，asc表示升序，desc为降序

     *  3、例如 sortData('price', 'asc') 表示按照price列从低到高排序

     *  4、所有表格内容均为数字，每一列数字均不会重复

     *  5、不要使用第三方插件

     */

    function sortData(type, order) {

        //完成您的代码

        if(order == 'asc'){

            data.sort( (a, b)=> a[type] - b[type] );

        }else if(order == 'desc'){

            data.sort( (a, b)=> b[type] - a[type] );

        }

        //调用渲染视图

        render(data);

    }

    //渲染视图

    function render(data) {

        let tbodyHTML = '';

        for( let i = 0; i < data.length; i++ ){

            tbodyHTML += ` <tr>

                                <td>${data[i].product}</td>

                                <td>${data[i].price}</td>

                                <td>${data[i].sales}</td>

                            </tr>`

        }

        document.getElementById('jsList').innerHTML = tbodyHTML;

    }

    //获取数据

    let oTbody = document.getElementById('jsList');

    let oTr = oTbody.getElementsByTagName('tr');

    let data = [];

    for(let i = 0; i < oTr.length; i++){

        data[i] = {

            product: oTr[i].getElementsByTagName('td')[0].innerText,

            price: oTr[i].getElementsByTagName('td')[1].innerText,

            sales: oTr[i].getElementsByTagName('td')[2].innerText,

        }

    }

    /* 原数据格式

       [

    *   {product: "1", price: "10.0", sales: "800"},

    *   {product: "2", price: "30.0", sales: "300"},

    *   {product: "3", price: "20.5", sales: "100"},

    *   {product: "4", price: "40.5", sales: "200"},

    *   {product: "5", price: "60.5", sales: "600"},

    *   {product: "6", price: "50.0", sales: "400"},

    *   {product: "7", price: "70.0", sales: "700"},

    *   {product: "8", price: "80.5", sales: "500"}

    *  ]

    * */

    //sortData('product', 'desc');

    //调用排序函数

    sortData('price','desc')

    //sortData('product', 'desc');

</script>

</body>

</html>

js中json对象数组按对象属性排序---1的更多相关文章

  1. js中json与数组字符串的相互转化

    <SCRIPT LANGUAGE="JavaScript"> var t="{'firstName': 'cyra', 'lastName': 'richar ...

  2. JS中如何判断对象是对象还是数组

    JS中如何判断对象是对象还是数组 一.总结 一句话总结:typeof Array.isArray === "function",Array.isArray(value)和Objec ...

  3. js 数组、对象转json 以及 json转 数组、对象

    let jsonObj = $.parseJSON(jsonStr); //json字符串转化成json对象(jq方法) var jsonObj = JSON.parse(jsonStr); //js ...

  4. js中Json字符串如何转成Json对象(4种转换方式)

    js中Json字符串如何转成Json对象(4种转换方式) 一.总结 一句话总结:原生方法(就是浏览器默认支持的方法) 浏览器支持的转换方式(Firefox,chrome,opera,safari,ie ...

  5. js中JSON的解析（将json字符串转化为对象）和序列化（将对象转化为json字符串）（函数的功能一般都挺全的，需要的时候去查看完整函数）

    js中JSON的解析(将json字符串转化为对象)和序列化(将对象转化为json字符串)(函数的功能一般都挺全的,需要的时候去查看完整函数) 一.总结 1.JSON解析:JSON.parse(myJS ...

  6. js中 json对象与json字符串相互转换的几种方式

    以下总结js中 json对象与json字符串相互转换的几种方式: 一.JSON对象转化为JSON字符串 1.使用JSON.stringify()方法进行转换 该方法不支持较老版本的IE浏览器,比如:i ...

  7. js中的伪数组

    一, 伪数组 1. 具有length属性 2. 按索引方式存储数据 3. 不具有数组的方法, 比如push(),pop()等 二, 生成伪数组的方法 在js中生成伪数组的方法比较多 1. functi ...

  8. js课程 3-10 js中字符串函数数组函数和其它语言中对应函数的区别和联系是什么

    js课程 3-10  js中字符串函数数组函数和其它语言中对应函数的区别和联系是什么 一.总结 一句话总结:js中是对象点方法的形式,这些方法都是对象的方法,而在php.java中却不是这样. 1.j ...

  9. Js中的数据属性和访问器属性

    Js中的数据属性和访问器属性 在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性 ...

  10. js中json法创建对象（json里面的:相当于js里面的=）

    js中json法创建对象(json里面的:相当于js里面的=) 一.总结 json里面的:相当于js里面的= 4.json创建js对象解决命名冲突:多个人为同一个页面写js的话,命名冲突就有可能发生, ...

随机推荐

  1. 【python 网络爬虫】之scrapy系列

    网络爬虫之scripy系列 [scrapy网络爬虫]之0 爬虫与反扒 [scrapy网络爬虫]之一 scrapy框架简介和基础应用 [scrapy网络爬虫]之二 持久化操作 [scrapy网络爬虫]之 ...

  2. [BugBounty] Sleeping stored Google XSS Awakens a $5000 Bounty

    来源:https://blog.it-securityguard.com/bugbounty-sleeping-stored-google-xss-awakens-a-5000-bounty/ 理解 ...

  3. Windows Server 2008 R2忘记密码导致无法修改密码

    其实有个记住密码的工具还是简单的,登陆系统后,CMD输入命令: net user administrator NewPassword 新密码即时生效

  4. mongoDB Liunx下安装及配置

    以下以ubuntu 16.04(64位)操作系统为例: 一.下载和安装 在ubuntu下安装mongodb可以使用 apt-get进行安装,也可以直接下载编译好的二进制文件进行安装.下面主要介绍使用二 ...

  5. Node.js安装和简介

    Node.js是基于Chrome的V8 JavaScript引擎构建的JavaScript运行平台.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. Node.js 的包 ...

  6. 结构数组新发现之直接初始化《leetcode-合并区间》

    leetcode有时候会要求一些奇怪(陌生)的数据形式,刷题因为数据形式卡住了真的很不好... 合并区间里定义了一个Interval的结构数组 struct Interval { int start; ...

  7. ios webview调试

    chrome://inspect/#devices if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) { WebView.setWe ...

  8. SpringMVC拦截器（慕课网）

    拦截器:通过统一拦截从浏览器发往服务器的请求来完成功能的增强 使用场景:解决请求的共性问题 如:乱码.权限验证 基本工作原理:拦截器和过滤器的工作原理相似 乱码问题:使用Spring过滤器(Filte ...

  9. 计算机基础+python安装注意问题+python变量介绍

    1.什么是编程语言语言是一个事物与另外一个事物沟通的介质编程语言是程序员与计算机沟通的介质 2.什么是编程编程就是程序按照某种编程语言的语法规范将自己想要让计算机做的事情表达出来表达的结果就是程序,程 ...

  10. 快速安装freeswitch

    前不久在Centos 6.4上安装了一台Freeswitch,测试已经OK.为了测试FS 的集群效果,从新在安装一台FS,快速安装的过程如下: 方案一:快速安装前提:不用重新下载Freeswitch. ...