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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
jQuery技巧总结
Jan 01 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
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
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
在python中pandas的series合并方法
2018/11/12 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
Python二维码生成识别实例详解
2019/07/16 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
婚礼新郎父母答谢词
2014/01/16 职场文书
一句话工作感言
2014/03/01 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
2014年教研工作总结
2014/12/06 职场文书
老公保证书
2015/01/17 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android
css3应用示例:新增的选择器
2022/03/16 HTML / CSS
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers