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 相关文章推荐
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
Vue Element校验validate的实例
Sep 21 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 Directory 函数的详解
2013/03/07 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
学python安装的软件总结
2019/10/12 Python
python编写实现抽奖器
2020/09/10 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
经济管理专业毕业生推荐信
2013/11/11 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
英语老师推荐信
2014/02/26 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
创业计划书之家教中心
2019/09/25 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
详解thinkphp的Auth类认证
2021/05/28 PHP
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL