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 相关文章推荐
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
React中的Context应用场景分析
Jun 11 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脚本的10个技巧(3)
2006/10/09 PHP
PHP中的cookie
2006/11/26 PHP
php中取得文件的后缀名?
2012/02/20 PHP
PHP 图片水印类代码
2012/08/27 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
js cookies实现简单统计访问次数
2009/11/24 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
Python中包的用法及安装
2020/02/11 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
心得体会开头
2014/01/01 职场文书
同事打架检讨书
2014/02/04 职场文书
烹调加工管理制度
2014/02/04 职场文书
财务担保书范文
2014/04/02 职场文书
2014年共青团工作总结
2014/12/10 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
Python加密技术之RSA加密解密的实现
2022/04/08 Python
PYTHON InceptionV3模型的复现详解
2022/05/06 Python
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技