这是我参与8月更文挑战的第5天,活动详情查看:8月更文挑战
前言
接上一篇文章,我们来详细解读js数组的内容,本篇幅讲述“reverse和sort两个api”,上一篇传送门
reverse()
作用:如其名,就是反转数组,返回结果为反转后的数组(是在原数组的基础上反转)。
语法:反转后的数组 = 数组.reverse();
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
var result = arr.reverse();
console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));
//结果
arr =["f","e","d","c","b","a"]
result =["f","e","d","c","b","a"]
sort()方法
sort我们可能都不陌生,和很多语言里面一样,就是排序的一个api,大家大同小异,只是有些地方不一样,我来讲讲。
sort()
:对数组的元素进行从小到大来排序(原数组基础上,默认升序)。
无参时(按字典序)
如果在使用 sort() 方法时不带参,则默认按照Unicode 编码
,升序排序。
字符串sort
let arr1 = ['e', 'b', 'd', 'a', 'f', 'c'];
let result = arr1.sort(); // 将数组 arr1 进行排序
console.log('arr1 =' + JSON.stringify(arr1));
console.log('result =' + JSON.stringify(result));
//结果
arr1 =["a","b","c","d","e","f"]
result =["a","b","c","d","e","f"]
数字sort
let arr2 = [5, 2, 11, 3, 4, 1];
let result = arr2.sort(); // 将数组 arr2 进行排序
console.log('arr2 =' + JSON.stringify(arr2));
console.log('result =' + JSON.stringify(result));
//结果
arr2 =[1,11,2,3,4,5]
result =[1,11,2,3,4,5]
分析
:上面结果中,你会发现,数字并没有按大小顺序来,这是为什么了,是我sort不行么?不,当然不是。回到上面的定义,js的sort是按照Unicode编码,默认按照字典序来排列。那怎么样才能按数字大小排序呢?怎么操作呢?继续往下看。
带参时,自定义排序规则
如果在 sort()方法中带参,那么参数是什么呢?作用是啥?
我们在 sort()传入一个回调函数
当做参数,来指定排序规则(就像写C/C++时,经常写的cmp函数来指定排序规则)。回调函数中需要定义两个形参
,浏览器将会分别使用数组中的元素作为实参去调用回调函数。那么如何来决定优先顺序呢?别着急,我们慢慢来说。
我们根据回调函数的返回值来决定元素的排序:
- 如果返回一个大于 0 的值,则元素会交换位置
- 如果返回一个小于 0 的值,则元素位置不变
- 如果返回一个等于 0 的值,则认为两个元素相等,则不交换位置
如果只是看上面的文字,可能不太好理解,我们来看看下面的例子,你肯定就能明白。
数字升序
粗糙版本
var arr = [5, 2, 11, 3, 4, 1];
// 自定义排序规则
var result = arr.sort(function (a, b) {
if (a > b) {
// 如果 a 大于 b,则交换 a 和 b 的位置
return 1;
} else if (a < b) {
// 如果 a 小于 b,则位置不变
return -1;
} else {
// 如果 a 等于 b,则位置不变
return 0;
}
});
console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));
//结果
arr = [1, 2, 3, 4, 5, 11];
result = [1, 2, 3, 4, 5, 11];
但是我们发现上方代码的写法太啰嗦了,其实也可以简化为如下写法:
简化版:(冒泡排序)
let arr = [5, 2, 11, 3, 4, 1];
// 自定义排序规则
let result = arr.sort(function (a, b) {
return a - b; // 升序排列
// return b - a; // 降序排列
});
console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));
上方代码还可以写成 ES6 的形式,也就是将 function 改为箭头函数,其写法如下。
ES6版:(箭头函数)
let arr = [5, 2, 11, 3, 4, 1];
// 自定义排序规则
let result = arr.sort((a, b) => {
return a - b; // 升序排列
});
console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));
//优化
let result = arr.sort((a, b) => a - b);
ES6优化版的箭头函数 是我们在实战开发中用得最多的。
为了确保代码的简洁优雅
,接下来的代码中,凡是涉及到函数,我们将尽量采用 ES6 中的箭头函数
来写。