基于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 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
js实现密码强度检验
Jan 15 Javascript
JS常用知识点整理
Jan 21 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
Vue数据双向绑定的深入探究
Nov 27 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
PHP中调用JAVA
2006/10/09 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
大学生村官工作感言
2014/01/10 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
安全生产年活动总结
2014/08/29 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
匿名检举信范文
2015/03/02 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏