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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
详解vue项目构建与实战
Jun 27 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
javascript实现点击小图显示大图
Nov 29 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动态生成虚拟现实VRML网页
2006/10/09 PHP
php目录管理函数小结
2008/09/10 PHP
php下将XML转换为数组
2010/01/01 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
php后门URL的防范
2013/11/12 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
php中namespace及use用法分析
2016/12/06 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
解决vue项目router切换太慢问题
2020/07/19 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
警察群众路线整改措施
2014/09/26 职场文书
论文答辩开场白大全
2015/05/27 职场文书
Python基础之元类详解
2021/04/29 Python
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers