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系列(12) 变量对象(Variable Object)
Jan 16 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
js实现动态显示时间效果
Mar 06 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
用Python编写web API的教程
2015/04/30 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
python实现求特征选择的信息增益
2018/12/18 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
Python和Go语言的区别总结
2019/02/20 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
python实现桌面气泡提示功能
2019/07/29 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
python循环输出三角形图案的例子
2019/11/22 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
pandas实现导出数据的四种方式
2020/12/13 Python
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书