这三个方法都是和数组的顺序相关的
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时停止
- 如何实现排序要看回调函数的返回值了
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);
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]