JavaScript对JSON数组简单排序操作示例


Posted in Javascript onJanuary 31, 2019

本文实例讲述了JavaScript对JSON数组简单排序操作。分享给大家供大家参考,具体如下:

我们经常回使用到数据格式

var arr=[{num:1},{num:3},{num:2}]

如何根据数组里面的JSON数据的某个key进行排序

javascript有一个sort()方法,直接通过 arr.sort()进行排序,默认只对数组的值进行排序,然而以上的数组的值却是个JSON格式的。

我们在看看sort方法的定义:

定义和用法

sort() 方法用于对数组的元素进行排序。

语法

arrayObject.sort(sortby)

参数 描述
sortby 可选。规定排序顺序。必须是函数。

返回值

对数组的引用。请注意,数组在原数组上进行排序,不生成副本。

说明

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。

所以重点在于sortby这个参数的规则。根据以上的说明我们可以创建一个规则函数

var arr=[{num:1},{num:3},{num:2}]
function newSort(x,y)
{
return x.num-y.num;
}
console.log(arr.sort(newSort));//完成排序,如果JSON里面的不是数字,则需要在newSort里面做一下处理
//比如:如果num的值是_1而不是数字1 则 return x.state.substr(1,1)-y.state.substr(1,1);

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得到如下运行结果:

JavaScript对JSON数组简单排序操作示例

Javascript 相关文章推荐
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
js实现网页收藏功能
Dec 17 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
实例讲解v-if和v-show的区别
Jan 31 #Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 #Javascript
Angular PWA使用的Demo示例
Jan 31 #Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 #Javascript
微信小程序开发的基本流程步骤
Jan 31 #Javascript
JSON的parse()方法介绍
Jan 31 #Javascript
JSON.stringify()方法讲解
Jan 31 #Javascript
You might like
php摘要生成函数(无乱码)
2012/02/04 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
python中类的属性和方法介绍
2018/11/27 Python
Python如何使用函数做字典的值
2019/11/30 Python
python绘制玫瑰的实现代码
2020/03/02 Python
如何用python处理excel表格
2020/06/09 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
C#实现启动一个进程
2016/10/01 面试题
技术总监管理职责范本
2014/03/06 职场文书
葬礼司仪主持词
2014/03/31 职场文书
新教师培训方案
2014/06/08 职场文书
食品安全汇报材料
2014/08/18 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
介绍信格式
2015/01/30 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书