sort（）a和b变量中的JavaScript回调函数

Question

I am trying to understand how the sort() function works along with the callback function passed into it. More specifically the values of a and b

Example code:

var n = [4, 11, 2, 10, 3, 1];
    n.sort(function(a, b) {
        console.log(a);
        console.log(b);
        console.log('--')
        return a-b;
    });

Result:

4
11
--
11
2
--
4
2
--
11
10
--
4
10
--
11
3
--
10
3
--
4
3
--
2
3
--
11
1
--
10
1
--
4
1
--
3
1
--
2
1
--

The first round I can follow that a = 4, and b = 11, easy to follow.

The second round I can follow that a = 11 and b = 2.

But after that I sort of loose track of what actually is going, for example when you get to when a = 4 and b = 3. How is this actually working? I tried working it out on paper but could not see the logic in the output of a and b .

Answer 1

You can see it this way. When you have two numbers, compare the a (the previous one) and b (the next one).
If a is bigger than b, put it after b.
If a is smaller than b, put it before b.
In fact, when you have the case 'a > b', you can return any positive number: put a after b.
And, when you have the case 'a < b', you can return any negative number: put a before b. It is essentially comparing 2 numbers at a time.

The position in the array can be understood as below. Looking from the perspective of return ab , if you return a negative number, put a before b; if you return a positive number, put a after b. negative numbers - zero - positive numbers.

Perhaps, you can understand it better by printing out content in n during runtime.

window.n = [4, 11, 2, 10, 3, 1];
n.sort(function(a, b) {
    console.log(a);
    console.log(b);
    console.log(window.n); // You can see what is in n in the every comparison
    console.log('--')
    return a-b;
});

Result on Chrome v64.0.3282

4
11
(6) [4, 11, 2, 10, 3, 1]
--
11
2
(6) [4, 11, 2, 10, 3, 1]
--
4
2
(6) [4, 11, 11, 10, 3, 1]
--
11
10
(6) [2, 4, 11, 10, 3, 1]
--
4
10
(6) [2, 4, 11, 11, 3, 1]
--
11
3
(6) [2, 4, 10, 11, 3, 1]
--
10
3
(6) [2, 4, 10, 11, 11, 1]
--
4 
3
(6) [2, 4, 10, 10, 11, 1]
--
2
3
(6) [2, 4, 4, 10, 11, 1]
--
11
1
(6) [2, 3, 4, 10, 11, 1]
--
10
1
(6) [2, 3, 4, 10, 11, 11]
--
4
1
(6) [2, 3, 4, 10, 10, 11]
--
3
1
(6) [2, 3, 4, 4, 10, 11]
--
2
1
(6) [2, 3, 3, 4, 10, 11]
--

(6) [1, 2, 3, 4, 10, 11] // result

Your code returns the same result as below:

var n = [4, 11, 2, 10, 3, 1];
n.sort(function(a, b) {
    console.log(a);
    console.log(b);
    console.log('--')
    if (a > b) {
        return 1;
    } else {
        return -1;
    }  
});
(6) [1, 2, 3, 4, 10, 11] // result

OR

var n = [4, 11, 2, 10, 3, 1];
n.sort((a, b) => a > b ? 1 : -1);
(6) [1, 2, 3, 4, 10, 11] // result

Answer 2

Looks like a modified bubble sort. You can see what is happening when you compare the state of the array at each step - I have added them below.

Move the value from index 1 as low as it should go. (index 0-1 are in order) Now move the value from index 2 as low as it should go. (index 0-2 are in order) Now move the value from index 3 as low as it should go. (index 0-3 are in order)

Since we know how much of the array is in order we short circuit the comparisons and jump to the next index as soon as the comparison function is not negative.

4
11
-- [4, 11, 2, 10, 3, 1];
11
2
-- [4, 2, 11, 10, 3, 1];
4
2
-- [2, 4, 11, 10, 3, 1];
11
10
-- [2, 4, 10, 11, 3, 1];
4
10
-- [2, 4, 10, 11, 3, 1];
11
3
-- [2, 4, 10, 3, 11, 1];
10
3
-- [2, 4, 3, 10, 11, 1];
4
3
-- [2, 3, 4, 10, 11, 1];
2
3
-- [2, 3, 4, 10, 11, 1];
11
1
-- [2, 3, 4, 10, 1, 11];
10
1
-- [2, 3, 4, 1, 10, 11];
4
1
-- [2, 3, 1, 4, 10, 11];
3
1
-- [2, 1, 3, 4, 10, 11];
2
1
-- [1, 2, 3, 4, 10, 11];