排序
假设有一个对象数组,我们想要根据某个对象属性对数组进行排序。
我们可以使用sort()
方法
sort()
sort()
方法用于对数组的元素进行排序,并返回数组
。
默认排序顺序是根据字符串Unicode码点。
语法:arrayObject.sort(参数)
参数可选,用于规定排序顺序。必须是函数。
注:如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序。
准确的说:是按照字符编码的顺序进行排序。
但要实现默认按字母顺序排序,必须先把数组的元素都转换成字符串。
例1:我们将创建一个数组,并按字母顺序进行排序:
<script type="text/javascript">
var arr = new Array(4)
arr[0] = "G"
arr[1] = "J"
arr[2] = "T"
arr[3] = "A"
document.write(arr.sort()) //A G J T
</script>
例2:我们将创建一个数组,并按字母顺序进行排序:
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr.sort()) // 1 10 1000 25 40 5
</script>
至此,我们了解了sort()
在没有函数传参的情况下:
默认按照首字母A~Z、a~z排序,以及0~9排序。
- 原理:真正的默认排序顺序是根据字符串Unicode码点。字符串根据ASCII码进行排序。
我们注意到,上面的代码没有按照数值的大小对数字进行排序
要实现这一点,就必须使用一个排序函数。
① 函数传参(a-b)-升序、降序排序
<script type="text/javascript">
function sortNumber(a,b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr.sort(sortNumber)) // 1 5 10 25 40 10000
</script>
以上代码可知,升序排列方法为:
function sortNumber(a,b)
{
return a - b //同理,如果是降序,则为b - a
}
但如果想根据数组对象中的某个属性值进行排序呢?
② 进阶:函数嵌套传参(自定义函数(属性名))
sort方法接收一个函数作为参数。
我们可以在参数中嵌套一层函数用来接收对象属性名,其他部分代码与正常使用sort方法相同。
意思是:根据xx属性的值进行排序
var arr = [
{name:'zopp',age:0},
{name:'gpp',age:18},
{name:'yjj',age:8}
];
function compare(用于判断的属性名){
return function(a,b){
var value1 = a[用于判断的属性名];
var value2 = b[用于判断的属性名];
return value1 - value2;
}
}
console.log(arr.sort(compare('age'))) //返回对象,age从小到大正向排序
③ 字母排序兼容
我们已经学会了字面量值的升序降序,以及根据属性名对对象数组进行的升序降序
但要是字母大小写不同,该如何来确定是升序排列,还是降序排序呢?
默认情况下,对字符串排序,是按照ASCII的大小比较的。
现在,我们提出排序应该忽略大小写,按照字母序排序。
要实现这个算法,不必对现有代码大加改动,只要我们能定义出忽略大小写的比较算法就可以:
toUpperCase() 方法:把字符串转换为大写。
以下算法基于js底层的JS引擎实现,严格意义上并非某种算法。
而是对于sort()函数的高阶应用!
(s1、s2)为升序,(s2、s1)为降序
var arr = ['Google', 'apple', 'Microsoft'];
function english(s1, s2) {
x1 = s1.toUpperCase();
x2 = s2.toUpperCase();
if (x1 < x2) {
return -1;
}
if (x1 > x2) {
return 1;
}
return 0;
}
arr.sort(english); // ['apple', 'Google', 'Microsoft']
原理解析:
sort()会默认按照字符编码的顺序进行排序。
字符编码的大小判断,会决定sort()方法的返回结果。
- 然而,尽管如此,我们还是可以利用js本身的语法,去灵活使用sort()方法。
sort()原理与通用方法
参考字母排序方法
让我们来看看sort()是如何通过0,1,-1
来对不同的对象数组进行排序的。
关于前面的字母排序方法,我使用的廖雪峰大神的博客教学代码,接下来为了方便理解,我还会使用他的代码。
sort()通用方法
①通用简单升序
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
if (x < y) {
return -1;
}
if (x > y) {
return 1;
}
return 0;
});
console.log(arr); // [1, 2, 10, 20]
② 通用简单降序
改变上一段代码的return返回值的1和-1的位置(位置对调)。
闲话:记得廖雪峰大神的教学代码,看过三次,当时都以为看懂了一部分。其实完全没看懂,只是知道怎么用。
接下来说说原理。
sort()通用排序原理
原理很简单,但是初学者一般不会想得到:
那就是————JS引擎的判断机制!
想起很久以前看过的一张动漫对比图:
天然呆看到看到苹果会想到“苹果很甜、好吃”,或者我们普通人就再加一个iphone。
而学霸看到苹果则是会想到牛顿的万有引力、以及各种相关知识……联想能力强到爆炸,学力满满
咳,姑且不提这个悲伤的故事
我们来说说JS引擎的判断机制。
说是JS引擎、但也不是什么很难的东西。
- 仅仅就是
if
判断语句而已!
是不是很惊讶?然而,虽然仅仅是if
判断语句,但灵活的把不同的东西一起用,还是要对js有一定了解才行,否则除非非常专注去想要钻研问题,或者运气好。
不然一般还是无法理解。
- 讲解部分
这里廖雪峰大神的代码,通过对字符比较的大小判断,以及return返回……
判断了到底执行哪一条代码。
本质上,排序原理还是sort()
方法进行排序(参考最前面的代码)
只是加入if判断。
实际上,-1
和0
的返回值,都是可以忽略的。
因为那代表false
致命魔术:靠近一点,因为你自以为看到的越多,就越容易被欺骗!
所以知识面广很重要!
在刚开始学习一门新技术时,最好对其有相对全面的认识再深入了解!
再不济,在遇到问题时,也要有不惧怕陌生知识的强大内心!
(这正是我一开始学了很久,技术也很菜的原因!)