Const usage and les6 compatibility |-es6 serialization 2

Hello everyone, I haven't seen you for a long time. After the introduction of es6 AND THE let statement last time, the mini series will continue to bring us a better es6.

Function of the keyword const

Const is the abbreviation of constant (constant). Const and let are used to declare variables, but const is used to declare a constant. As the name suggests, the value of a constant cannot be changed.

Features of constants

• Unchangeable

Const name = 'zhang san'; name = 'Li si'; // An error occurred while attempting to modify the constant name.

• It only works in block-level scope, which is the same as the let keyword.

If (1) {const name = 'zhangsan';} alert (name); // error, name is invalid outside code block {}

• There is no variable escalation. You must declare it before using it. This is also the same as the let keyword.

If (1) {alert (name); // error. Const name = 'zhangsan' is not declared before use ';}

• 4. The same variable cannot be repeatedly declared, which is the same as let.

VaR name = 'zhang san'; const name = 'Li si'; // An error occurred while declaring an existing variable name.

• Value must be assigned after declaration

Const name; // error. It indicates that no value is assigned.

What if a constant is an object?

Const person = {"name": "Zhang San"}; person. name = "Li Si"; person. age = 20; console. log (person); // result: normal output {name: "Li Si", age: 20}

Why? The constant person seems to have been modified. The name has been changed to "Li Si", and the age attribute has been added with the value of 20. Why is there no error and normal output, isn't it good to say that constants can't be modified? The friendship boat will be turned over, And the saying that the constant is changed will be changed. Don't worry, the friendship is still very strong.

Address assignment

First, we introduce a concept: In the assignment process, we can divide it into value assignment and address assignment. Here we use an address assignment. What is an address assignment?

Address Transfer: During the value assignment process, the variable actually stores the data address (reference to the data) rather than the original data or data copy.

• Code demonstration

VaR student1 = {"name": "Zhang San"}; var student2 = student1; student2.name = "Li Si"; console. log (student1); // result: Output {name: ""} console. log (student2); // result: Output {name: ""} // Why is the name of student2 changed to "Li Si" and student1 changed to "Li Si? This is the address assignment! How do I understand the assignment of an address? For example, if you have made an appointment for a decoration Engineer (Master Zhang) to go to your home for decoration, you told him the address of your home and he came to your home along the address. According to your requirements, make your door red. After just two days, you thought it was not easy to understand. You have found another Installer (Master Wang). You also told him the address. When Master Wang came, he also followed your requirements, the door is green. Finally, when Master Zhang or Master Wang came to your home through this address, the door must be green, because the last modification was changed to green. // Master Zhang changed your door to Red var Zhang = {"Door": "red"}; // the next day, you told Master Wang var Wang = Zhang; // Master Wang changes the door to green Wang according to the address. door = "green"; // finally, whether Master Zhang or Master Wang came to your home, the door was green console. log (Wang); // result: {Door: "green"} console is output. log (Zhang); // result: Output {Door: "green "}

After the assignment, return to the const keyword and use const to declare a constant of the object type, that is, the assignment of the object type. What cannot be modified is the address of the object in the memory, not the object itself (the address of your home is unchangeable, not the door of your home ).

Because only the person itself is modified, the name attribute is modified and an attribute age is added, and the address is not changed or changeable. Therefore, the constant cannot be modified.

• If this is the case, an error will be reported.

Const person = {"name": "Zhang San"}; person. Age = 20; person = {}; // An error occurred while attempting to assign a new value (new address) to the constant person)

Const Summary

• Most features of the const keyword are the same as those of let, but be careful when declaring an object as a constant. In addition, the concept of address assignment is explained. The example of the modifier is also appropriate. The illustrations are illustrated and the assignment is described visually.

• Const is also used to declare a constant and must be assigned a value. It cannot be modified after declaration. Like let, it only works in block-level scope. It cannot declare the same variable repeatedly and does not promote the variable, when declaring constants of the reference type, pay attention to the assignment of the address.

Browser compatibility with es6 features

• Why is es6 compatible?

Because the browser versions used by the majority of users may be finalized and released earlier than es6, but today, if we use the new features of es6 in programming, if the browser has not updated the version, or if the new version is not compatible with es6 features, the browser cannot recognize our es6 Code. For example, the browser cannot understand what the let and const I wrote are?

• Compatibility with es6 features in browsers

For es6 compatibility issues, many teams have developed a variety of Syntax Parsing and conversion tools to convert es6 syntax we have written into es5, which is equivalent to a translator between es6 and the browser. More common tool solutions include Babel, jsx, Traceur, es6-shim, etc. In addition, the browser itself is also faster compatible with the new features of es6, of which the most friendly to the new features of es6 are chrome and Firefox.

• The degree of es6 support by major conversion tools and JavaScript parsing engines can be viewed as follows:

http://kangax.github.io/compat-table/es6/

Use the Conversion Tool Babel

• Step 1: Make es6.html

<SCRIPT> const name = 'zhang san'; // use the New Keyword: const to declare the constant alert (name); </SCRIPT>

• Step 2: Test const compatibility

We can't run es6.html on the chrome ((( esesesesie ie IE, we run es6.html on IE 9, we will see this situation: "syntax error"

• Compatibility with Babel

We can use NPM to install Babel. NPM is a package management tool installed along with nodejs. The new version of nodejs has inherited NPM and we only need to install nodejs.

• Step 3: Install Node
• Step 4: Check whether node is successfully installed

# After the installation is complete, check whether the installation is successful: # click Start> RUN> cmd to enter the Command Prompt window, enter "node -- version" to check the current node version. # The following message is displayed: v4.4.5 indicates that the installation is successful because v4.4.5lts is downloaded.

• Step 5: Install Babel with NPM

# After node is installed, the NPM package management tool integrated with node is also installed. Next, we will use NPM to install the Babel we most want. # In the same way, start the Command Prompt window and enter: NPM install [email protected], and press Enter. here you have to wait for a moment: # The following interface indicates that you have successfully installed Babel, you will find the directory c: \ Users \ Lenovo \ node_modules \ Babel-core in the computer drive (where Babel is installed)

• Step 6: Use Babel

<SCRIPT src = "browser. min. JS "> </SCRIPT> <SCRIPT type =" text/Babel "> const name = 'zhangsan'; // use the newly added Keyword: const to declare the constant alert (name ); </SCRIPT> # Use browser. min. JS introduction (ensure the path of the file location is correct ). Set the type of the Second Script label to "text/Babel ".

• Step 7: Run const on the IE 9 Browser

At this time, ie9 can run our new es6 feature normally, that is, Babel conversion takes effect and converts const to code that ie9 can execute.

Const usage and les6 compatibility |-es6 serialization 2