Simple understanding of JS bubble sort _javascript Skills

On the sort, in fact, no matter what language, has its built-in sorting function, we need to use the time to call on the line, so why do we have to talk about this thing? I think, in fact, we talk about sorting more is the thought algorithm included in the order, because, the algorithm for the computer is very important, a good algorithm can make the efficiency of the computer to achieve a multiplier effect, so, the algorithm is a very popular computer language courses, It represents the computer thinking is also very worthy of our in-depth study.

I also know that many of the authors in the blog park have written detailed explanations about the sort of titles I have, perhaps, I think my own understanding can reflect this sort of working principle, so, the author also is worthy of here again write about bubble sort of article, there is a need for readers to see.

Before we get to the point, let me introduce you to Google browser a very useful debugging program code functions, if you already know, please skip.

First, open Google's browser and enter our code script:

Right button, click Check,

Click in sequence to get the script's running code:

My script is bubble.html, stored in the www.test.com domain name below the js/f directory, everyone's script is different, stored directories are not the same, please according to their own situation.

After you pull up the contents of the script, the following is the debug code.

After choosing a good break point, next in Google browser to run the script again, is to the following www.test.com/js/f/bubble.html and then return to run

After you run it again, you'll see something like this:

See that blue rectangular box up there? The blue rectangle is the code location where the script is running, so how do we get the script code to run in step?

Here is the script for the Loop code for the breakpoint monitoring, in fact, I was to see how the bubble sort of loop operation, for beginners, this intuitive view of the bubble sort of the operation of the code to better understand the implementation of the algorithm.

For this debugging small function is introduced here, the following into the business, there is no way to directly imagine the execution of bubble sort, you can press my steps above to pull up Google's debugging function, intuitive view of the whole process of bubble sort.

To introduce the two variables of the exchange of thinking, we use the middle variable to exchange:

Interaction elements, where the code is intercepted from the script, so simple that it should not affect understanding
if (Arr[j] > Arr[j+1]) {
Mark = false;
var temp = arr[j];//temp is an intermediate variable that assigns the first element Arr[j] to the intermediate variable, and also stores the first element
arr[j] = arr[j+1];//The second element to the first element, Because the first element we have stored in the middle variable, so we don't have to worry about its value being overwritten.
Arr[j+1] = Temp;//temp Stores the value of the first element, assigns it to the second element, and assigns the first element to the second element. Two elements have been swapped for positions
}

Again, bubble sort algorithm process:

Bubble sort: By comparing adjacent elements and exchanging positions, one element is selected Step-by-step.

For example, sort the following array:

This is an unordered array: 2,9,4,8,5,1,0,7,3,6

Comparison rule: Greater than >

First round:

First comparison: We compare 2 and 9:2>9? 2 and 9 are false, so we ignore it and move on.

Second comparison: Compare 9 and 4, 9>4? Is true, then we let them exchange values, exchange values, their position is not changed, right? How to exchange the value has been said, this is not repeated here.

After this exchange value, the original array has become: 2,4,9,8,5,1,0,7,3,6

Third comparison: 9 and 8 compare, 9>8? Is true, then two of them continue to exchange values, at which point the array has become: 2,4,8,9,5,1,0,7,3,6

......................

Do you see the location of the 9 here? Is it moving backwards step by step? The first comparison because 9 would have been large, so it should not and 2 swap positions, so, 9 is not put in front, the second comparison, because 9:4 large, so, according to the comparison rules, they should swap position, that is, 9 moved backward, the third comparison, still meet the comparison rules, so 9 and 8 swap position , 9 and moved back a step, the next comparison is the same as the above comparison is the same process, you can imagine it, here will not repeat.

Compare to Last: The original array should be: 2,4,8,5,1,0,7,3,6,9

After the first round of comparison, we have put the largest element to the last side, right?

Next, the second round:

First of all, the second round, the original array 2,9,4,8,5,1,0,7,3,6, has become a 2,4,8,5,1,0,7,3,6,9, we are in the bubble has been an array of comparisons based on the first to confirm this, if you still think that the original array, then, You're going to get confused about the next comparison. Oh.

The array at the moment: 2,4,8,5,1,0,7,3,6,9

According to the comparison rule: 2>4? is false, regardless of it, continues to compare forward.

4>8? is false, regardless of it, to continue to compare forward.

8>5? Is true, the two exchange values, that is, the swap position, now array: 2,4,5,8,1,0,7,3,6,9

Go ahead, 8>1? Is true, the two exchange positions, the moment array: 2,4,5,1,8,0,7,3,6,9

.......

Compared to the end, the original array has changed, has become: 2,4,5,1,0,7,3,6,8,9

After two rounds of comparisons, has the original array become ordered? Oh, no mistake, two rounds, the last two digits is already orderly.

Since two rounds later, the final two-bit is already orderly, then, after 10 rounds? Imagine yourself.

After 10 rounds, the array must have been sorted. This is the process of bubbling sort, where the adjacent elements are compared, and each round bubbles out an ordered value.

So how do we implement bubble sort in code mode?

Writing here, I think we should know how to do it?

We use a two-tier nested for loop to implement this process, which is to implement the bubble sort:

Outer control wheel
for (Var i=0;i<len;i++) {
//inner-layer array element bubble selection for
(Var j=0;j<len-1-i;j++) {
//interactive element
if (Arr[j] > Arr[j+1]) {
var temp = arr[j];
ARR[J] = arr[j+1];
ARR[J+1] = temp;  
}
}

The two nested for loops above see? Outer for loop, we are used to control the comparison Wheel Count Of

Inner for Loop, we use to control Number of comparisons per round , and what else do we do in this for loop? Do you understand the text in the above statement? In the words above, we are not in ... Each time comparison ... , you have to exchange the location of the array elements according to the comparison rules, right? So the procedure works the same way, and we're going to swap places here based on the elements of the comparison rules in order to bubble up the elements we need.

Here's the complete code for bubble sort, which I optimized and of course, if you can optimize it, you can continue to optimize it.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Here is just a simple introduction to the working principle of bubble sort, if there is time, I will explain the other three sorting, quick sort, select sort, insert sort.

In fact, these three sort of working principle and bubble sort very similar, online also has a lot of articles introduced, we can study it.

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!