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弹出层永远居中实现思路及代码
Nov 29 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
微信小程序实现星星评分效果
Nov 01 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 函数使用方法与函数定义方法
2010/05/09 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
jQuery事件对象总结
2016/10/17 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
python简单获取数组元素个数的方法
2015/07/13 Python
老生常谈Python基础之字符编码
2017/06/14 Python
python分析作业提交情况
2017/11/22 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
考察现实表现材料
2014/05/19 职场文书
查摆问题整改措施
2014/10/24 职场文书
2014年教研员工作总结
2014/12/23 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
基于Redis的List实现特价商品列表功能
2021/08/30 Redis