On the optimization of JS performance from thousands of bits format

Source: Internet
Author: User

The so-called thousand-bit form, that is, from the single digit, every three bits and a comma . For example, "10,000". In response to this requirement, I initially wrote a function like this:

Method One
function Tothousands (num) {
var result = [], counter = 0;
num = (num | | 0). toString (). Split (");
for (var i = num.length-1; I >= 0; i--) {
counter++;
Result.unshift (Num[i]);
if (! ( Counter% 3) && I! = 0) {result.unshift (', ');}
}
Return Result.join (");
}

The execution of method one is to convert the number into a string, break the array, and then, starting at the end, insert the elements of the array into the beginning of the new Array (result). With each element inserted, counter counts the number of times (plus 1), and when counter is a multiple of 3, a comma is inserted, but note that the beginning (i is 0 o'clock) does not require commas. Finally, the final result is obtained by invoking the Join method of the new array.

The method is relatively clear and easy to understand and has been used for some time in the project. But the intuition tells me that its performance is not good.

Method Two--string version of method one
Method Two
function Tothousands (num) {
var result = ', counter = 0;
num = (num | | 0). toString ();
for (var i = num.length-1; I >= 0; i--) {
counter++;
result = Num.charat (i) + result;
if (! ( Counter% 3) && I! = 0) {result = ', ' + result;}
}
return result;
}

Method Two is a modified version of method One, do not break the string into an array, always to the string operation .

Method three--loop matches the three digits at the end
Method Three
function Tothousands (num) {
var num = (num | | 0). toString (), re =/d{3}$/, result = ';
while (Re.test (num)) {
result = Regexp.lastmatch + result;
if (num!== regexp.lastmatch) {
result = ', ' + result;
num = Regexp.leftcontext;
} else {
num = ';
Break
}
}
if (num) {result = num + result;}
return result;
}

Method Three is a completely different algorithm, through the regular expression loop to match the end of the three digits, each match, the comma and match to the content of the insertion into the beginning of the result string, and then the matching target (NUM) is assigned to the content (Regexp.leftcontext) that has not been matched. Also, be aware that:

    • If the number of digits is a multiple of 3, the last match to the content must be three digits, but the first three digits before the need to add a comma;
    • > If the number of digits is not a multiple of 3, the NUM variable will eventually have 1 to 2 digits left, and after the loop, the remaining number is inserted at the beginning of the result string.

Although method three reduces the number of cycles (three characters at a time), the use of regular expressions increases the consumption to a certain extent.

Method four--string version of method three
Method Four
function Tothousands (num) {
var num = (num | | 0). toString (), result = ';
while (Num.length > 3) {
result = ', ' + num.slice ( -3) + result;
num = Num.slice (0, num.length-3);
}
if (num) {result = num + result;}
return result;
}

In fact, the ability to intercept the three characters at the end can be done using the slice, substr, or substring methods of the string type. In this way, you can avoid using regular expressions .

Method five--grouping merging method
Method Five
function Tothousands (num) {
var num = (num | | 0). toString (), temp = num.length% 3;
Switch (temp) {
Case 1:
num = ' xx ' + num;
Break
Case 2:
num = ' 0 ' + num;
Break
}
Return Num.match (/d{3}/g). Join (', '). Replace (/^0+/, ');
}

First, the number of digits up to a multiple of 3, through the regular expression, cut it into a group of three numbers, and then by the Join method to add a comma, and finally to remove the complement of 0.

Method Six--Lazy man method
Method Six
function Tothousands (num) {
return (num | | 0). toString (). replace (/(d) (? = (?:d {3}) +$)/g, ' $ ', ');
}

Always think that this format can be replaced by a regular expression to do, but need to use the assertion and other wording, helpless to this part is not very familiar. Google a bit, and really found such a regular expression, which is estimated to be the shortest implementation of code.

Test results 100000 tr>
number 5,000 times consumed (ms)
method One Method Two Method Three method Four Method Five method Six
1 4 1 3 1 2 >
+ 1 3 0 7 2
1 2 4 5 3
+ 2 3 2 9 5
10000 4 3 1 6 3
3 2 1 5 6

The strong contrast between method one and method two shows that the efficiency of string manipulation is much higher than that of array operation. The test results of method six tell us that the code length has nothing to do with performance. The overall performance of method four is the best (but the reason why NUM is 100 is that it's degraded, and this is really confusing), mainly because:

    • Comparison method one or two, 3 characters per operation instead of 1 characters, reduce the number of cycles;
    • The comparison method of three, five or six, does not use regular expressions, reduce consumption.

Finally, I chose method Four as the final optimization scheme. If you have a better way of achieving or improving your views, you can comment.

On the optimization of JS performance from thousands of bits format

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.