What are the ways to declare variables in es6

Methods to declare variables: 1. Use the var command with the syntax "var variable name;"; 2. Use the function command; 3. Use the cosnt command with the syntax "const variable name;"; 4. Use the let command , the syntax is "let variable name"; 5. Use the import command; 6. Use the class command.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

ES5 has only two ways to declare variables: the var command and the function command.

ES6 In addition to adding the let and const commands, there are two ways to declare variables: the import command and classCommand.

So, ES6 has a total of 6 ways to declare variables.

(1) var command

var a ;　　//undefined
var b = 1;

• The variables defined by var can be modified. If not initialized, ## will be output. #undefined, no error will be reported
The variable declared by var is on the window. Use let or const to declare the variable. This variable will not be placed on the window.
• In many languages There is a block-level scope, but JS does not. It uses var to declare variables and use function to divide the scope. Curly brackets "{}" cannot limit the scope of var, so variables declared with var have
• Variable promotionEffect
The variable scope declared by var is global or function-level

(2)function command

function add(a) {
　　var sum = a + 1;
　　return sum;
}

declares a new variable named add and assigns it a function definition. The content between
• {} is assigned to add
• The code inside the function will not be executed, but will be stored in variables for future use

(3) cosnt command

const a;     //报错，必须初始化
const b = 1;

Variables defined by const cannot be modified and must be initialized
• The variable is a global variable, or a global variable within the module
• If a variable is only declared when it is declared If a value is assigned once and will never be reassigned in other lines of code, then const should be used, but the initial value of the variable may be adjusted in the future (constant variable)
• Create a read-only constant, It appears to be unmodifiable on different browsers; it is recommended not to modify it after declaration; it has block-level scope
• const represents a value
• constantindex, that is to say , the pointer of the variable name in memory cannot be changed , but the value pointing to this variable may change
const-defined variables cannot be modified, generally in require a module When using or defining some
• global constants
• , you can declare constants in the global scope or within a function, but

  must initialize the constants

• Constant cannot have the same name as other variables or functions in its scope

(4) let command

let a;　　//undefined
let b = 1; 
function add(b) {
　　let sum = b + 1;
　　return sum;
}
let c = add(b);

Requires "javascript strict mode":
• 'use strict';
There is no variable promotion
• Duplicate declarations are not allowed
The variable scope declared by let is in the block-level domain. After the let is defined inside the function, it has no impact on the outside of the function (
• Block-level scope)
You can declare variables in When assigning a value to a variable, the default value is undefined. You can also assign a value to the variable later in the script. It cannot be used before life (temporary dead zone)

(5) import Command

1. ES6 introduces its own module system. Export through export and import through import.

2. Different from CommonJS, it obtains the reference of the module, and the value is not actually obtained until it is used.

3. For example, in js:

  let student = [
    {
      name: 'xiaoming',
      age: 21,
    },
    {
      name: 'xiaohong',
      age: 18
    }
  ]
  export default student; // 这种导出方式，你可以在import时指定它的名称。

4. In app.js, we can use it like this:

  import StudentList from './student.js'; //指定名称
  console.log(StudentList[0].name); //xiaoming

(6) class command

1: Class is the syntactic sugar of es6, and it can actually be implemented in es5.

  class Point {
    constructor (x, y) {
      this.x = x;
      this.y = y;
    }
    toString () {
      return this.x + ',' + this.y;
    }
  }

//上面是一个类
  Object.assign(Point.prototype, {
    getX () {
      return this.x;
    },
    getY () {
      return this.y;
    }
  })
  let p1 = new Point(1,2);
  console.log(p1.toString()); //1,2
  console.log(p1.getX()); //1
  console.log(p1.getY()); //2
  console.log(Object.keys(Point.prototype)); // ["getX", "getY"]

• No comma separation is required between methods

• toString () {} is equivalent to toString: function () {}

• You can still use Point.prototype

• You can extend many methods at once with Object.assign()

• Most of the methods defined inside the class cannot be enumerated

• constructor(){} is a default method. If it is not added, an empty one will be automatically added.

• constructor默认返回实例对象（this），完全可以指定返回其他的对象。

• 必须用new调用

• 不存在变量提升

• 当用一个变量去接受class时，可以省略classname

• es6不提供私有方法。

2：使用extends继承

class ThreeDPoint extends Point {
    constructor (x, y, z) {
      console.log(new.target); //ThreeDPoint
      super(x, y);
      this.z = z;
}
    toString () {
      return super.toString() + ',' + this.z;
    }
    static getInfo() {
      console.log('static method');
    }
    get z() {
      return 4;
    }
    set z(value) {
      console.log(value);
    }
}
  ThreeDPoint.getInfo(); // "static method"
  let ta = new ThreeDPoint(2,3,4);
  console.log(ta.toString()); //2,3,4
  console.log(ta.z); // 4
  ta.z = 200; // 200
  console.log(Object.getPrototypeOf(ThreeDPoint)); //Point

• constructor中必须调用super,因为子类中没有this,必须从父类中继承。

• 子类的__proto__属性总是指向父类

• 子类的prototype属性的__proto__总是指向父类的prototype

• Object.getPrototypeOf()获取父类

• super作为方法只能在constructor中

• super作为属性指向父类的prototype.

• 在constructor中使用super.x = 2，实际上this.x = 2;但是读取super.x时，又变成了父类.prototype.x。

• 原生构造函数是无法继承的。

• get set 方法可以对属性的赋值和读取进行拦截

• (静态方法不能被实例继承。通过static声明

• 静态属性只能 ThreeDPoint.name = “123” 声明 （与static没什么关系）

【推荐学习：javascript高级教程】

The above is the detailed content of What are the ways to declare variables in es6. For more information, please follow other related articles on the PHP Chinese website!