基于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 jsFiddle JSBin在线调试器
Mar 14 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
JavaScript实现点击切换功能
Jan 27 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
轮播图组件js代码
2016/08/08 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
python实现在pickling的时候压缩的方法
2014/09/25 Python
有趣的python小程序分享
2017/12/05 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python批量获取html内body内容的实例
2019/01/02 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Python操作qml对象过程详解
2019/09/26 Python
python多进程重复加载的解决方式
2019/12/13 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
班长竞选演讲稿
2014/04/24 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
php将xml转化对象的实例详解
2021/11/17 PHP