欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js中 sort 方法的使用 和 底层实现原理

程序员文章站 2022-07-11 14:54:53
...

语法

arr.sort([compareFunction])

参数

JavaScript中 方括号 里的内容是可选的,可就是compareFunction这个参数是可填可不填的。
compareFunction 是一个函数,用来指定按某种顺序进行排列的函数。
如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。
例子如下:
在数组中的值为number类型时,结果并不是和正常排序一样,而是字符编码的出现顺序排列的。

var arr = [2, 6, 8, 8, 2, 10]
console.log(arr.sort())  //[ 10, 2, 2, 6, 8, 8 ]

compareFunction 函数中接受两个参数,并有返回值:

firstEl第一个用于比较的元素。
secondEl第二个用于比较的元素。
返回值排序后的数组。请注意,数组已原地排序,并且不进行复制(返回的是原数组,并不是创建的新数组)。

如果指明了 compareFunction,那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素:

  • 如果 a-b>0 ,看成是升序排列 ,从小到大排序;
  • 如果 a-b=0 , a 和 b 的相对位置不变。备注: ECMAScript 标准并不保证这一行为,而且也不是所 有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);
  • 如果a-b<0 ,看成是降序排列,从大到小排序 。

升序排列

var arr = [2, 6, 8, 8, 2, 10]
console.log(
  arr.sort(function (a, b) {
    return a - b
  })
)    //[ 2, 2, 6, 8, 8, 10 ]

降序排列

var arr = [2, 6, 8, 8, 2, 10]
console.log(
  arr.sort(function (a, b) {
    return b-a
  })   //[ 10, 8, 8, 6, 2, 2 ]

按照数组对象的某个属性排序:
那么在现实比较中,会有更复杂的比较存在,例如:在数组对象中按照某个元素的属性值排列,
在很大的一张表中,按照特定的属性要求排序,那么怎么实现呢?
直接上例子:

var data = [{ name: 'Zachary', age: 18 }, { name: 'Nicholas', age: 19 }]

function ComparisonFunction(typename) {
  // console.log(arguments.callee)
  return function (ob1, ob2) {
    var value1 = ob1[typename]
    var value2 = ob2[typename]
    // console.log(ob1)
    if (value1 < value2) {
      return -1
    } else if (value1 > value2) {
      return 1
    } else {
      return 0
    }
  }
}
// 按照姓名排序:[ { name: 'Nicholas', age: 19 }, { name: 'Zachary', age: 18 } ]
console.log(data.sort(ComparisonFunction('name')))  
// 按照年龄排序 [ { name: 'Zachary', age: 18 }, { name: 'Nicholas', age: 19 } ]
console.log(data.sort(ComparisonFunction('age')))

实现原理

在看完上述的代码,是否有一定的疑惑?为什么通过一个函数就能实现对数组的排序。那么代码是怎么做到的?
我们用原生的js来实现一下这些功能。

function sort(arr, fn) {
  for (var i = 0; i < arr.length - 1; i++) {
    for (var j = 0; j < arr.length - 1 - i; j++) {
      if (fn(arr[j], arr[j + 1]) > 0) {
        var temp = arr[j]
        arr[j] = arr[j + 1]
        arr[j + 1] = temp
      }
    }
  }
  return arr
}
var arr = [6, 64, 5, 1, 8]

console.log(
	// 形参,传递函数
  sort(arr, function (a, b) {
    return b - a 
  })
)  // [ 64, 8, 6, 5, 1 ]

compareFunction是如何通过两个参数进行比较的呢。
答案就是传递的a和b在函数内部进行了冒泡排序,通过两个相邻的元素进行比较,最终将比较完的数组在返回给方法。
欢迎指导错误!

相关标签: JavaScript高级教程