What are the new declaration methods in es6?

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

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

What are the new declaration methods in es6

There were two types of declaring variables before ES5: the first was "var" for declaring variables and constants. The second is to declare a "function" of a function. In ES6, the methods of declaring variables have been expanded to 6 ways, which are summarized as follows:

Declaring variables or constants: var, let (new in ES6), const (new in ES6);

Declaration of function variable: function;

Declaration of class: class (new in ES6);

Declaration of 'static loading' input variable: import (new in ES6);

Before we learn these new methods, we also need to know several newly defined concepts of ES6:

1, let and const

Definition:

let: ES6 adds a new let command to declare variables. Its usage is similar to var, but the declared variable is only valid within the block-level scope where the let command is located.

const: ES6 adds a new const command to declare a read-only constant. Once declared, the value of a constant cannot be changed. Variables declared like let are only valid within the block-level scope;

Feature differences:

Same: There is no variable promotion, so it can only be used after declaration. If not declared, an error will be reported. ;

## all have temporary dead areas (TDZ), which also explains why the variables are not declared to report an error;

Notable declarations are allowed;

Different: Different: Variables declared by const are "unchangeable" variables, so they must be assigned directly when declaring the variable. The value cannot be changed after constant assignment, otherwise an error will be reported;

Note: What we said above is that variables declared by const cannot be changed. For "constants", I understand it as "basic data types", such as strings, numeric values, Boolean values, etc. It does not refer to all data types. When the variable we declare with const is a reference data type, the value can be changed.

Here we talk about the true meaning of the content saved by const: What const actually guarantees is not that the value of the variable cannot be changed, but that the data stored in the memory address pointed to by the variable cannot be changed. For simple types of data (numeric values, strings, Boolean values), the value is stored at the memory address pointed to by the variable, and is therefore equivalent to a constant.

But for composite type data (mainly objects and arrays), the memory address pointed to by the variable only stores a pointer to the actual data. Const can only guarantee that this 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 用法
let a = '123';
 
// const 用法
const b = '456'

2, class

Definition: ES6 class can be regarded as just a syntax sugar, most of its functions, ES5 can do it all. The new class writing method just makes the writing method of object prototype clearer and more like the syntax of object-oriented programming.

(class defines a class, which is actually a very important piece of knowledge. Here we just briefly learn its most basic usage, and also serve as an introduction. We will record the in-depth study later)

Usage:

// 基本方法定义一个类
class Point{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
 
    toString(){
        return '( '+ this.x +','+ this.y +')';
    }
}
 
var point = new Point(2,3)
point.toString(); // (2,3)
 
 
// 表达式的方法定义一个类
let person = new class {
  constructor(name) {
    this.name = name;
  }
 
  sayName() {
    console.log(this.name);
  }
}('张三');
 
person.sayName(); // "张三"

3. import

Usage:

After using the export command to define the external interface of the module, other JS files You can load this module through the import command.

// main.js
import { 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 input variables from it. The import command accepts a pair of curly brackets, which specify the variable names to be imported from other modules. The variable name inside the curly brackets must be the same as the name of the external interface of the imported module (profile.js). If you want to rename the input variable, use the as keyword in the import command to rename the input variable.

import { lastName as surname } from './profile.js';

[Related recommendations: "

vue.js tutorial"]

The above is the detailed content of What are the new declaration methods in es6?. For more information, please follow other related articles on the PHP Chinese website!