zoukankan      html  css  js  c++  java
  • sort排序在苹果与安卓端不一致问题

    一、问题

    在使用sort排序时,若遇到相同数据或非数值数据时,会出现苹果手机与安卓手机排序不一致问题

    var arr = [{
      "id": "52",
      "return_value": "--"
      },{
      "id": "54",
      "return_value": "100,000.00%"
      },{
       "id": "66",
       "return_value": "1000%"
      },{
        "id": "78",
        "return_value": "--"
      }];
    function sortBy(arr, order, order_by){
        if (order == 'asc' || order == 'desc') {
          arr.sort((a, b) => {
            let x = a[order_by];
            let y = b[order_by];
            if (x == '--') {
              return -1
            }
            if (y == '--') {
              return 1
            }
            if ( !isNaN(parseFloat(x)) && !isNaN(parseFloat(y)) ) {
              x = parseFloat(x);
              y = parseFloat(y);

              if (x > y) {
                return 1;
              }
              if (x < y) {
                return -1;
              }
              return 0;
            }

            x = x.toString();
            y = y.toString();
            return x.localeCompare(y, 'zh-CN');
          })

          if ('desc' == order) {
            arr.reverse();
          }
          return arr;
        }else{
          return arr;
        }
    }
      var sortArr = sort(arr, "desc", "return_value");
      sortArr.forEach(function (item, i) {
        var div = document.createElement("div");
        div.innerHTML = item.id + ":"  + item.return_value;
        document.body.appendChild(div);
      });
     

    二、原因

    sort排序原理:

    a:"因为排序依据是相同的就是没有顺序,没有顺序就是乱序,这种结果是正确的";

    b:"既然排序依据是相同的那就按照原始顺序输出"(这应该是大多数据语言里常规的做法)

    经手机测试,两种手机排序不一致是因为苹果手机使用了原理b进行排序,而安卓手机使用了原理a进行排序。

    三、解决

    方法1:根据排序前的索引进行排序。先循环给每个元素增加一个属性,用来保存它目前的位置,然后再排序中遇到等序时取索引进行排序。参考网址:https://blog.csdn.net/qq_18145031/article/details/82500177

    方法2:根据数组中的自增字段进行排序

    function sort(arr, order, order_by) {
      if (order == 'asc' || order == 'desc') {
        arr.sort(function (a, b) {
          let x = a[order_by];
          let y = b[order_by];
          if (x == '--' && y != '--') {
            return 1;
          }
          if (x != '--' && y == '--') {
            return -1;
          }
          x = x.toString().replace(/,/g, '');
          y = y.toString().replace(/,/g, '');
          
          if (order == 'asc') { // 升序
            if (x == '--' && y == '--') {
              return parseInt(a.id) - parseInt(b.id)
            } else {
              if (!isNaN(parseFloat(x)) && !isNaN(parseFloat(y))) {
                return parseFloat(x) - parseFloat(y);
              }
              return x.localeCompare(y, 'zh-CN');
            }
          } else { // 降序
            if (x == '--' && y == '--') {
              return parseInt(b.id) - parseInt(a.id)
            } else {
              if (!isNaN(parseFloat(x)) && !isNaN(parseFloat(y))) {
                return parseFloat(y) - parseFloat(x);
              }
              return y.localeCompare(x, 'zh-CN');
            }
          }
        });
        return arr;
      } else {
        return arr;
      }
    }
    var sortArr = sort(arr, "desc", "return_value");
    sortArr.forEach(function (item, i) {
      var div = document.createElement("div");
      div.innerHTML = item.id + ":" + item.name + "--" + item.return_value;
      document.body.appendChild(div);
    });
  • 相关阅读:
    实现粘贴WORD图片的在线编辑器
    js实现大文件分片上传的工具
    Nginx实现大文件分片上传的方法
    百度WebUploader实现大文件分片上传的方法
    ckeditor粘贴上传图片
    umediter实现粘贴word图片
    java.net.Socket
    matlab创建对角型矩阵
    QtList
    matlab矩阵行最简形
  • 原文地址:https://www.cnblogs.com/xsnow/p/10646811.html
Copyright © 2011-2022 走看看