Summary of variable declaration, deconstruction and assignment of ES6


1. Use of let

1. methods for declaring variables (let and const)

let and const commands are new syntax in es6

Function: it is used to declare variables that have the same function as var, but the declared variables are only valid in the code block where the let command is located

1.let can be re assigned within the agreed scope but cannot be declared repeatedly
2.const declares that constants cannot be redeclared or reassigned after declaration.
1. block level scope {}
2. no claim promotion
3. repeated declaration is not allowed (including ordinary variables and function parameters)

Variable binding

//1. Variables declared by a let only work within the scope of the let (variable binding)
var a = 123;
    a = 456;
    Proceed below let statement
     let a;

Local scope (function keyword)

//Generally, if we need a variable to work within the specified scope, we need to use the function keyword to build a local scope
    var a = 1;

Block level scope

//However, in the case of ES6, it is introduced that a block level scope can be formed as long as {} exists for the let, whether it is an if structure or a for loop structure, as long as {} exists
//A block level scope is formed
     let s = 8;

The problem of variable promotion for var declaration variables

//Requirement: print the current time in real time during function call
//If the var declaration {} in the if structure cannot form a block level scope, the variable declaration in the if structure will overwrite the global variable declaration
//So the printed undefined
 //Solution: use let to declare variables in the if structure to form a block level scope in the if structure
        var time = new Date();
        function fn(){
        if (false) {
        //var time = "tomorrow is the Dragon Boat Festival";
        let time = "Tomorrow is the Dragon Boat Festival";
     /*function fn(){
            var time;
            if (false) {
                time = "Tomorrow is the Dragon Boat Festival ";


        //(3) Leakage of loop variables into global variables in the for loop
        for(var i = 0;i<5;i++){

A major feature of js language:

A single thread does only one thing at a time

Task queue:

All tasks need to be queued up before the first task can be executed

Event cycle:

The main thread will repeatedly fetch the task from the task queue to read the task (Event Loop). When an asynchronous task is completed or an event is triggered
Then the corresponding callback function or function body will be pulled to the main thread for execution

2. Deconstruction assignment

What is deconstruction?

We generalize it as follows: according to a certain pattern, extract values from arrays and objects, and assign values to variables.
Moreover, in essence, deconstruction assignment is pattern matching.
Here is an example:

//Basic assignment method:
var a = 1,b = 2, c = 3 ;
         var a = 1 ;
         var b = 2 ;
         var c = 3 ;

        //Destructuring assignment 
         var [a,b,c] = [1,2,3];

In other words, if you want to successfully deconstruct the assignment, you must ensure that the patterns on both sides are exactly the same.
Well, here comes the problem. What if the deconstruction fails??

let [r] = [];
console.log(r);//undefined means that var does not assign values after declaring variables
 var a;

Well, our conclusion is: if the deconstruction is unsuccessful, the value of the variable is equal to undefined
At this point, we still need to know what is__ Incomplete deconstruction?
Incomplete deconstruction: it means that the patterns on the left and right sides of the equal sign are the same, but only part of the data on the right is matched
For example:

let [x,y] = [1,2,3];

Therefore, we will find that the deconstruction assignment can also be performed in the case of incomplete deconstruction, except that the array with the following values has more numbers
In addition, we should also note that if the right side of the equal sign is not an array, an error will be reported because the modes are different

// let [m] = 1;
        // let [m] = false;
        // let [m] = null;
        // let [m] = {};
        // Console Log (m)// {} is not iteratable because {} cannot iterate with Subscripts

What about the deconstruction assignment of objects?

let {a,b} = {a:" aaa" ,b:" bbb" };//a=aaa ,b=bbb
let {a:b} = {a:" aaa" };//a=aaa 
let{a,b= 5}= {a: 1};//a=1,b=5

[summary of points needing attention]:
1. the default value can be set for the deconstruction assignment. However, if the default value is to be enabled, the value of this variable must be strictly equal to undefined
2. if the default setting is an expression, the expression will only operate when the default value needs to be enabled
3. other variables can be used for the default value, but the precondition is that the assigned variable must be declared in advance

3. Template string

var stu = {
            name : "lisa",
            age : 12,
            place : "Wuhan, Hubei",
            grade : 6
        document.querySelector("p").innerHTML = "My name is"",This year"+stu.age+"Years old, I live in"",Last year"+stu.grade+"grade";
        document.querySelector("p").innerHTML = "My name is"",This year"+stu.age+"I live in"",Last year"+stu.grade+"grade";

Disadvantages of splicing strings:
1. the splicing is too troublesome and needs to be divided for many times, which is not convenient for maintenance
2. all spliced strings can only be displayed on one line, which is too long
So in ES6, we use the template string.
So, how to use the template string?
1. embed variables or expressions directly into strings
2. use backquotes (``) to splice multiline strings
Embedded variable

let obj = {"name" :"john","age":20};
let{name,age} . obj;
console . log( `${name }My age is ${age}` );

Embedded expression (using the previous case)

//You can put any js expression in ${} for operation
        function age (num){
            return num -1;

        document.querySelector("p").innerHTML = `My name is ${},This year ${stu.age}Years old, I go ${stu.grade -1},I live in ${}`;

4. Arrow Function

1. only 1 expression is included
2. contains multiple statements
3. The direction of this

/*var foo = function(){
	return 1 ;
console. log(foo());*/


let  foo=()=>1;
let  foo = (a)=>{
let  b=10;
return a+b;
console . log(foo(10));//20

5. set structure and map structure

set structure

let set = new Set([1,2,3,4,4]); 

Constructor, no duplicate values

element meaning
[...set] ... extend the operator to convert a class array object to a comma separated sequence
for of ergodic
set.size length
set.add(0) Add a new element
set.delete(0) Delete an element
set.has(0) Indicates whether the current element contains an element
set.clear() Empty structure

keys (): the traverser that returns the key name

for (let item of set.keys()) {

values(): the iterator that returns the key value
entries(): returns the traversal of key value pairs
forEach (): use the callback function to traverse each member

set.forEach((value, key) => console.log(value * 2));

map structure

let map = new Map([["name","john"],["age",30]]);

Map Size / / length
keys(): the traverser that returns the key name
values(): the iterator that returns the key value
entries(): returns the traversal of key value pairs

for (let [key, value] of map.entries() ){ console.log(key, value); }

forEach(): use the callback function to traverse each member

map.forEach((value, key) => console.log(value*.2))

Posted by Liam-PHP on Wed, 01 Jun 2022 23:39:42 +0530