基于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 AutoScroller 函数类
May 29 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 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数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
php实现微信模板消息推送
2018/03/30 PHP
JQuery live函数
2010/12/24 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
婚礼答谢礼品
2015/01/20 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
导师鉴定意见
2015/06/05 职场文书
导游词之桂林
2019/08/20 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
ubuntu下常用apt命令介绍
2022/06/05 Servers