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 相关文章推荐
ASP.NET中AJAX 调用实例代码
May 03 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
简单的js表单验证函数
Oct 28 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
详解vue项目构建与实战
Jun 27 Javascript
js实现本地时间同步功能
Aug 26 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
原生js无缝轮播插件使用详解
Mar 09 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实现链结人气统计
2006/10/09 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
初中校园之声广播稿
2014/01/15 职场文书
小区门卫值班制度
2014/01/24 职场文书
运动会口号8字
2014/06/07 职场文书
分居协议书范本
2014/11/03 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js