toFrankie / blog

种一棵树,最好的时间是十年前。其次,是现在。
20 stars 1 forks source link

Array.prototype.sort 你真的掌握了吗? #202

Open toFrankie opened 1 year ago

toFrankie commented 1 year ago

在项目开发当中,对数组的排序肯定少不了,类似的升序排序肯定都见过。

const array = [2, 7, 4, 9, 3]
array.sort((a, b) => a - b)
// 升序排列:[2, 3, 4, 7, 9]

可你又追究过 sort() 里面是怎么实现的吗?

sort() 方法用 原地算法 对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后会按照转换为的字符串的每个字符的 Unicode 位点进行排序。

语法:array.sort([compareFunction]),参数可选。

净看概率,可能会有点难理解,然后下面结合代码理解。

一、没有参数

// 1. 没问题
const arr1 = [5, 3, 8, 2, 0, -3]
arr1.sort() // output: [-3, 0, 2, 3, 5, 8]

// 2. 也没问题
const arr2 = ['m', 'c', 'h', 'd']
arr2.sort() // output: ["c", "d", "h", "m"]

// 3. 似乎跟预想的不一样啊!小朋友你是否有很多问号 ❓❓❓
const arr3 = [-2, 27, 0, -5, 4]
arr3.sort() // output: [-2, -5, 0, 27, 4]

为什么 arr3 进行排序之后,返回的为什么不是 [-2, -5, 0, 4, 27] 呢?

结合概念来看,其实就没那么难理解了。首先我们没传参数,即采用默认排序方式,它会将每一个元素转化为字符串,接着按照字符串的每个字符的 Unicode 位置进行排序。

所以,在比较 274 时,它会先比较 24 ,发现 2 的 Unicode 顺序要比 4 靠前,所以最终的结果是 274 之前。同样的道理,负数在前是因为 - 的 Unicode 顺序更靠前。(附 ASCII 对照表

二、带参,且必须是函数

其实默认的排序方式在实际的应用中,很多不能满足我们的排序要求,所以 sort 也提供了一个参数 comparFunction,来满足我们的各种需求。

array.sort(compareFunction(a, b))

指明了 compareFunction,那么数组会按照该函数的返回值排序,即 ab 是两个将要被比较的元素

三、几种最常见的排序方式

  1. 升序、降序排序
// 按照上面的规则,来写个升序排序,那就 so easy 了,对吧
const array = [-2, 27, 0, -5, -4]
array.sort((a, b) => {
  if (a > b) {
    return 1
  } else if (a < b) {
    return -1
  } else {
    return 0
  }
})
console.log(array) // [-5, -2, 0, 4, 27]
// 简写
// array.sort((a, b) => a - b)

// 降序也是同理
// array.sort((a, b) => b - a)
  1. 根据对象某属性排序
const classroom = [
  {
    name: 'Frankie',
    age: 18
  },
  {
    name: 'Mandy',
    age: 16
  },
  {
    name: 'John',
    age: 22
  },
  {
    name: 'Ada',
    age: 20
  }
]

classroom.sort((a, b) => a.age - b.age)
console.log(classroom)
// [{"name": "Mandy", "age": 16}, {"name": "Frankie", "age": 18}, {"name": "Ada", "age": 20}, {"name": "John", "age": 22}]
  1. 根据字母 A-Z 排序
const array = ['fifa', 'nba', 'cbb', 'dnfa', 'cba', 'sos', 'dnf']
array.sort((a, b) => {
  let length = Math.max.apply(null, [a.length, b.length])
  for (let i = 0; i < length; i++) {
    if (a[i] === undefined) {
      return -1
    } else if (b[i] === undefined) {
      return 1
    } else if (a.charCodeAt(i) < b.charCodeAt(i)) {
      return -1
    } else if (a.charCodeAt(i) > b.charCodeAt(i)) {
      return 1
    }
  }
  return 0
})
console.log(array)
// ["cba", "cbb", "dnf", "dnfa", "fifa", "nba", "sos"]

The end.