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的解释,说实话我没看懂。
在学习之后,有了如下结论:
-
数字排序中,升序则把compareFunction设为
function sortNumber(a,b) { return a - b }
-
数字排序中,降序则把compareFunction设为
function sortNumber(a,b) { return b - a }
-
若要把数组内的对象的某个属性对数组进行排序,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/…
如有错误,欢迎指正。