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);

});