JS实现json对象数组按对象属性排序操作示例

 更新时间:2018年05月18日 14:38:20   作者:Jason齐齐  
这篇文章主要介绍了JS实现json对象数组按对象属性排序操作,涉及javascript使用sort方法针对json数组的遍历与排序相关操作实现技巧,需要的朋友可以参考下

本文实例讲述了JS实现json对象数组按对象属性排序操作。分享给大家供大家参考,具体如下:

在实际工作经常会出现这样一个问题:后台返回一个数组中有i个json数据,需要我们根据json中某一项进行数组的排序。

例如返回的数据结构大概是这样:

{
  result:[
   {id:1,name:'中国银行'},
   {id:3,name:'北京银行'},
   {id:2,name:'河北银行'},
   {id:10,name:'保定银行'},
   {id:7,name:'涞水银行'}
  ]
}

现在我们根据业务需要,要根据id的大小进行排序,按照id小的json到id大的json顺序重新排列数组的顺序

在js中添加排序的方法:

这里使用JavaScript sort() 方法,首先解释下这个sort的方法

语法:arrayObject.sort(sortby)

sortby:可选,规定排序顺序。必须是函数。

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。

下面开始使用sort(sortby) 来进行这个排序,并打印到控制台:

function sortId(a,b){
  return a.id-b.id
}
result.sort(sortId);
console.log(result);

完整测试示例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net json数组排序</title>
</head>
<body>
<script>
var result = [
   {id:1,name:'中国银行'},
   {id:3,name:'北京银行'},
   {id:2,name:'河北银行'},
   {id:10,name:'保定银行'},
   {id:7,name:'涞水银行'}
  ]
function sortId(a,b){
  return a.id-b.id
}
result.sort(sortId);
console.log(result);
</script>
</body>
</html>

然后查看控制台,排序成功:

PS:关于json操作,这里再为大家推荐几款比较实用的json在线工具供大家参考使用:

在线JSON代码检验、检验、美化、格式化工具:
http://tools.jb51.net/code/json

JSON在线格式化工具:
http://tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具:
http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具:
http://tools.jb51.net/code/json_yasuo_trans

更多关于JavaScript相关内容可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • 微信小程序商品详情页的底部弹出框效果

    微信小程序商品详情页的底部弹出框效果

    这篇文章主要为大家详细介绍了微信小程序商品详情页的底部弹出框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • Bootstrap CSS使用方法

    Bootstrap CSS使用方法

    这篇文章主要为大家详细介绍了Bootstrap中CSS的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • js中的preventDefault与stopPropagation详解

    js中的preventDefault与stopPropagation详解

    本篇文章主要是对js中的preventDefault与stopPropagation进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • javascript删除字符串最后一个字符

    javascript删除字符串最后一个字符

    需求是一个字符串,想删除这个字符串最后一个字符,比如“1,2,3,4,5,”,删除最后一个“,”用javascript怎么实现?下面给出三种方法
    2014-01-01
  • 使用JavaScript开发IE浏览器本地插件实例

    使用JavaScript开发IE浏览器本地插件实例

    这篇文章主要介绍了使用JavaScript开发IE浏览器本地插件实例,本文讲解使用JS+注册表的方式开发一个IE浏览器本地插件,需要的朋友可以参考下
    2015-02-02
  • js实现页面跳转的几种方法小结

    js实现页面跳转的几种方法小结

    下面小编就为大家带来一篇js实现页面跳转的几种方法小结。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
    2016-05-05
  • JavaScript中的异常捕捉介绍

    JavaScript中的异常捕捉介绍

    这篇文章主要介绍了JavaScript中的异常捕捉介绍,本文讲解了throw语句抛出异常,try/catch/finally语句捕捉异常,需要的朋友可以参考下
    2014-12-12
  • Typescript3.9 常用新特性一览(推荐)

    Typescript3.9 常用新特性一览(推荐)

    这篇文章主要介绍了Typescript3.9 常用新特性一览,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解

    js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解

    这篇文章主要给大家介绍了关于Javascript中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性的相关资料,文中介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-03-03
  • JS如何将UTC格式时间转本地格式

    JS如何将UTC格式时间转本地格式

    UTC格式时间想必大家并不陌生,那么怎么可以将其转换为本地格式呢?其实很简单,下面的方法会帮助大家实现这一想法
    2013-09-09

最新评论