Rumah >hujung hadapan web >tutorial js >详解js数组实现排序的sort()方法（代码实例）

详解js数组实现排序的sort()方法（代码实例）

青灯夜游asal: 2018-10-16 11:06:333447semak imbas

sort()如何实现js数组的排序？本篇文章就给大家介绍一下js数组实现排序的sort()方法，让大家可以了解js数组中sort()排序的原理，知道sort()是如何给js数组排序的。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

首先我们了解一下js sort()方法，通过简单的代码实例来看看sort()排序的方法。

sort() 方法：用于对数组的元素进行排序；在给数组排序时，不开辟新的内存，是在原有数组元素上进行调换的。

1、sort()方法实现js简单数组的简单排序（冒泡排序）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div>
			<p>数组：6,2,4,3,5,1</p>
			<span>排序后：</span>
		</div>
		<script type="text/javascript">
			var arrSimple = new Array(6,2,4,3,5,1);
			arrSimple.sort();
			document.writeln(arrSimple.join());
		</script>
	</body>
</html>

效果图：

我们来看看sort()排序原理：

sort()排序是进行的两两比较.
数组：[6,2,4,3,5,1]

第一轮开始
第1次比较6和2，6比2大，得到2和6，原数组变成[2,6,4,3,5,1]
第2次比较第2个和第3个数：6和4，6比4大，得到4和6，结果[2,4,6,3,5,1]
第3次比较第3个和第4个数：6和3，得到[2,4,3,6,5,1]
第4次比较5和6，结果[2,4,3,5,6,1]
第5次比较6和1，结果[2,4,3,5,1,6]
第一轮结束

第二轮开始
第1次比较2和4，2比4小，结果不变[2,4,3,5,1,6]
第2次比较4和3，结果[2,3,4,5,1,6]
第3次比较4和5，4比5小,结果不变[2,3,4,5,1,6]
第4次比较5和1，结果[2,3,4,1,5,6]
第二轮结束

第三轮开始
第1次比较2和3，2比3小，结果不变[2,3,4,1,5,6]
第2次比较3和4，3比4小，结果不变[2,3,4,1,5,6]
第3次比较4和1 ，结果[2,3,1,4,5,6]
第三轮结束

第四轮开始
第1次比较2和3，2比3小，结果不变[2,3,1,4,5,6]
第2次比较1和3，结果 [2,1,3,4,5,6]
第四轮结束

第五轮开始
第1次比较2和1，结果[1,2,3,4,5,6]
第五轮结束，排序结束。

数组排序后的结果（共进行了15次比较）：[1,2,3,4,5,6]

2、sort()方法实现js简单数组的自定义排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div>
			<p>数组：1，8，7，6</p>
			<span>从大到小 排序后：</span>
		</div>
		<script type="text/javascript">
			var arrSimple2 = new Array(1, 8, 7, 6);
			arrSimple2.sort(function(a, b) {
				return b - a;
			});
			document.writeln(arrSimple2.join());
		</script>
	</body>

</html>

效果图：

我们来分析一下：

a，b表示数组中的任意两个元素，若return > 0，则返回的值为：b在前a在后（b，a）；若reutrn < 0，则返回的值为：a在前b在后（a，b）；注：a=b时存在浏览器兼容。

简单来说，就是：a-b输出从小到大排序，b-a输出从大到小排序。

3、sort()方法实现js简单对象数组的自定义属性排序（按照年龄属性排序）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div>
			<p>对象数组：<br><br>
			jack，20岁<br>
			tony，25岁<br>
			stone，26岁<br>
			mandy，23岁<br>
			</p>
			<span>按照年龄排序后：</span>
		</div>
		 <script type="text/javascript">
        var objectList = new Array();
        function Persion(name,age){
            this.name=name;
            this.age=age;
            }
        objectList.push(new Persion(&#39;jack&#39;,20));
        objectList.push(new Persion(&#39;tony&#39;,25));
        objectList.push(new Persion(&#39;stone&#39;,26));
        objectList.push(new Persion(&#39;mandy&#39;,23));
        //按年龄从小到大排序
        objectList.sort(function(a,b){
            return a.age-b.age});
        for(var i=0;i<objectList.length;i++){
            document.writeln(&#39;<br />&#39;+objectList[i].name+&#39;，&#39;+objectList[i].age+&#39;岁&#39;);
            }
    </script>
	</body>
</html>

效果图：

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程，jQuery视频教程，bootstrap教程！

Atas ialah kandungan terperinci 详解js数组实现排序的sort()方法（代码实例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery bootstrap sort 冒泡排序 JS 对象

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：json与jsonp有什么区别？json与jsonp的区别对比Artikel seterusnya：bootstrap框架怎么用？bootstrap框架的用法介绍

Artikel berkaitan

Lihat lagi