基于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 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
JQuery select标签操作代码段
May 16 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
原生js实现验证码功能
Mar 16 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
PHP微信支付实例解析
2016/07/22 PHP
use jscript List Installed Software
2007/06/11 Javascript
javascript各种复制代码收集
2008/09/20 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
js获取内联样式的方法
2015/01/27 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
Python字符串中查找子串小技巧
2015/04/10 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
Python中的推导式使用详解
2015/06/03 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
python多线程实现TCP服务端
2019/09/03 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
2014年安全保卫工作总结
2014/11/13 职场文书
公务员年度个人总结
2015/02/12 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python