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制作浮动广告代码
Dec 30 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 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基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
jscript之List Excel Color Values
2007/06/13 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
python使用cookielib库示例分享
2014/03/03 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
python取均匀不重复的随机数方式
2019/11/27 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
Pandas的数据过滤实现
2021/01/15 Python
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
加工操作管理制度
2014/01/19 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
小学教育见习报告
2014/10/31 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
小学总务工作总结
2015/08/13 职场文书