基于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 相关文章推荐
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 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
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
用python 制作图片转pdf工具
2015/01/30 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
django最快程序开发流程详解
2019/07/19 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
体育教育专业自荐信范文
2013/12/20 职场文书
技能竞赛活动方案
2014/02/21 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
2014年残联工作总结
2014/11/21 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
个人催款函范文
2015/06/23 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js