基于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实现flash8类似的连接效果
May 03 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
js实现纯前端压缩图片
Nov 16 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 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
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
简单的JS多重继承示例
2008/03/13 Javascript
JS模板实现方法
2013/04/03 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
详解Vue之事件处理
2020/07/10 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
详解python中*号的用法
2019/10/21 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
Delphi软件工程师试题
2013/01/29 面试题
内科护士实习自我鉴定
2013/10/17 职场文书
家电业务员岗位职责
2014/03/10 职场文书
PHP RabbitMQ消息列队
2022/05/11 PHP