Let, Const, Destructuring assignment

1. Declares variable a by ‘let’

   let is the new way to declare variables in ES6, replacing var.

   let a;
   let b, c, d;
   let e = 100;
   let f = 521, g = 'iloveyou', h = []; 

   var: allows repeated declarations, declaration promotion, and automatic declaration.

   let: No duplicate declarations allowed, no declaration hoisting. Only valid in block scope. Temporary dead zone.

   
   

   Block scope: A {} is a block scope. Common: if, for, and functions.

   ​ Notice:

   1. {{}} This kind of nested block-level scope, variables declared by let in the outer {} are also valid in the inner {{}}. This is because the inner {{}} is also part of the outer {} block scope. (Global variables are also valid in the local scope)

   2. In the for loop, let is written outside {}, such as for(let a=0; a<n; a++){}, but due to the internal processing of the for loop, the element declared by let is actually in the The following {} block scope is defined. And, every time the loop is looped, a new let a (new value) is generated, and a new {} block-level scope is also generated. Therefore, for loops have several {} block scopes a few times.

      Example 1: var

      var a=[];
      for(var i=0; i<10; i++){
           a[i] = function(){
               console.log(i)
           };
      }
      a[6]()//The output is 10. This is because var a is a global variable, i will increase every time you run, and finally add to 10, that is, output 10.

      Example 2: let

      var a=[];
      for(let i=0; i<10; i++){
           a[i] = function(){
               console.log(i)
           };
      }
      a[6]()//The output is 10. Because let generates 10 {} block scopes, the i declared by each let is only valid within its block scope (not globally)

   
   

   Temporary dead zone: let-declared variables are automatically bound to the current block-level scope. That is, if there is a let declaration variable in a block-level scope, it can only be used in this block-level scope, and external variables with the same name cannot be used. Example:

   var tmp = 123;
   if(true){
   tmp = 'abc';
        let tmp;
   }//The output is an error. Because tmp is not declared.

​

2. const declare constants

   A constant declared by const cannot be modified, and is used to prevent the constant from being accidentally changed.

   The initial value must be assigned when const is declared. Const constants generally use uppercase (unspoken rule).

   const can be used for: regular expressions, username/password, elements of document.getElementBy… during DOM manipulation, etc. Another code style is to use const whenever indeterminate.

   For element modification of arrays and objects, it does not count as constant modification, and no error will be reported. Because the address of the constant has not changed.

   const TEAM = ['Ali','Neil','Tom','Tony'];
   TEAM.push('Ben'); //correct syntax
   TEAM = 100; //Error

   
   

3. Array destructuring assignment

   Destructuring assignment can be used to declare multiple variables. The syntax is:

   let [a, b, c] = [1, 2, 3] // same as let a=1; let b=2; let c=3;

   That is, the left side of let is an array of variables, the right side is an array of data, and the structures on both sides should be the same.

   Notice:

   1. If the number of variables and data on both sides of let do not match, match them one by one from left to right. A variable whose destructuring failed is undefined.

   2. Commas can take place.

      let [ , , a] = [1, 2, 3] //a=3

   3. In the case of nesting in destructuring assignment, as long as the nested structure on both sides is the same, it can be successfully matched.

   4. Destructuring assignment can be used to exchange data between two variables, such as:

      [x, y] = [y, x]

   
   

4. Object destructuring assignment

   const stu1 = {
       name:'tom';
       age:18;
       ability: function(){
           console.log("I can eat");
       }
   }
   let {name, age, ability} = stu1;

   continuous destructuring assignment

   const {keyWordElement:{value}} = this //You can get the value of this.keyWordElement.value, that is, multiple properties

   Multiple properties can be assigned with continuous destructuring, but note that the intermediate property keyWordElement is not defined here.

   Destructuring assignment and renaming

   //method 1
   let obj = {a:{b:1}};
   const {a:{b:data}} = obj; // old name: new name
   //method 2
   const {keyWordElement:{value:keyWord}} = this //some experienced programmers will write this

   
   

5. Extensions to Strings: Template Strings

   `` to write strings, allowing newlines. Write variables in ${} without splicing.

   
   

6. Shorthand for object

   ES6 allows variables and functions to be written directly inside curly brackets as object properties and methods

   let name = 'Web age';
   let change = function(){
        console.log('I can change you');
   }
   
   const school = {
        name, // same as name: name
        change, //equivalent to change: change
        improve(){ //same as improve: function(){}
            console.log('I can improve your skills');
        }
   }