Shulou(Shulou.com)06/03 Report--

This article is about how to use const in ES6. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The function of the keyword const

Const is an acronym for constant. Const, like let, is used to declare variables, but const is specifically used to declare a constant. As the name implies, the value of a constant is immutable.

The characteristics of constants

Cannot be modified

Const Name = 'Zhang San'; Name ='Li Si'; / / error, attempt to modify constant Name

It only works at the block level, just like the let keyword.

If (1) {const Name = 'Zhang San';} alert (Name); / / error, Name is invalid outside the code block {}

There is no variable promotion, and you must declare it before you use it, just like the let keyword.

If (1) {alert (Name); / / error, const Name = 'Zhang San';}

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

Var Name = 'Zhang San'; const Name ='Li Si'; / / error, declare a variable Name that already exists

Must be assigned after declaration

Const NAME; / / error, only declares no assignment. What if the constant is an object? Const Person = {"name": "Zhang San"}; Person.name = "Li Si"; Person.age = 20 position console.log (Person); / / result: normal output {name: "Li Si", age: 20}

Huh? How the constant Person seems to have been modified, name changed to "Li Si", but also added the age attribute, the value is 20; how not reported wrong, but also normal output, not said that the constant can not be modified, the friendship boat turned over, the agreed constant said to change, don't be afraid, the friendship is still very strong.

Address assignment

Let's first introduce a concept: in the process of assignment, we can be divided into value assignment and address assignment. Here we use address assignment. What is address assignment?

Addressing: during the assignment process, the variable actually stores the address of the data (a reference to the data), not the original data or a copy of the data.

Specific code demonstration

Var student1 = {"name": "Zhang San"}; var student2 = student1;student2.name = "Li Si"; console.log (student1); / / result: output {name: "Li Si"} console.log (student2); / / result: output {name: "Li Si"} / / Why is the name of student2 changed to "Li Si", and that of student1 also become "Li Si"? This is the address assignment! How to understand address assignment? For example, if you make an appointment with a decorator (Master Zhang) to decorate your house, you tell him your address, and he comes to your house along the address and turns your door red according to your request. Only two days later, you didn't think it was good-looking. You found another decorator (Master Wang), and you told him the address. When Master Wang arrived, he made the door green as you asked. Finally, whether it is Master Zhang or Master Wang, when they come to your house through this address, the door they see must be green, because the last modification is to change it to green. / / Master Zhang changed your door to red var Zhang = {"door": "red"}; / / the next day, you also told Master Wang var Wang = Zhang;//, according to the address, change the door to green Wang.door = "green"; / / finally, whether Master Zhang or Master Wang came to your house, you saw that the door was green console.log (Wang). / / result: output {door: "green"} console.log (Zhang); / / result: output {door: "green"}

After talking about addressing assignment, let's go back to our const keyword and use const to declare a constant of object type, which is called addressing assignment. What cannot be changed is the address of the object in memory, not the object itself (the address of your home, not your door).

Because only the Person itself is modified, the name property is modified and an attribute age is added, and the address is unchanged and immutable, so it does not violate the convention that the constant is immutable.

If you write it this way, you will report an error.

Const Person = {"name": "Zhang San"}; Person.age = 20 X person = {}; / / error, attempt to assign a new value (new address) to constant Person const summary

Const keyword, most of the features are the same as let, but remember to be careful when declaring an object as a constant. In addition, the concept of address assignment is explained incidentally. the example of the decorator is appropriate and illustrated in both pictures and texts to describe the address assignment vividly.

Const is also used to declare a constant and must be assigned, which cannot be modified after declaration. Like let, it only works at the block level. The same variable cannot be repeatedly declared and will not be promoted. When declaring constants of reference types, you should pay attention to address assignment.

Browser compatible with ES6 feature

Why does ES6 have compatibility issues?

Since the browser version used by the majority of users may be released earlier than the final version and release of ES6, today, if we use the new features of ES6 in programming, if the browser is not updated, or if the new version is not compatible with the features of ES6, then the browser will certainly not be able to recognize our ES6 code, just like the browser can not understand what I wrote let and const?

How to be compatible with ES6 features in browsers

In order to solve the problem of ES6 compatibility, many teams have developed a variety of syntax parsing conversion tools to convert our ES6 syntax into ES5, which is equivalent to being a translator between ES6 and the browser. The more general tool solutions are babel,jsx,traceur,es6-shim and so on. In addition, the browser itself is speeding up compatibility with ES6's new features, of which Chrome and Firefox browsers are the most friendly to ES6's new features.

For more information on the support of ES6 by major translation tools and javascript parsing engine, please see this address:

Http://kangax.github.io/compat-table/es6/ uses the conversion tool babel

Step 1: make ES6.html

Const Name = 'Zhang San'; / / use the newly added keyword: const declaration constant alert (Name)

Step 2: test const compatibility

When we run ES6.html in a chrome browser (version cannot be too low), it will run normally. When we pop up "Zhang San" and we run on IE 9, we will see something like this: "syntax error".

Compatible with it with Babel

We can use npm to install babel,npm is a package management tool installed with Nodejs, the new version of nodejs has inherited npm, we just need to install nodejs.

Step 3: install node

Step 4: check whether node is installed successfully

# after the installation is completed, we check whether the installation is successful: # Click "start"-> "run"-> enter "cmd"-> enter "cmd" to enter the command prompt window, and type "node-- version" to test the current node version. # appears: v4.4.5 indicates that the installation is successful, because we downloaded v4.4.5LTS.

Step 5: install babel with npm

# node is installed, that is, its integrated npm package management tools are also installed, and then we use npm to install the babel we want most. # similarly, we launch the command prompt window and type: npm install babel-core@5, then enter, and wait a moment: # when you see the following interface, it means that you have successfully installed babel. You will find this directory on your computer disk: C:\ Users\ Lenovo\ node_modules\ babel-core (where babel is installed)

Step 6: use babel

Const Name = 'Zhang San'; / / use the new keywords: const declares the constant alert (Name); # We introduce browser.min.js (make sure the path to the file location is correct). And set the type of the second script tag to "text/babel".

Step 7: let const run on the IE9 browser

At this point, IE9 can properly run our new ES6 feature, that is, the babel transformation works, converting const into code that IE9 can execute. Thank you for reading! This is the end of the article on "how to use const in ES6". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.