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 相关文章推荐
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
js如何获取网页所有图片
May 12 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
微信小程序实现列表左右滑动
Nov 19 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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
python实现人人网登录示例分享
2014/01/19 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
《日月潭》教学反思
2014/02/28 职场文书
党建工作经验交流材料
2014/05/25 职场文书
护理专业自我评价
2015/03/11 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
Java中try catch处理异常示例
2021/12/06 Java/Android
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang