基于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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
js模拟实现Array的sort方法
Dec 11 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
移动端js图片查看器
Nov 17 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 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 md5下16位和32位的实现代码
2008/04/09 PHP
在php和MySql中计算时间差的方法
2011/04/22 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
jQuery学习笔记之Helloworld
2010/12/22 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
python将回车作为输入内容的实例
2018/06/23 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
python对Excel的读取的示例代码
2020/02/14 Python
python 两种方法删除空文件夹
2020/09/29 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
高考升学宴答谢词
2015/01/20 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
python实现的web监控系统
2021/04/27 Python
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
利用Python实现Picgo图床工具
2021/11/23 Python
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
mysql函数之截取字符串的实现
2022/08/14 MySQL