javascript数组方法-----sort(),reverse()

这三个方法都是和数组的顺序相关的

sort()方法

  • 语法
arr.sort([sortbFunction])

方法参数:可选。规定排序顺序。必须是函数。
  返回值为排好序的数组,改变原数组, 默认将数组中的所有元素都转换成字符串再做比较

  • 不传参数
      如果调用该方法时没有使用参数,默认将数组中的所有元素都转换成字符串再做比较,按照unicode字符编码的顺序进行排序。所以就会出现下面的问题
var arr = [1, 7, 12, 134]
console.log(arr.sort());  // (4) [1, 12, 134, 7]

它没有按照数字的大小进行排序,

数字 unicode编码
1 49
2 50
3 51

  对于1,12,134的比较方式就是先比较第一位“1”,三个数都一样,然后再比较第二位,“1”只有一位,所以最小,剩下两位数的第二位是“2”和“3”,前者的unicode值小于后者,所以12小于134大于1,所以排序就是1, 12, 134, 7了
查询unicode值可以到这里:http://www.mytju.com/classcode/tools/encode_utf8.asp

  • 传参,定制排序规则
      不传参的排序结果不是我们想要的,所以我们需要传入函数,控制它的排序方式,函数需要两个参数先来看看这两个参数分别是的啥
var arr = [3, 8, 4, 7]
arr.sort(function(a, b){
   console.log(a, b);
})

/**
  8, 3
  4, 8
  7, 4
*/

  从打印的结果来看,假设存在一个count=1,在数组调用sort方法时
参数a=arr[count], 参数b=arr[count --], count++,此时a=8, b=3, count=2,然后再执行a=arr[count], 参数b=arr[count --], count++,现在a=4, b=8, count=3,以此类推,直到count = arr.length时停止


Snipaste_2021-04-19_16-29-36.png
  • 如何实现排序要看回调函数的返回值了
    1.返回值为负数,那么a就会排在b前面
    2.返回值为0,那不进行排序
    3.返回值为正数,那么b就会排在a前面
var arr = [3, 8, 4, 7]
var res = arr.sort(function(a, b){
  if(a > b){
    return 1
  }else{
    return -1
  }
})
console.log(res); // (4) [3, 4, 7, 8]

  上面的例子实现了升序排列,明白了返回值的作用,就不难发现,实现降序还是升序主要在a和b的值的大小关系,以及返回正数还是负数,将上面的例子变为降序只需要将a > b改成a < b或者将返回值变成-1
回调函数优化
  上面的程序太冗杂了,先拿第一组数据a=8,b=3,因为8 > 3, 所以返回值为正数,所以3排在8前面,此时arr = [3, 8, 4, 7],然后方法会对第二组数据比较a = 4, b = 8, 因为4<8,所以返回负数,4就排在8前面,此时arr =[3, 4, 8, 7],最后方法继续比较后面数据a=8, b=7,7<8返回负数,7排在8前面,所以最终结果就是 [3, 4, 7, 8]
  不难发现,return 1是因为a > b,也就是a - b > 0; return -1是因为a < b, 也就是a - b < 0;那么回调函数就可以写成

arr.sort(function(a, b){
  return a - b
})

返回a - b就能实现升序,返回b - a自然就是降序了,这个写的太啰嗦了,不知你们明白了吗?

  • 使用场景
    1.纯数字数组排序
    2.按照对象的属性排序
      作为前端操作最多的就是数据,纯数字数组排序毕竟是少的,那么如何根据对象数组的某个属性进行排序呢
var arrObj = [
  {
    "name": "张三",
    age: 23
  },{
    "name": "李四",
    age: 21
  },{
    "name": "王五",
    age: 27
  }
]
const res = arrObj.sort(function(a, b){
  return a.age - b.age
})
console.log(res);
Snipaste_2021-04-19_17-32-40.png

reverse()方法

reverse方法是将原数组的元素顺序颠倒过来,返回值就是颠倒顺序后的新数组,并且修改原数组

var arr = [3, 7, 8, 0]
var res = arr.reverse()
console.log(arr);  // (4) [0, 8, 7, 3]
console.log(res);  // (4) [0, 8, 7, 3]

你可能感兴趣的:(javascript数组方法-----sort(),reverse())