基于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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
javascript 函数调用规则
Aug 26 Javascript
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
Vue使用Three.js加载glTF模型的方法详解
Jun 14 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
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
Yii配置文件用法详解
2014/12/04 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
跟老齐学Python之Import 模块
2014/10/13 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
python游戏地图最短路径求解
2019/01/16 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
Python内置加密模块用法解析
2019/11/25 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
python 19个值得学习的编程技巧
2020/08/15 Python
.net开发工程师面试题
2014/02/25 面试题
软件测试常见笔试题
2012/02/04 面试题
中介公司区域经理岗位职责范本
2014/03/02 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
节水口号标语
2014/06/19 职场文书
见习报告格式范文
2014/11/08 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
运动会运动员赞词
2015/07/22 职场文书
golang特有程序结构入门教程
2021/06/02 Python
vue自定义右键菜单之全局实现
2022/04/09 Vue.js