基于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常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
Bootstrap插件全集
Jul 18 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
详解http访问解析流程原理
Oct 18 Javascript
javascript实现小型区块链功能
Apr 03 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
推荐25款php中非常有用的类库
2014/09/29 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
python版大富翁源代码分享
2018/11/19 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Python学习之time模块的基本使用
2021/01/17 Python
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
推荐信怎么写
2014/05/09 职场文书
慈善晚会策划方案
2014/05/14 职场文书
食品安全汇报材料
2014/08/18 职场文书
房屋授权委托书范本
2014/10/07 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
学校通报表扬范文
2015/05/04 职场文书
社区活动总结范文
2015/05/07 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
班主任寄语2016
2015/12/04 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL