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 相关文章推荐
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
简单的分页代码js实现
May 17 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
简介JavaScript错误处理机制
Aug 04 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 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 时间转换Unix时间戳代码
2010/01/22 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
多广告投放代码 推荐
2006/11/13 Javascript
cssQuery()的下载与使用方法
2007/01/12 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
django使用多个数据库的方法实例
2021/03/04 Python
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
快餐店的创业计划书范文
2014/01/29 职场文书
小班下学期评语
2014/05/04 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
导游词之青城山景区
2019/09/27 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL