Home > Article > Web Front-end > Detailed explanation of the sort() method for sorting js arrays (code example)

Detailed explanation of the sort() method for sorting js arrays (code example)

青灯夜游Original: 2018-10-16 11:06:333424browse

How does sort() implement sorting of js arrays? This article will introduce you to the sort() method for sorting js arrays, so that you can understand the principle of sort() in js arrays and how sort() sorts js arrays. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, let’s take a look at the js sort() method, and look at the sort() sorting method through a simple code example.

sort() method: used to sort the elements of the array; when sorting the array, no new memory is opened, and the original array elements are replaced.

1. The sort() method implements simple sorting of js simple arrays (bubble sorting)

<!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>

Rendering:

Detailed explanation of the sort() method for sorting js arrays (code example)

Let’s take a look at the sort() sorting principle:

sort() sorting is a pairwise comparison.
Array: [6,2,4, 3,5,1]

Start of the first round
The first time we compare 6 and 2, 6 is larger than 2, we get 2 and 6, the original array becomes [2,6,4,3, 5,1]
The second time we compare the second and third numbers: 6 and 4, 6 is larger than 4, we get 4 and 6, the result is [2,4,6,3,5,1]
Comparing the third and fourth numbers for the third time: 6 and 3, we get [2,4,3,6,5,1]
Comparing 5 and 6 for the fourth time, the result is [2,4,3,5,6,1]
Comparing 6 and 1 for the fifth time, the result is [2,4,3,5,1,6]
End of the first round

Start of the second round
The first time we compare 2 and 4, 2 is smaller than 4, the result remains the same [2,4,3,5,1,6]
The second time we compare 4 and 3, the result is [2,3,4,5, 1,6]
Compare 4 and 5 for the third time, 4 is smaller than 5, the result remains unchanged [2,3,4,5,1,6]
Compare 5 and 1 for the fourth time, the result is [2 ,3,4,1,5,6]
End of the second round

Start of the third round
Comparing 2 and 3 for the first time, 2 is smaller than 3, the result remains unchanged [2, 3,4,1,5,6]
The second time to compare 3 and 4, 3 is smaller than 4, the result remains unchanged [2,3,4,1,5,6]
The third time to compare 4 and 1, the result is [2,3,1,4,5,6]
End of the third round

Start of the fourth round
Comparing 2 and 3 for the first time, 2 is smaller than 3, The result remains unchanged [2,3,1,4,5,6]
The second time 1 and 3 are compared, the result is [2,1,3,4,5,6]
End of the fourth round

The fifth round begins
The first time 2 and 1 are compared, the result is [1,2,3,4,5,6]
The fifth round ends and the sorting ends.

The result after sorting the array (a total of 15 comparisons were made): [1,2,3,4,5,6]

2, sort() method implementation js Custom sorting of simple arrays

<!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>

Rendering:

Detailed explanation of the sort() method for sorting js arrays (code example)

Let’s analyze it:

a, b represents any two elements in the array. If return > 0, the returned value is: b in front and a after (b, a); if reutrn

To put it simply, the output of a-b is sorted from small to large, and the output of b-a is sorted from large to small.

3. The sort() method implements custom attribute sorting of js simple object arrays (sorted by age attribute)

<!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>

Rendering:

Detailed explanation of the sort() method for sorting js arrays (code example)

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit JavaScript Video Tutorial, jQuery Video Tutorial, bootstrap Tutorial!

The above is the detailed content of Detailed explanation of the sort() method for sorting js arrays (code example). For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery bootstrap sort 冒泡排序 JS 对象

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the difference between json and jsonp? Comparison of the differences between json and jsonpNext article：What is the difference between json and jsonp? Comparison of the differences between json and jsonp

See more

Detailed explanation of the sort() method for sorting js arrays (code example)

Related articles