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中将具有数字属性名的对象转换为数组
Mar 06 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 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 mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
SinaEditor使用方法详解
2013/12/28 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
JavaScript入门基础
2015/08/12 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
JavaScript中的this机制
2016/01/30 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
python中__call__方法示例分析
2014/10/11 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
pytorch构建多模型实例
2020/01/15 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
python 实现IP子网计算
2021/02/18 Python
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
护理专科毕业推荐信
2013/11/10 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
如何通过一篇文章了解Python中的生成器
2022/04/02 Python
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python