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

In this article, the editor introduces in detail "how to use the new statement method of es6", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use the new statement method of es6" can help you solve your doubts.

New declaration methods: 1, let, used to declare variables, syntax "let variable name = value"; 2, const, used to declare constants, syntax "const constant name = value"; 3, class, used to declare classes, syntax "class class name {...}"; 4, import, used to declare statically loaded input variables.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

What is the new declaration method of es6?

There are two kinds of variables that are declared before ES5: the first is "var" that declares variables and constants. The second is the "function" that declares the function. In ES6, the method of declaring variables has been expanded to six, which can be summarized as follows:

Declare variables or constants: var, let (ES6 added), const (ES6 added)

Declare a function variable: function

Declaration class: class (new to ES6)

Declare the 'static load' input variable: import (new to ES6)

Before we learn about these new methods, we need to know a few new concepts defined by ES6:

1memlet and const

Definition:

Let: ES6 adds the let command to declare variables. Its usage is similar to var, but the declared variables are valid only in the block-level scope where the let command is located.

Const:ES6 added the const command, which declares a read-only constant. Once declared, the value of the constant cannot be changed. Variables declared like let are valid only at the block level scope

Characteristic differences:

Same: there is no variable promotion, so you can only declare and then use it. If you do not declare your use, you will report an error.

All have a temporary dead zone (TDZ), which explains why errors will be reported if you use them without declaring variables.

Repeated statements are not allowed.

Different: the variable declared by const is "immutable", so it must be assigned directly when the variable is declared, and the value cannot be changed after constant assignment, otherwise an error will be reported.

Note: the variables declared by const above are immutable for "constants" I understand as "basic data types", such as strings, numeric values, Boolean values, and so on. You can change the value when the variable we declare with const refers to the data type.

Here's the true meaning of what const saves: what const actually guarantees is not that the value of the variable cannot be changed, but that the data stored in the memory address that the variable points to shall not be changed. For simple types of data (numeric, string, Boolean), the value is stored at the memory address that the variable points to, so it is equivalent to a constant.

But for the compound type of data (mainly objects and arrays), the memory address that the variable points to is only a pointer to the actual data. Const can only guarantee that the pointer is fixed (that is, it always points to another fixed address). As for whether the data structure it points to is variable, it is completely out of control. Therefore, you must be very careful when declaring an object as a constant.

Usage:

/ / let usage let a = '123; / / const usage const b =' 456'

2,class

Definition: ES6's class can be seen as a syntax sugar, most of its functions can be done by ES5, the new class writing only makes the object prototype writing clearer, more like the syntax of object-oriented programming.

(class defines a class, in fact, it is a very important knowledge, here is simply to learn its most basic usage, but also as an introduction. In-depth study we will record in the follow-up)

Usage:

/ / the basic method defines a class class Point {constructor (XMagi y) {this.x = x; this.y = y;} toString () {return'('+ this.x +','+ this.y +')';}} var point = new Point (2Magne3) point.toString () / / the method of the expression defines a class let person = new class {constructor (name) {this.name = name;} sayName () {console.log (this.name);} ('Zhang San'); person.sayName (); / / "Zhang San"

3,import

Usage:

Once the external interface of the module is defined using the export command, other JS files can load the module through the import command.

/ / main.jsimport {firstName, lastName, year} from'. / profile.js'; function setName (element) {element.textContent = firstName +'+ lastName;}

The import command of the above code is used to load the profile.js file and enter variables from it. The import command accepts a pair of curly braces that specify the name of the variable to import from another module. The variable name in the curly braces must be the same as the external interface name of the imported module (profile.js). If you want to rename the entered variable, the import command uses the as keyword to rename the entered variable.

Import {lastName as surname} from'. / profile.js'; read here, this article "how to use the new declaration method of es6" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.

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.