JavaScript Array.Sort () issues to consider across browsers _javascript tips

However, in a cross-browser test, a problem was found in the Chrome browser, the tester found (see Figure 1) that in chrome, when sorted by a column, when the two rows were sorted in the same value, Chrome did not keep the two columns in the usual order, but switched them sequentially. After Google the problem, we found that the original ECMAScript specification did not specify the sort algorithm, so that each browser has its own sort algorithm, however, because some vendors are based on an unstable sorting algorithm, such as Chrome and mozilla/ Prior to Firefox 3.0, the ranking algorithm is unstable, but IE is a stable sorting algorithm. The difference in the implementation of this algorithm also leads to inconsistencies in the results displayed by the graphs in different browsers.

Figure 1: The number on the left of the array indicates the order in which it was initialized

Having thought about it, I and the other members of the group gave their own solutions, his opinion is to realize the specific sort algorithm to unify the control, in view of the online ready-made sorting algorithm many and the sorting algorithm is the programmer's foundation, this way realizes is not complicated, the only work is the code realization. But I think there is a simpler way, because our data is parsed from XML, and XSLT knows the ordinal of each row of data (of course, if the server-side code is as easy to fetch as a database or webservice read), So I think you can add an index attribute to each column in XSLT, e.g. the first line is Index=1, the second line index=2 ... this compares the row number if two values are found when the sort is compared to the same size. This ultimately requires only two lines of code to be added to the comparison function. The following is a screenshot of the implementation code and results:

Copy Code code as follows:

var array = [
{index:1,val:25},
{index:2,val:25},
{index:3,val:45},
{index:4,val:78}];
Array.Sort (function (A, b) {
if (A.val = = B.val) {
Two values are the same here and are compared based on their line number (the index value initialized).
return a.index-b.index;
}
return a.val-b.val;
})
for (var i = 0; i < Array.Length; i++) {
document.write ("<p>" + array[i]. Index + ":" + array[i].val + "</p>");
}

After the update screenshot of the results:

Of course this is just one of the solutions, and my goal is to minimize the amount of code we need to maintain so that we can minimize bugs. A train of thought, hope to help you.

Frustration is like a wall, this wall forces us to prove to ourselves how much we want to get the treasure behind this wall.