基于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 相关文章推荐
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
JavaScript实现班级抽签小程序
May 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 Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
JavaScript 密码强度判断代码
2009/09/05 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Python远程linux执行命令实现
2020/11/11 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
仓库组长岗位职责
2014/01/29 职场文书
个人求职信范文分享
2014/01/31 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
营销与策划专业求职信
2014/06/20 职场文书
整改报告格式
2014/11/06 职场文书
观看建国大业观后感
2015/06/01 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
Python中tqdm的使用和例子
2022/09/23 Python