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 相关文章推荐
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 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
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
原生js实现购物车功能
2020/09/23 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
Python转码问题的解决方法
2008/10/07 Python
小小聊天室Python代码实现
2016/08/17 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
python递归函数绘制分形树的方法
2018/06/22 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
利用python 下载bilibili视频
2020/11/13 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
工作表现自我评价
2014/02/08 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
逃课检讨书怎么写
2015/01/01 职场文书