基于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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 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转成EXE文件
2006/10/09 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
Python连接数据库学习之DB-API详解
2017/02/07 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
Python对excel文档的操作方法详解
2018/12/10 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
python中时间模块的基本使用教程
2019/05/14 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
《童趣》教学反思
2014/02/19 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
离婚协议书范本样本
2014/08/19 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
精神病医院见习报告
2014/11/03 职场文书
考试作弊检讨书
2015/01/27 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js