关于js中的Array.sort()的使用

1,419 阅读3分钟

1、基本概念

Array.prototype.sort()用于对数组进行排序,并返回数组。

arr.sort([compareFunction])

compareFunction,即比较的方法,如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。即默认排序顺序是将元素转化成字符串之后以unicode为准惊醒排序。

2、具体使用

我们先看两个例子,是没有参数的sort()

//排序1
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

//排序2
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

此处排序1字符串排序即按unicode编码顺序排序,默认升序,所以D<F<J<M。而在排序2中,没有出现预期的数字从小到大的排序效果。

当数字按由小到大排序时,9 出现在 80 之前,但因为(没有指明 compareFunction),比较的数字会先被转换为字符串,按照undicode一位一位比较,所以在Unicode顺序上 "80" 要比 "9" 要靠前。而如果第一位相同的话,则比较下一位unicode,如10会比11靠前。

所以,我们需要给sort()添加参数compareFunction来达到给数组排序的效果。

function conpareFunction(a,b){
    return a - b
}

如果指明了 compareFunction ,那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素:
如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变。备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);
如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。
compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。

以上一段来自mdn对compareFunction以及内部参数a,b的解释,说实话我没看懂。

在学习之后,有了如下结论:

  1. 数字排序中,升序则把compareFunction设为

    function sortNumber(a,b)    {      return a - b    }
    
  2. 数字排序中,降序则把compareFunction设为

    function sortNumber(a,b)    {      return b - a    }
    
  3. 若要把数组内的对象的某个属性对数组进行排序,compareFunction需要返回一个函数,而此时的a和b就是对象的具体属性(此处为升序)。

    var arr = [{      name:'小明',      age:9    },{      name:'小黄',      age:21    },{      name:'小蓝',      age:7    },{      name:'小张',      age:84    }]    function compareAge(prop){      return function(a,b){        var value1 = a[prop];        var value2 = b[prop];        return value1-value2      }    }
    

至于原理,在查阅了资料以及动手敲试之后,我了解到,每种浏览器在进行sort()排序时用的算法都是不同的,所以结论更重要。比如Chrome和FireFox。

 var arr = new Array(6)    arr[0] = "10"    arr[1] = "5"    arr[2] = "40"    arr[3] = "25"    arr[4] = "1000"    arr[5] = "1"    function sortNumber(a,b)    {      console.log(a,b);    }    document.write(arr + "<br />")    document.write(arr.sort(sortNumber))

这一段代码向我们展示compareFunction在运作过程中具体是什么值,在两种浏览器中分别有下面结果:

可以看到,在不同的浏览器中a和b的结果是不同的。

 var arr = new Array(6)    arr[0] = "10"    arr[1] = "5"    arr[2] = "40"    arr[3] = "25"    arr[4] = "1000"    arr[5] = "1"    function sortNumber(a,b)    {      console.log(a,b);      return a - b    }    document.write(arr + "<br />")    document.write(arr.sort(sortNumber))

之后我们在compareFunction内部加入return a-b,即使之完成升序排序,可以看到具体排序的过程也是不一样的。

所以,没有必要纠结于具体的排序算法,因为各大浏览器都不同。

但是排序算法的代码结果都在各大浏览器上都一样。

参考:

developer.mozilla.org/zh-CN/docs/…

www.cnblogs.com/saifei/p/90…

如有错误,欢迎指正。