ES6 -- let const Symbol deconstruction assignment

1, let const

(1) let

1. Declared variables can only be valid within the current scope (the scope is {})

var is valid in the global scope (because the variables declared by var are on the whole object of Windows)

example:

Because the let will be invalid if it lists the current scope, each time the for loop goes, it is equivalent to a code scope. The next loop is another code scope.

The variable i is declared with var and is valid in the global range, so there is only one variable i in the global. In each cycle, i in the setTimeout timer refers to the global variable i, and the ten settimeouts in the cycle are executed after the end of the cycle, so i at this time is 10.

The variable J is declared with let. The current j is only valid in this cycle. In fact, j in each cycle is a new variable. Therefore, j in the setTimeout timer is actually a different variable, that is, the final output is 12345.
(if the variable j of each loop is redeclared, how do you know the value of the previous loop? This is because the JavaScript engine will remember the value of the previous loop.).

2. The declaration cannot be repeated. It can only be declared once

3. There is no variable promotion, otherwise an error is reported

(2) const

(1) All declared variables are constants (read-only variables that can only be read and cannot be set)

const declares a read-only variable and cannot be changed after declaration. It means that once declared, it must be initialized, otherwise an error will be reported.

How does const prevent variables from changing after declaration initialization?
In fact, const does not guarantee that the value of the variable remains unchanged, but that the data stored at the memory address pointed to by the variable cannot be changed. At this point, you may have thought that simple types and composite types save values differently. Yes, for simple types (numeric number, string, boolean), the value is stored at the memory address pointed to by the variable, so the simple type variable declared by const is equivalent to a constant. For complex types (object, array, function), the memory address pointed to by variables actually stores a pointer to the actual data, so const can only ensure that the pointer is fixed. As for the data structure pointed to by the pointer, it cannot be controlled. Therefore, be careful when using const to declare complex type objects.

*If you define an object with const, can you modify the properties of the object?
sure!

(2) Temporary dead zone

That is, the area from the beginning of the code block to the completion of the variable declaration statement

If there are variables declared by let and const commands in the code block, the block forms a closed scope for these variables from the beginning. These variables cannot be accessed (obtained or set) until the declaration statement is completed, otherwise an error will be reported

2, Deconstruction assignment

That is, the same structure corresponds to the assignment

Learn more about: ES6 - variable deconstruction assignment

1. Array deconstruction assignment

  • Extended operator
    [break an array into a pile of values]
    (only for array like objects with the Iterator interface deployed)

Take the array as a single value:

let arr=[1,2,3,4,5];
console.log(...arr);  //1 2 3 4 5

Note: the extension operator used in Deconstruction assignment can only be placed at the end

let [a,b,...c]=[1,2,3,4,5,6];
console.log(a, b, c);  //1 2  (4) [3, 4, 5, 6]
  • Default deconstruction value

2. Object deconstruction assignment

(1) The internal mechanism of object deconstruction assignment is actually to find the attribute with the same name first, and then assign it to the variable with the same name. It is the latter, not the former, that is really assigned.

	var {foo:baz} = {bar:"mouse",foo:"lion"};
	console.log(baz); //lion
	console.log(foo); //error:foo is not defined

(2) In es6, when key and value are consistent, they can be abbreviated

	var {a,b} = {b:"cat",a:"dog"};
	console.log(a); //dog
	console.log(b); //cat

Is the following abbreviation:

	var {a:a,b:b} = {a:"dog",b:"cat"};
	console.log(a); //dog
	console.log(b); //cat

(3) Object structures can also use extension operators

    let {a,b,...c}={a:1,b:2,c:3,d:4};
    console.log(a, b, c);  //1 2 {c: 3, d: 4}

3. Function deconstruction and assignment

(1) Pass array parameters

    let method=function(a,b,c){
        console.log(a, b, c);
    }
    let arr=[1,2,3];
    //Method 1
    method(...arr);  //1 2 3
    //Method 2
    method.apply(null,arr);  //1 2 3

(2) Multilayer array

    let arr=[[1,2],[3,4],[5,6]];
    arr.map(function ([a,b]) {
        console.log(a, b);
    })

4. Variable declaration cannot be used ()

That is, when deconstructing the assignment declaration variable, parentheses cannot be used to the left of the equal sign

3, New data type Symbol

The declared variable is unique and is mainly used to define the unique attribute name of the object

I think its emergence is mainly to solve the problem of possible global variable conflicts

1. Unique

    let sym=Symbol("abc");
    let sym1=Symbol("abc");
    console.log(sym,sym1);  //Symbol(abc) Symbol(abc)
    console.log(sym == sym1);  //false

2. Use of symbol in objects

(1) Method 1 normal operation

    let sys=Symbol('name');
    let obj={};
    obj[sys]="Unique value";
    console.log(obj);  //{Symbol(name): 'unique value'}
    
    //You cannot get a value directly from an object. Property
    console.log(obj.sys); //undefined
    console.log(obj[sys]);  //Unique value

(2) Method 2 literal operation

let syObject = {};
syObject[sy] = "kk";
 
syObject[sy];  // "kk"
syObject.sy;   // undefined

Symbol cannot be used as the object property name. Instead, square brackets should be used.
Because the. Operator is followed by a string, the string sy attribute is obtained instead of the Symbol value sy attribute.

    /*let sys=Symbol("list");
    let obj={
        sys:'abc'  //It doesn't parse
    }
    console.log(obj);  //{sys: 'abc'}*/
    
    //Object attribute literal (the attribute of the object is a variable)
    let sys=Symbol("list");
    let obj={
        [sys]:'abc'   //The object attribute is a variable, which can be resolved directly []
    }
    console.log(obj);  //{Symbol(list): 'abc'}

(3) Method 3: native js operation

Object.defineProperty() method
A new property will be defined directly on an object, or an existing property of an object will be modified and the object will be returned

Object.defineProperty(obj, prop, descriptor)
Parameter: (1) obj: object to define attribute.
(2) prop: name or Symbol of the attribute to be defined or modified.
(3) Descriptor: the property descriptor to define or modify.
Return value: the object passed to the function

In ES6, because of the particularity of Symbol type, using the value of Symbol type as the key of the object is different from the conventional definition or modification, and Object.defineProperty is one of the methods to define the key as the attribute of Symbol

    //Assignment of object attributes through native js operations
    let sys=Symbol('list');
    let obj={};
    Object.defineProperty(obj,sys,{
        value:"Unique value"
    })
    console.log(obj); //{Symbol(list): 'unique value'}

3.Symbol.for()

Symbol.for() is similar to the singleton mode [return only once]
First, whether the string parameter is used as the Symbol value of the name in the registered Symbol will be searched globally. If so, the Symbol value will be returned;
If not, create and return a Symbol value with the name of the string parameter, and register it in the global environment for search

    //When creating a value, go to the global environment to find whether the current value has been created
    // If it has been created, the value is returned directly
    // If the global environment is not created, return
    let sys=Symbol('abc');
    console.log(sys);  //Symbol(abc)
    
    let sys1=Symbol.for('abc');
    console.log(sys1);  //Symbol(abc)
    console.log(sys === sys1); //false
    
    let sys2=Symbol.for('abc');
    console.log(sys1 === sys2); //true

4.keyFor

    //keyFor monitors whether the symbol value has been registered before
    //If it has been registered, the returned value will be returned. If it has not been registered, it will directly return undefined
    let sys=Symbol.for("abc")
    console.log(Symbol.keyFor(sys));  //abc
    console.log(Symbol.keyFor(Symbol('ABC'))); //undefined

5.description get the description directly through the attribute

    let sys=Symbol('abc');
    console.log(sys.toString());  //Symbol(abc)
    console.log(String(sys));  //Symbol(abc)

    //es9 gets the description directly through the attribute
    console.log(sys.description);  //abc

Keywords: Javascript ECMAScript

Added by dayang on Mon, 13 Sep 2021 21:30:02 +0300