js数组排序输出

短命女 2022-04-22 06:14 302阅读 0赞

项目要求,需要在前端做筛选排序,数据都是用ajax向服务器请求返回json数据
参考:https://blog.csdn.net/bobobocai/article/details/78028497

用到js 的sort()方法

定义和用法

sort() 方法用于对数组的元素进行排序。












参数 描述
sortby 可选。规定排序顺序。必须是函数。

返回值

对数组的引用。请注意,数组在原数组上进行排序,不生成副本。

说明

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

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

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

更多资料可以看:http://www.w3school.com.cn/jsref/jsref_sort.asp
下面贴代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>js数组排序输出</title>
  6. <script src="http://www.xxiaoyuan.top/jquery-1.9.1.js"></script>
  7. </head>
  8. <body>
  9. <div class="box">
  10. <ul>
  11. </ul>
  12. </div>
  13. </body>
  14. <script>
  15. $(function () {
  16. var Obj = [
  17. {
  18. id:20,
  19. name:"Back",
  20. age:26,
  21. sex:"男"
  22. },
  23. {
  24. id:21,
  25. name:"Jun",
  26. age:19,
  27. sex:"男"
  28. },
  29. {
  30. id:22,
  31. name:"Mark",
  32. age:36,
  33. sex:"女"
  34. },
  35. {
  36. id:23,
  37. name:"Tony",
  38. age:23,
  39. sex:"男"
  40. }
  41. ];
  42. //定义一个函数
  43. function compare(pro) {
  44. return function (obj1, obj2) {
  45. var val1 = obj1[pro];
  46. var val2 = obj2[pro];
  47. if (val1 < val2 ) { //正序
  48. return 1;
  49. } else if (val1 > val2 ) { //倒序
  50. return -1;
  51. } else {
  52. return 0;
  53. }
  54. }
  55. }
  56. //按年龄降序排序
  57. var pai = Obj.sort(compare("age"));
  58. console.log(pai);
  59. for(var i in pai){
  60. $(".box ul").append(`
  61. <li>
  62. 姓名:<span>${Obj[i].name}</span>
  63. 年龄:<span>${Obj[i].age}</span>
  64. 性别:<span>${Obj[i].sex}</span>
  65. </li>
  66. `);
  67. }
  68. });
  69. </script>
  70. </html>

上面代码可以直接复制用,自己控制台打印看看,

发表评论

表情:
评论列表 (有 0 条评论,302人围观)

还没有评论,来说两句吧...

相关阅读

    相关 JS数组排序

    一、冒泡排序 1、比较相邻的两个元素,如果前一个比后一个大,则交换位置。 2、比较完第一轮的时候,最后一个元素是最大的元素。 3、这时候最后一个元素是最大的,所以