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 相关文章推荐
【消息提示组件】,兼容IE6/7&&FF2
Sep 04 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
获取url中用&隔开的参数实例(分享)
May 28 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 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实现Ftp用户的在线管理的代码
2007/03/06 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
英国在线花园中心:You Garden
2018/06/03 全球购物
化工专业应届生求职信
2013/11/08 职场文书
前台文员岗位职责
2013/12/28 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
Python3 如何开启自带http服务
2021/05/18 Python
js 数组 fill() 填充方法
2021/11/02 Javascript
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB