基于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 相关文章推荐
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
python使用多进程的实例详解
2018/09/19 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
设计毕业生简历中的自我评价
2013/10/01 职场文书
应届毕业生的自我鉴定
2013/11/13 职场文书
给幼儿园老师的表扬信
2014/01/19 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
靠谱的活动总结
2019/04/16 职场文书
python实现局部图像放大
2021/11/17 Python
把77A收信机改造成收音机
2022/04/05 无线电
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫