8分钟理解-JavaScript-中的sort排序

722 阅读3分钟

8分钟理解-JavaScript-中的sort排序

主要参考 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:第二个用于比较的元素。

比较函数

比较函数和内联比较函数本质一样,只不过一个将函数名作为回调,一个将函数定义(声明)作为回调。

// 比较函数
sort(compareFn) 
// 内联比较函数
sort(function compareFn(a, b) { /* … */ })
compareFn(a, b) 返回值排序顺序
> 0a 在 b 后
< 0a 在 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的大小顺序表示需要处理的情况,处理情况相反的情况就是表示该排序的功能“。

参考