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

语法

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在函数内部进行了冒泡排序,通过两个相邻的元素进行比较,最终将比较完的数组在返回给方法。
在查看js源码后,V8 引擎 sort 函数只给出了两种排序 InsertionSort 和 QuickSort,数量小于10的数组使用 InsertionSort,比10大的数组则使用 QuickSort。
欢迎指导错误!

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值