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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
Javascript中的delete介绍
Sep 02 Javascript
js验证上传图片的方法
May 12 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
Express 配置HTML页面访问的实现
Nov 01 Javascript
JS如何监听div的resize事件详解
Dec 03 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
实例讲解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中养成7个面向对象的好习惯
2010/01/28 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
php权重计算方法代码分享
2014/01/09 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
Python yield使用方法示例
2013/12/04 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
python实现可变变量名方法详解
2019/07/01 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
聘任书模板
2014/03/29 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
奔腾年代观后感
2015/06/09 职场文书
如何写好活动总结
2019/06/21 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python