Relearn es6 Article 2.1

1, es6 proposes many new Grammars: the following is the introduction:

  1. let and const commands:
  2. Deconstruction and assignment of variables
  3. Extension of operator

In es5, there is only one way to declare variables, that is, through var. es6 adds two new ways to declare variables.

1.1  //Declare variables through let
      console.log(name); //Uncaught ReferenceError: Cannot access 'name' before initialization
      let name = "yz";
      console.log(name); //yz
  1. The variable declared in let mode does not have variable promotion, and is only valid in the current code block.
 for (let i = 5; i < 10; i++) {
       //Variables declared through let are only valid in the current for loop. If they are not printed outside, an error will be reported
 }
   console.log(i);//Uncaught ReferenceError: i is not defined
      var a = [];
      for (var i = 0; i < 10; i++) {
        a[i] = function () {
          console.log(i);
        };
      }
      a[6]();
      //No matter which array is called, the digital print result is 10, indicating that the variables declared by var are global,
      //Each time it points to the same global variable.
      
       var a = [];
      for (let i = 0; i < 10; i++) {
        a[i] = function () {
          console.log(i);
        };
      }
      a[6]();
      //Change to let. The current variable i is only valid in this cycle. Each time i is a new variable, all printed results are normal.
You can see the internal loop variable i And cyclic variables i Not in the same scope. Otherwise i You can't output 5 times. You can also see that the loop body is a separate scope.
The part of the setup loop is also a separate scope.
      for (let i = 0; i < 5; i++) {
        let i = 666;
        console.log(i); //Output 5 times 666
      }

2. There is a temporary dead zone and cannot be declared repeatedly, and there is a block level scope

  //Variables are declared through let, and there is a temporary dead zone. And block level scopes cannot be declared and exist repeatedly
      var temp = "123";
      if (true) {
        temp = "456";
        let temp
      }
  console.log(temp);//test.html:14 Uncaught ReferenceError: Cannot access 'temp' before initialization
      The global is declared above tmep Declared inside the block again temp,Makes it a block level scope,Assigning a value to it before the declaration results in an error.
 ES6 Clearly, if there is let and const Commands. The variables declared by this block for these commands form a closed scope from the beginning. If these variables are used before declaration, an error will be reported. 
      if (true) {
         x=5 
        console.log(x);  //An error will be reported. let declares that the variable does not have promotion and there is a temporary dead zone. If it is not declared for use, an error will be reported.
        let x;
      }
The essence of temporary deadband is that as soon as you enter the current scope, the variable to be used already exists, but cannot be obtained. You can obtain and use the variable only when the line of code declaring the variable appears.

      let x=5
      let x=6
      console.log(x);//Uncaught SyntaxError: Identifier 'x' has already been declared
      Duplicate declarations are not allowed      

There are only global scope and function scope in es5. The following problems will occur
1. Internal variables will overwrite external variables

     var name = "yz";
      function fn() {
        console.log(name);
        if (true) {
          var name = "hello";
        }
      }
      fn(); //undefined / / causes the variable to be promoted, and the internal variable overrides the external variable

//There is a block level scope, and the output result is 5
   function f1() {
        let n = 5;
        if (true) {
          let n = 10;
        }
        console.log(n); // 5
      }
      f1()

2. Block level scope and function declaration
ES5 stipulates that functions can only be declared in the top-level scope and function scope, not in the block level scope. ES6 introduces block level scope, which explicitly allows functions to be declared in block level scope. ES6 stipulates that in the block level scope, the behavior of the function declaration statement is similar to that of the let and cannot be referenced outside the block level scope.

1.2 declare constants by const:

   //Constant values declared by const cannot change. Const also has block level scope and temporary deadband, and cannot be declared repeatedly
      const a = 6;
      a = 5555;
      console.log(a); //test.html:12 Uncaught TypeError: Assignment to constant variable.

const declares the nature of constants:
For basic data types, they are stored in stack memory, and their address is their value, so we can't change the value. For complex data types, they are stored in heap memory, and we just point to its address through a pointer. As long as the pointer does not change, you can add or delete values for it.

1.3 global object of javascript:
The javaScript language has a top-level object that provides a global environment (i.e. global scope) in which all code runs. However, top-level objects are not unified in various implementations.

In the browser, the top-level object is window, but Node and Web Worker do not have window.
In the browser and Web Worker, self also points to the top-level object, but the Node does not have self.
In Node, the top-level object is global, but other environments do not support it.
In order to get the top-level object in various environments, the same code now generally uses the this keyword, but it has limitations.
In the global environment, this returns the top-level object. However, this in the Node.js module returns the current module, and this in the ES6 module returns undefined. This in the function, if the function is not run as a method of the object, but simply as a function, this will point to the top-level object. However, in strict mode, this will return undefined. Whether in strict mode or normal mode, new Function('return this') () always returns global objects. However, if the browser uses CSP (Content Security Policy), eval and new Function may not be available.
It's hard to find a way to get the top-level object in all cases. Here are two barely usable methods.

// Method 1
(typeof window !== 'undefined'
   ? window
   : (typeof process === 'object' &&
      typeof require === 'function' &&
      typeof global === 'object')
     ? global
     : this);

// Method 2
var getGlobal = function () {
  if (typeof self !== 'undefined') { return self; }
  if (typeof window !== 'undefined') { return window; }
  if (typeof global !== 'undefined') { return global; }
  throw new Error('unable to locate global object');
};

1.4 ES5 has only two methods to declare variables: var command and function command. ES6 adds not only let and const commands, but also import and class commands. Therefore, ES6 has six methods to declare variables.

Keywords: Javascript Front-end Ajax

Added by vitorjamil on Wed, 01 Dec 2021 16:07:29 +0200