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打印网页指定区域的例子
May 03 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 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多维数组去掉重复值示例分享
2014/03/02 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
javascript实现密码验证
2015/11/10 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
详解Python验证码识别
2016/01/25 Python
python 性能优化方法小结
2017/03/31 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
python利用7z批量解压rar的实现
2019/08/07 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
python pymysql库的常用操作
2020/10/16 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
大专生自荐信
2013/10/04 职场文书
力学专业毕业生自荐信
2013/11/17 职场文书
保安队长职务说明书
2014/02/23 职场文书
应届生面试求职信
2014/07/02 职场文书
银行稽核岗位职责
2015/04/13 职场文书