基于JavaScript实现Json数据根据某个字段进行排序

 更新时间:2015年11月24日 09:14:09   作者:similar  
这篇文章主要介绍了基于JavaScript实现Json数据根据某个字段进行排序的相关资料,需要的朋友可以参考下

一.首先给大家介绍js中内置的 sort() 方法

此方法默认是按字母顺序对数组中的元素进行排序的,说得更精确点,是按照字符编码的顺序进行排序。

看如下例子:

当数组中元素为 数字类型 时,排序结果与我们设想的完全不同,因为默认是按照字符编码的顺序进行排序的。

解决方案:sort() 方法接收一个可选参数(此参数必须是函数),我们可以自己定义排序规则,如下图

二.  对 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后原数组序列会发生变化!!

相关文章

  • JS中prototype的用法实例分析

    JS中prototype的用法实例分析

    这篇文章主要介绍了JS中prototype的用法,实例分析了JS中prototype的常见使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 微信小程序实现动态获取元素宽高的方法分析

    微信小程序实现动态获取元素宽高的方法分析

    这篇文章主要介绍了微信小程序实现动态获取元素宽高的方法,结合实例形式分析了微信小程序动态获取、设置元素宽高的相关操作技巧与注意事项,需要的朋友可以参考下
    2018-12-12
  • 微信小程序实现简单购物车功能

    微信小程序实现简单购物车功能

    这篇文章主要为大家详细介绍了微信小程序实现简单购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • js和jquery对dom节点的操作(创建/追加)

    js和jquery对dom节点的操作(创建/追加)

    本文详细介绍下js和jquery对dom节点的操作包括创建、追加等等,感兴趣的朋友可以参考下哈,希望对你有所帮助
    2013-04-04
  • JavaScript捕捉事件和阻止冒泡事件实例分析

    JavaScript捕捉事件和阻止冒泡事件实例分析

    这篇文章主要介绍了JavaScript捕捉事件和阻止冒泡事件,结合实例形式分析了冒泡的原理及javascript阻止冒泡的相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • JS实现字符串转驼峰格式的方法

    JS实现字符串转驼峰格式的方法

    这篇文章主要介绍了JS实现字符串转驼峰格式的方法,结合实例形式分析了传统的字符串遍历转换及正则替换两种操作技巧,需要的朋友可以参考下
    2016-12-12
  • BootStrap 动态表单效果

    BootStrap 动态表单效果

    这篇文章主要介绍了BootStrap 动态表单效果,实现代码分为js部分和html部分,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06
  • 详解bootstrap-fileinput文件上传控件的亲身实践

    详解bootstrap-fileinput文件上传控件的亲身实践

    这篇文章主要介绍了详解bootstrap-fileinput文件上传控件的亲身实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • Javascript Object对象类型使用详解

    Javascript Object对象类型使用详解

    面向对象编程(Object Oriented Programming)将现实世界中的复杂关系抽象成一个个对象,通过对象之间的分工合作对现实世界进行模拟,这篇文章主要介绍了Javascript Object对象类型使用详解
    2022-10-10
  • javascript 根据指定字符把字符串拆分为数组

    javascript 根据指定字符把字符串拆分为数组

    javascript 根据指定字符把字符串拆分为数组
    2009-05-05

最新评论