实现简单的jQuery数组排序 - 极悦
专注Java教育14年 全国咨询/投诉热线:444-1124-454
极悦LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 实现简单的jQuery数组排序

实现简单的jQuery数组排序

更新时间:2021-12-02 09:53:18 来源:极悦 浏览889次

jquery数组(排序)

HTML

<h3>字符串数组排序前</h3>
<div id="show5"></div>
<h3>排序后</h3>
<div id="show6"></div>

jquery:

var animals = ['dog','cat','tiger','pig','bird'];
$('#show5').html(animals.join('<br/>'));         
animals = animals.sort();
$('#show6').html(animals.join('<br/>'));

显示结果:

字符串数组排序前
dog
cat
tiger
pig
bird
排序后
bird
cat
dog
pig
tiger

如果数组换成了数值数组呢?结果会什么怎么样的?

如下:

HTML:

<h3>数值数组排序前</h3>
<div id="show7"></div>
<h3>排序后</h3>
<div id="show8"></div>

jquery:

ar nums = ['12','2','5','36','4'];
$('#show7').html(nums.join('<br/>'));    
nums = nums.sort();
$('#show8').html(nums.join('<br/>'));

显示结果:

数值数组排序前
12
2
5
36
4
排序后
12
2
36
4
5

很明显,数值数组最后的排序结果不是我们想要的。这是为什么呢?

因为sort()方法排序,是基于ASCII值进行排序的。故它会认为36小于4(因为3的ASCII值小于4的ASCII值)。所以要对排序的sort()方法定义一个比较函数:

jquery

ar nums = ['12','2','5','36','4'];
$('#show7').html(nums.join('<br/>'));
//定义了sort的比较函数
nums = nums.sort(function(a,b){
return a-b;
});
$('#show8').html(nums.join('<br/>'));

显示结果:

数值数组排序前
12
2
5
36
4
排序后
2
4
5
12
36

知识点:

1,sort(function(a,b){return a-b;})对传入的一对值进行比较,然后返回的的值为:小于0,大于0,等于0;(大于0交换位置,反之则不)

* 当小于0时,说明b>a,故b的排序靠后(即不变).

* 当大于0时,说明a>b,故a的排序靠后.

* 当等于0时,说明a=b,故不改变排序.

如果对数值数组的值进行降序排序。那么只要把返回的值改为b-a!

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>