基于JavaScript实现Json数据根据某个字段进行排序


Posted in Javascript onNovember 24, 2015

一.首先给大家介绍js中内置的 sort() 方法

此方法默认是按字母顺序对数组中的元素进行排序的,说得更精确点,是按照字符编码的顺序进行排序。

看如下例子:

基于JavaScript实现Json数据根据某个字段进行排序

当数组中元素为 数字类型 时,排序结果与我们设想的完全不同,因为默认是按照字符编码的顺序进行排序的。

解决方案:sort() 方法接收一个可选参数(此参数必须是函数),我们可以自己定义排序规则,如下图

基于JavaScript实现Json数据根据某个字段进行排序

二.  对 json 排序的具体实现

/*
     * @description    根据某个字段实现对json数组的排序
     * @param   array  要排序的json数组对象
     * @param   field  排序字段(此参数必须为字符串)
     * @param   reverse 是否倒序(默认为false)
     * @return  array  返回排序后的json数组
    */
    function jsonSort(array, field, reverse) {
      //数组长度小于2 或 没有指定排序字段 或 不是json格式数据
      if(array.length < 2 || !field || typeof array[0] !== "object") return array;
      //数字类型排序
      if(typeof array[0][field] === "number") {
        array.sort(function(x, y) { return x[field] - y[field]});
      }
      //字符串类型排序
      if(typeof array[0][field] === "string") {
        array.sort(function(x, y) { return x[field].localeCompare(y[field])});
      }
      //倒序
      if(reverse) {
        array.reverse();
      }
      return array;
    }

PS:JS中:json对象数组按对象属性排序

var array = [
  {name: 'a', phone: 1},
  {name: 'b', phone: 5},
  {name: 'd', phone: 3},
  {name: 'c', phone: 4}
]
array.sort(getSortFun('desc', 'phone'));
function getSortFun(order, sortBy) {
  var ordAlpah = (order == 'asc') ? '>' : '<';
  var sortFun = new Function('a', 'b', 'return a.' + sortBy + ordAlpah + 'b.' + sortBy + '?1:-1');
  return sortFun;
}
alert(JSON.stringify(array));

数组本身有sort方法,可以指定排序函数,因此可以动态生成一个排序函数来完成对按指定对象属性排序的需求;

注意:sort后原数组序列会发生变化!!

Javascript 相关文章推荐
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
JS实现网站吸顶条
Jan 08 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 #Javascript
js生成随机数的过程解析
Nov 24 #Javascript
jquery制作图片时钟特效
Mar 30 #Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 #Javascript
JS鼠标拖拽实例分析
Nov 23 #Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 #Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 #Javascript
You might like
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
js实现tab切换效果
2017/02/16 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
微信小程序实现自定义底部导航
2020/11/18 Javascript
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
Python二维码生成识别实例详解
2019/07/16 Python
python是否适合网页编程详解
2019/10/04 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
QA工程师岗位职责
2013/11/20 职场文书
合伙协议书范本
2014/04/21 职场文书
爱国主义演讲稿
2014/05/07 职场文书
企业年度评优方案
2014/06/02 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
2014年法务工作总结
2014/12/11 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis