因为数据类型导致的排序错乱问题

前言

今天在码代码的时候遇到一个图片顺序错乱的bug，原因是后端给到的数据顺序是错乱的，所以前端需要根据数据的index值进行降序排序。数据结构大致如下：

  {
    "data": [
      {
        "description": "",
        "index": "1"
      },
      {
        "description": "",
        "index": "2"
      },
      {
        "description": "",
        "index": "5"
      },
      {
        "description": "",
        "index": "3"
      },
      {
        "description": "",
        "index": "4"
      },
      {
        "description": "",
        "index": "7"
      },
      {
        "description": "",
        "index": "6"
      },
      {
        "description": "",
        "index": "9"
      },
      {
        "description": "",
        "index": "8"
      },
      {
        "description": "",
        "index": "10"
      }
    ]
  }

这个数据结构很简单啊，我们只需要按照index进行顺序排序就好了。

很快啊，三两下简单写了个冒泡排序，并且本地测试也都通过了，没问题赶紧提了代码。

然鹅，代码上线以后图片顺序还是错的...无语😭

先分析一下错误原因：

function bubbleSort(arr) {
  var len = arr.length;
  for (var i = 0; i < len; i++) {
    for (var j = 0; j < len - 1 - i; j++) {
      if (arr[j].index > arr[j + 1].index) { // <--就是这里出错了，没有考虑index的类型
        var temp = arr[j + 1];
        arr[j + 1] = arr[j];
        arr[j] = temp;
      }
    }
  }
  return arr;
}

问题就在于用于排序的index是String类型，而且本地测试的时候没有考虑到图片数量大于10的情况。在index小于10的时候，代码中的判断可以正常执行，但当index大于10的时候，字符串10如果直接比较会被拆分成1和0，然后分别和另一边比较。这时代码判断就有问题了，index为10会被排到index为2的前面。

不过，解决办法也很简单，将进行比较的值转成Number类型即可：

function bubbleSort(arr) {
  var len = arr.length;
  for (var i = 0; i < len; i++) {
    for (var j = 0; j < len - 1 - i; j++) {
-      if (arr[j].index > arr[j + 1].index) {
+      if (parseInt(arr[j].index) > parseInt(arr[j + 1].index)) {
        var temp = arr[j + 1];
        arr[j + 1] = arr[j];
        arr[j] = temp;
      }
    }
  }
  return arr;
}

所以写代码的时候还是要多细心才行呀...

扩展

sort()方法

使用sort()方法可以对数组对象进行排序可以这么写：

// 方法1
function sortTo(arr) {
  return arr.sort((a, b) => {
    return a['index'] - b['index'];
  })
}

sortTo(arr);

冒泡排序

function bubbleSort(arr) {
  var len = arr.length;
  for (var i = 0; i < len; i++) {
    for (var j = 0; j < len - 1 - i; j++) {
      if ((arr[j].index) > (arr[j + 1].index)) {        //相邻元素两两对比
        var temp = arr[j + 1];        //元素交换
        arr[j + 1] = arr[j];
        arr[j] = temp;
      }
    }
  }
  return arr;
}

选择排序

function selectionSort(arr) {
    var len = arr.length;
    var minIndex, temp;
    for (var i = 0; i < len - 1; i++) {
        minIndex = i;
        for (var j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) {     //寻找最小的数
                minIndex = j;                 //将最小数的索引保存
            }
        }
        temp = arr[i];
        arr[i] = arr[minIndex];
        arr[minIndex] = temp;
    }
    return arr;
}

快速排序

function quickSort(arr, left, right) {
    var len = arr.length,
        partitionIndex,
        left = typeof left != 'number' ? 0 : left,
        right = typeof right != 'number' ? len - 1 : right;

    if (left < right) {
        partitionIndex = partition(arr, left, right);
        quickSort(arr, left, partitionIndex-1);
        quickSort(arr, partitionIndex+1, right);
    }
    return arr;
}

function partition(arr, left ,right) {     //分区操作
    var pivot = left,                      //设定基准值（pivot）
        index = pivot + 1;
    for (var i = index; i <= right; i++) {
        if (arr[i] < arr[pivot]) {
            swap(arr, i, index);
            index++;
        }        
    }
    swap(arr, pivot, index - 1);
    return index-1;
}

function swap(arr, i, j) {
    var temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
}

精简版：

function quickSort(array) {
  if (array.length < 2) return array; // 递归出口
  let pivot = array[array.length - 1] // 取分界点
  // 取分界点左边的数组（不包括最后一位，最后一位是分界点）
  let left = array.filter((v, i) => v <= pivot && i != array.length - 1) 
  let right = array.filter(v => v > pivot) // 取分界点右边的数组
  return [...quickSort(left), pivot, ...quickSort(right)] // 递归排序，合并结果
}

参考文章：js十大排序算法 (opens new window)

手写算法并记住它：快速排序（5行代码简单版） (opens new window)