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 冒号 使用说明
Jun 06 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
浅谈javascript中的闭包
May 13 Javascript
js图片切换具体实现代码
Oct 13 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
JS实现图片切换效果
Nov 17 Javascript
javascript中的数据类型检测方法详解
Aug 07 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
js new Date()实例测试
Oct 31 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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
5 cool javascript apps
2007/03/24 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
python类参数self使用示例
2014/02/17 Python
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
python数据抓取3种方法总结
2021/02/07 Python
接受捐赠答谢词
2014/01/27 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
大专生自荐书范文
2014/06/22 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android