基于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 09 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
js读取cookie方法总结
Oct 31 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
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
Oracle 常见问题解答
2006/10/09 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
详解python进行mp3格式判断
2016/12/23 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
Python实现时间序列可视化的方法
2019/08/06 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
python生成特定分布数的实例
2019/12/05 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
生物化工专业个人自荐信
2013/09/26 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
家长意见书
2015/06/04 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
圣诞晚会主持词
2015/07/01 职场文书
如何写新闻稿
2015/07/18 职场文书
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js