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 相关文章推荐
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
微信小程序云开发详细教程
May 16 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
javascript canvas检测小球碰撞
Apr 17 Javascript
Openlayers学习之地图比例尺控件
Sep 28 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读取MySQL数据代码
2008/06/05 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
第五章 php数组操作
2011/12/30 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
解决Python对齐文本字符串问题
2019/08/28 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
python 元组和列表的区别
2020/12/30 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
售前工程师职业生涯规划
2014/03/02 职场文书
召开会议通知范文
2015/04/15 职场文书
联谊会开场白
2015/06/01 职场文书
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL