8分钟理解-JavaScript-中的sort排序
主要参考 MDN 的Array.prototype.sort() - JavaScript | MDN
主要参考 MDN 的Array.prototype.sort() - JavaScript | MDN
sort排序默认是针对数组中的元素进行升序排序。sort()使用分两种情况
- 无函数
- 有函数
无函数
如果sort()方法中无函数，则排序是在将数组中的元素转换为字符串,然后比较元素字符串UTF-16 代码单元值序列（元素按照转换为的字符串的各个字符的 Unicode 位点进行排序。）
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
Output
[ 1, 100000, 21, 30, 4 ]
注意，这里不是 按照
1,4,21,30,100000顺序排列是因为不是按照number类型排序而是按照元素的字符串形式排序。所以是按照 1,1,2,3,4的顺序，如果第一位相同则比较第二位，以此类推。
所以如果是1100,120,则排序结果不是按照数字排列的120 ,1100而是按照字符串排列 。第一位都是 1,看第二位，由于1100第二位是1,而 120第二位是2,1<2,所以 1100 应该在120前面。
有函数
如果 sort()中有函数，则按照函数形式不同，又分为几种情况
- 箭头函数
- 比较函数
- 内联比较函数
箭头函数
// 格式
sort((a, b) => { /* … */ } )
// 例子
const arr = [1,3,2,5,6,4]
arr.sort((a,b)=>{
return a-b
})
console.log("@",arr)
Output
@ [ 1, 2, 3, 4, 5, 6 ]
a：第一个用于比较的元素。b：第二个用于比较的元素。
关于 a,b 顺序决定排序方式的规则
a-b：则表示升序（如上述代码例子）。a-b > 0,则返回正数，a 在b后，保持升序；若a-b < 0，则返回负数，不改变顺序（结果为正，则升序）。这样保证排序方式是升序。b-a：则表示降序。b-a < 0, 则返回负数，b在a后，保持降序； 若b-a > 0,则返回正数，不改变顺序（结果为负，则降序）。这样保证排序方式是降序。
关于为什么升序是 a-b ,而降序是 b-a 的理解
a-b：希望前面的参数a是<后面的参数 b 。如果满足期望，则不改变顺序，否则调换顺序。b-a： 希望前面的参数a是>后面的参数 b。同上。
更加简化的说，排序方式是升序还是降序由 a,b 的大小顺序相反的顺序 决定，默认 a 在前，b在后。
- 保证升序，只需要a,b呈现降序（a大,b小）的时候，将a,b交换即可保证升序。而a,b呈现降序意味着
a-b > 0，所以升序看a-b。【处理降序的情况】 - 保证降序，只需要a,b呈现升序（a小,b大）的时候，将a,b交换即可保证降序。而a,b呈现升序意味着
a-b < 0（即 b-a > 0） ，所以降序看b-a。 【处理升序的情况】
比较函数
比较函数和内联比较函数本质一样，只不过一个将函数名作为回调，一个将函数定义（声明）作为回调。
// 比较函数
sort(compareFn)
// 内联比较函数
sort(function compareFn(a, b) { /* … */ })
| compareFn(a, b) 返回值 | 排序顺序 |
|---|---|
| > 0 | a 在 b 后 |
| < 0 | a 在 b 前 |
| === 0 | 保持 a 和 b 的顺序 |
比较函数格式如下：
function compareFn(a, b) {
if (在某些排序规则中，a 小于 b) {
return -1;
}
if (在这一排序规则下，a 大于 b) {
return 1;
}
// a 一定等于 b
return 0;
}
不难看出上述定义的对比函数的功能是用来升序的。可以修改逻辑改为降序的功能。
内联比较函数
略~~~
更多例子
排序对象中的属性
const items = [
{ name: 'Edward', value: 21 },
{ name: 'Sharpe', value: 37 },
{ name: 'And', value: 45 },
{ name: 'The', value: -12 },
{ name: 'Magnetic', value: 13 },
{ name: 'Zeros', value: 37 }
];
// sort by value
items.sort((a, b) => a.value - b.value);
console.log("@sort by value in ascend",items)
// sort by name
items.sort((a, b) => {
const nameA = a.name.toUpperCase(); // ignore upper and lowercase
const nameB = b.name.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
return 0;
});
console.log("@sort by name in ascend",items)
Output
@sort by value in ascend [
{ name: 'The', value: -12 },
{ name: 'Magnetic', value: 13 },
{ name: 'Edward', value: 21 },
{ name: 'Sharpe', value: 37 },
{ name: 'Zeros', value: 37 },
{ name: 'And', value: 45 }
]
@sort by name in ascend [
{ name: 'And', value: 45 },
{ name: 'Edward', value: 21 },
{ name: 'Magnetic', value: 13 },
{ name: 'Sharpe', value: 37 },
{ name: 'The', value: -12 },
判断排序功能是升序，因为 a-b > 0 的情况下，a,b大小顺序是降序，说明处理的情况是降序，功能与处理情况相反是升序。
总结
- 在参数是 a,b 顺序的情况下，无论是箭头函数还是自定义对比函数，判断（设计）升序或降序，只需要判断
a-b的情况，如果>0，则是升序，否则降序。 - 其中对于箭头函数有一个判断规则：”在参数是 a,b 顺序的情况下，函数体的结果
> 0, a,b的大小顺序表示需要处理的情况，处理情况相反的情况就是表示该排序的功能“。
参考
- Array.prototype.sort() - JavaScript | MDN
- 元素按照转换为的字符串的各个字符的 Unicode 位点进行排序。
- sort - 廖雪峰的官方网站