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 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
javascript 跳转代码集合
Dec 03 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 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
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
PDO::setAttribute讲解
2019/01/29 PHP
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
教师申诉制度
2014/01/29 职场文书
运动会跳远广播稿
2014/02/04 职场文书
工商管理专业自荐信
2014/06/03 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
事业单位考察材料范文
2014/12/25 职场文书
七一晚会主持词
2015/06/29 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书