Analysis of confusing variable assignment in JavaScript _ javascript skills

Source: Internet
Author: User
The confusing variable assignment in JavaScript is a weak language. To declare a variable, you do not need to declare its type. var x can be equal to any type of value.
For example:

Var str = "string ....";
Var arr = ["this", "is", "array"];
Var obj = {name: "caizhongqi", age: 26, sex: "male "};
These are all correct, which seems very simple and convenient, but this convenience will also bring some unpredictable surprises. Let's look at the example below (Example 1 ):

Script var x = "this is string ";
Var y = x;
X = "ni hao ";
Alert (y)
Script

You may suddenly know that alert is "this is string", but for Java programmers, var y = x should be the address (pointer) of x in memory) given the y variable, they thought that alert should generate "ni hao" to better comply with the Java language's habits, but this is not the case with JavaScript language. The value assignment of a string is a direct volume operation, copy data directly to the storage space of y.

Let's take a look at the following example (Example 2 ):

Script
Var x = ["hello"] // This is an array with only one element. The element is of the string type.
Var y = x;
X [0] = "world ";
Alert (y [0]);
Script

If you thought alert was "hello", it would be wrong. When var y = x, isn't x already giving its array to y? In fact, this is not the case. When var y = x, x transmits its address (pointer) in the memory )! X [0] = "world" modifies the data in the original storage location. Therefore, alert (y [0]) uses the new value of x to generate alert. Confused, right? How can I directly import the data for a while?
The following example is even more confusing (Example 3 ):

Script
Var x = ["hello"] // This is an array with only one element. The element is of the string type.
Var y = x;
X = ["ni", "hao"]; // x is a new array.
Alert (y [0]);
Script

Your eyes tell you alert is "hello "! This is a mysterious JavaScript!

Zhou xingchi's "domestic zero paint" has a similar scene:
When xingye was just running a task from Shenzhen to Hong Kong, Yuan Yongyi found a hair-blowing wind cylinder from his luggage. xingye said it was actually a shave, taking the leather shoes out, it seems to be a wind duct, and a things that looks like a big phone is actually a plane. Yuan Yongyi and the audience are confused by the slice and wind cylinder. hahahahaha, this is a movie I like very much. For the first time I saw it, I felt a stomachache.

Looking back, let's look at the variable assignment, the use of the direct amount and reference amount, as if we had to replace it with the wind cylinder, and we were all confused.
In fact, the problem lies in the second value of x = ["ni", "hao, let's take a look at the variable changes in memory and JavaScript treats the string type and object type differently:

We observe the following two situations:
Var x = "this is string ...";
Var y = ["this", "is", "string"];

The difference between x and y lies in the type. The javascript parser directly assigns a value to the string (in fact, copy) to x (direct amount), but assigns the array pointer to y (reference amount ), all of this is instantly automatic! The following figure may help you better understand the situation:



In the figure above, p1, p2... is the pointer to the variable. In var y above, y stores the pointer p1 (hypothesis) of the Object type variable, and x stores the string itself. Next, we will analyze example 3. When var x = ["hello"] is executed, the parser will open up a bucket in the memory to put this array, x obtains the address (pointer) of the space, and then executes x = ["ni", "hao"]. Then, the parser opens a new bucket to store the new array, x is the pointer to the new bucket. That is to say, the redefinition (or re-assignment) of variables in JavaScript will open up a new bucket without destroying the original space; let's look at example 2, x [0] = "world". This sentence does not define a new value for x, but does not create a new bucket. It only modifies the data in the bucket, therefore, in example 2, "world" is generated by alert. In example 1, the string value is assigned, and the whole process is a direct volume operation.

From the above analysis, we can see that JavaScript variables can store both the direct amount and the pointer, which cannot be disturbed by humans. Therefore, you need to pay attention to these problems in daily coding, for example, the execution efficiency of a program can be directly affected by details such as the large string connection and the assignment in the loop.

Let's look at two examples:

Var _ tmpStr = "";
Var str = "this is big string ...";
For (I = 0; I <100; I ++ ){
_ TmpStr + =;
}
A = _ tmpStr;

Because it is a string operation that uses a direct amount, each loop must operate a large string, which is very bulky and inefficient. If you use the Reference Usage operation, you can use the array:

Var str = "this is big string ...";
Var _ tmpArray = [];
For (I = 0; I <100; I ++ ){
_ TmpArray [I] = str;
}
Str = _ tmpArray. join ("");

In a test, if there is a 2600 K string that can be directly connected, it will take about 150 milliseconds on my machine. If I connect to the machine using arrays, it will take milliseconds, the efficiency is several times different.

It took me a long time to write such a long article.

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.