JS实现json对象数组按对象属性排序操作示例


Posted in Javascript onMay 18, 2018

本文实例讲述了JS实现json对象数组按对象属性排序操作。分享给大家供大家参考,具体如下:

在实际工作经常会出现这样一个问题:后台返回一个数组中有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>
<meta charset="utf-8">
<title>3water.com json数组排序</title>
</head>
<body>
<script>
var result = [
   {id:1,name:'中国银行'},
   {id:3,name:'北京银行'},
   {id:2,name:'河北银行'},
   {id:10,name:'保定银行'},
   {id:7,name:'涞水银行'}
  ]
function sortId(a,b){
  return a.id-b.id
}
result.sort(sortId);
console.log(result);
</script>
</body>
</html>

然后查看控制台,排序成功:

JS实现json对象数组按对象属性排序操作示例

Javascript 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
vue.js使用3DES加密的方法示例
May 18 #Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 #Javascript
JS实现调用本地摄像头功能示例
May 18 #Javascript
React全家桶环境搭建过程详解
May 18 #Javascript
vue单页开发父子组件传值思路详解
May 18 #Javascript
Node.js Buffer用法解读
May 18 #Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 #Javascript
You might like
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
javascript两段代码,两个小技巧
2010/02/04 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
Django实现组合搜索的方法示例
2018/01/23 Python
python psutil库安装教程
2018/03/19 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
Django中的用户身份验证示例详解
2019/08/07 Python
python对常见数据类型的遍历解析
2019/08/27 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
Python实现FLV视频拼接功能
2020/01/21 Python
Python模块常用四种安装方式
2020/10/20 Python
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
爸爸的花儿落了教学反思
2014/02/20 职场文书
新闻编辑求职信
2014/04/09 职场文书
签约仪式策划方案
2014/06/02 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
2014年学校工作总结
2014/11/20 职场文书
大学体育课感想
2015/08/10 职场文书
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers