首页 web前端 js教程 详解js数组实现排序的sort()方法(代码实例)

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

Oct 16, 2018 am 11:06 AM
javascript js数组 数组排序

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>
登录后复制

效果图:

1.jpg

我们来看看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>
登录后复制

效果图:

2.jpg

我们来分析一下:

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>
登录后复制

效果图:

3.jpg

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

以上是详解js数组实现排序的sort()方法(代码实例)的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何使用WebSocket和JavaScript实现在线语音识别系统 如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

WebSocket与JavaScript:实现实时监控系统的关键技术 WebSocket与JavaScript:实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

如何使用WebSocket和JavaScript实现在线预约系统 如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代,越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统,并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

如何利用JavaScript和WebSocket实现实时在线点餐系统 如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单

PHP 中保留键名的快速数组排序方法 PHP 中保留键名的快速数组排序方法 May 02, 2024 pm 03:06 PM

PHP中保留键名的快速数组排序方法:使用ksort()函数对键进行排序。使用uasort()函数使用用户定义的比较函数进行排序。实战案例:要按分数对用户ID和分数的数组进行排序,同时保留用户ID,可以使用uasort()函数和自定义比较函数。

JavaScript和WebSocket:打造高效的实时天气预报系统 JavaScript和WebSocket:打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

JS数组排序:sort()方法的工作原理和机制深入解析 JS数组排序:sort()方法的工作原理和机制深入解析 Dec 28, 2023 am 11:47 AM

深入理解JS数组排序:sort()方法的原理与机制,需要具体代码示例导语:数组排序是在我们日常的前端开发工作中非常常见的操作之一。JavaScript中的数组排序方法sort()是我们最常使用的数组排序方法之一。但是,你是否真正了解sort()方法的原理与机制呢?本文将带你深入理解JS数组排序的原理和机制,并提供具体的代码示例。一、sort()方法的基本用法

See all articles