基于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 相关文章推荐
JavaScript的目的分析
Jan 05 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
浅析php与数据库代码开发规范
2013/08/08 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
JavaScript对象学习经验整理
2013/10/12 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
基于Python的身份证号码自动生成程序
2014/08/15 Python
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python中super的用法实例
2015/05/28 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
关于迟到的检讨书
2014/01/26 职场文书
北京大学自荐信范文
2014/01/28 职场文书
教师继续教育反思周记
2015/06/25 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers
我去timi了,一起去timi是什么意思?
2022/04/13 杂记