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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
js用图作提交按钮或超连接
Mar 26 Javascript
JS 类型转换常见方法小结
May 31 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
详谈javascript异步编程
Feb 21 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
JS继承定义与使用方法简单示例
Feb 19 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
速记Python布尔值
2017/11/09 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
建筑设计师岗位职责
2013/11/18 职场文书
人事专员职责
2014/02/22 职场文书
学校献爱心活动总结
2014/07/08 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
教师见习总结范文
2015/06/23 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle