Array.prototype.sort()

268 阅读2分钟

Array.prototype.sort() 用法

sort()方法是按照字典顺序(ASCII码)对元素进行排序的,因此它假定元素都是字符串,即使元素是数字类型,也被认为是字符串类型。

为了让sort()方法也能排序数字类型的元素,可以在调用时传入一个大小比较函数。

默认按照字典顺序排序

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

传入一个比较函数

如果指明了 compareFunction(a, b) ,那么数组会按照调用该函数的返回值排序。即 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) 需要是个纯函数。

    var numbers = [4, 2, 5, 1, 3];
    // 升序
    numbers.sort((a, b) => a - b);
    // 降序
    numbers.sort((a, b) => b - a);
    

对象可以按照某个属性排序:

var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic' },
  { name: 'Zeros', value: 37 }
];

// sort by value
items.sort(function (a, b) {
  return (a.value - b.value)
});

// sort by name
items.sort(function(a, b) {
  if (a < b) {
    return -1;
  }
  if (a > b) {
    return 1;
  }
  return 0;
});

对非 ASCII 字符排序

当排序非 ASCII 字符的字符串(如包含类似 e, é, è, a, ä 等字符的字符串)。一些非英语语言的字符串需要使用 String.localeCompare。这个函数可以将函数排序到正确的顺序。

localeCompare()  方法返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。

var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
items.sort(function (a, b) {
  return a.localeCompare(b);
});

使用映射改善排序

compareFunction 可能需要对元素做多次映射以实现排序,尤其当 compareFunction 较为复杂,且元素较多的时候,某些 compareFunction 可能会导致很高的负载。使用 map 辅助排序将会是一个好主意。基本思想是首先将数组中的每个元素比较的实际值取出来,排序后再将数组恢复。

  • 比如按照末尾数字大小排序:
const arr = [23, 12, 345, 89, 40];

// 对需要排序的数字和位置的临时存储
const mapped = arr.map((el, i) => ({ index: i, value: el % 10}));

// 模拟复杂的排序过程
mapped.sort((a, b) => a.value - b.value);

// 根据索引得到排序的结果
const result = mapped.map((el) => arr[el.index])
console.log(result);

上面的代码只是模拟使用映射的过程

  • 如果要按照末尾数字大小排序,可以更简单
const sort = (arr) => { arr.sort((a, b) => a % 10 - b % 10) }