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 相关文章推荐
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
js与applet相互调用的方法
Jun 22 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 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无敌近乎加密方式!
2010/07/17 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
$.format,jquery.format 使用说明
2011/07/13 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
基于pip install django失败时的解决方法
2018/06/12 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
python3中property使用方法详解
2019/04/23 Python
Python控制Firefox方法总结
2019/06/03 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
如何基于python实现归一化处理
2020/01/20 Python
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
2014年乡镇植树节活动方案
2014/02/28 职场文书
会计专业导师推荐信
2014/03/08 职场文书
舞蹈专业求职信
2014/06/13 职场文书
护士业务学习心得体会
2016/01/25 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
基于PyQt5制作一个群发邮件工具
2022/04/08 Python