Details JS several variable exchange methods and performance analysis and comparison _javascript skills

Objective

"Two variables between the worth of exchange", this is a classic topic, now there are a lot of mature solutions, this article is mainly to enumerate several common scenarios, a large number of calculations and analysis of the comparison.

Onwards

When you do a project recently, one of the requirements is to exchange two elements in an array. The methods used at that time were:

arr = [item0,item1,..., itemn];
This code was originally used to exchange No. 0 and K (k<n) elements
arr[0] = Arr.splice (k, 1, arr[0]) [0];

At that time thought this method is very elegant, high force lattice ...

Later, in the spare time to take this study, incidentally wrote an analysis tool, and the ordinary way to compare.

As a result, to my surprise, the efficiency of this approach is much lower than I expected. The following is a diagram of one of the test results

Therefore, based on this, and the next several other methods of numerical exchange, integration into the analysis tool, only this summary of this article.

Several ways of JS variable Exchange

In fact, the variable exchange of JS, the use of the most widely used in several ways is basically a front-end personnel must have skills, this article just take advantage of this analysis and research opportunities, listed in this analysis of the use of several exchange methods:

The first type: Ordinary temporary variable Exchange Mode

Applicability: Applicable to all types

The code is as follows:

TMP = A;
A = b;

Brief description:

This is the most widely used way, the actual test analysis, performance is also very high

(in JS, this approach is really very efficient, and even in other languages, as long as the TMP variable created in advance, performance is not very low, but some acrobatic and minority performance is very low)

Basically can say: The classic is the most elegant

The second: Using a new object for data exchange

Applicability: Applicable to all types

The code is as follows:

A = {a:b, b:a};
b = a.b
a = A.A;

Brief description:

This approach is rarely used in combat.

The third: Using a new array for data exchange

Applicability: Applicable to all types

The code is as follows:

A = [B, b=a][0];

Brief description:

This approach has been seen in all major forums, but the actual performance of the test is not high

Fourth: The use of array exchange variables (Ejs support required)

Applicability: Applicable to all types

The code is as follows:

' [A, b] = [B, a];

Brief description:

This is also after ES6 out to see someone to use, actually in the existing browser test, performance is very low

Fifth: Using Try Catch Exchange

Applicability: Applicable to all types

The code is as follows:

A= (function () {;
  Try{return b}
  Finally{b=a}
) ();

Brief description:

This method should be basically no one to use, there is no practical, and performance is in the bottom of the various methods

The sixth type: The first way to vary or manipulate exchange variables

Applicability: Applies to numbers or strings

The code is as follows:

A = (b = (a ^= b) ^ b) ^ A;

Brief description:

The method used in numbers or strings is more common and does not have a low performance

Seventh: XOR or operation of the Exchange variable the second way

Applicability: Applies to numbers or strings

The code is as follows:

a ^=b;
b ^=a;
a ^=b;

Brief description:

The method used in numbers or strings is more common and does not have a low performance

Eighth: the addition and subtraction of the number of operations to achieve the first way to add and subtract

Applicability: Applies only to Numbers

The code is as follows:

A = a + B;
b = a-b; 
A = A-b; 

Brief description:

This usage is not weak when used only for exchange between numbers

Nineth: The addition and subtraction of the number of operations to achieve the first way to add and subtract

Applicability: Applies only to Numbers

The code is as follows:

A = B-a + (b = a);

Brief description:

This usage is not weak when used only for exchange between numbers

Tenth: Using eval calculation

Applicability: Applies only to numbers and strings

The code is as follows:

Eval ("a=" +b+ "; b=" +a);

Brief description:

This approach is only for research, practical use

This pattern performs 10,000 times and is equal to other executions 100 million times ...

11th: In the array, the position of the two elements is exchanged using splice

Applicability: Applies only to array elements

The code is as follows:

Arr[0] = Arr.splice (2, 1, arr[0]) [0];

Brief description:

It looks elegant, but in fact it's not nearly as good as a temporary variable.

Performance comparisons for various modes of exchange

The above listed several ways have done a comparative analysis, basically can be concluded that:

Or do you honestly use back the temporary variable Exchange bar, classic, elegant, and ensure that nothing will be a moth

Performance Comparison screenshot

Analysis Results 1

The data in the screenshot below is the conclusion that has been run 100 million times in Chrome (1 million times each, 100 loops, and the results are analyzed)

As you can see, the TMP variable is exchanged fastest, try catch slowest

Analysis Results 2

The screenshot below is the result of a 1 million-time run of Chrome (supported ES6) (10,000 times each, 100 loops, and the resulting analysis)

As you can see, eval is the slowest, splice performance is low, and the TMP variable Exchange is stable

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.