1. Variable declaration

let is used to declare a variable

• A variable is not promoted, that is, it cannot be used until it is declared

• The declaration cannot be repeated

• It has a block level scope and is only valid in the current scope

const is used to declare a constant

• The variable declaration is not promoted, that is, the variable cannot be used until it is declared

• Duplicate declarations are not allowed.

• Variables with local scope, i.e. const declaration, can only be used in the corresponding code block

• The variable declared by const needs to be assigned at the time of declaration, and can only be assigned once and cannot be modified.

// ES5 var variable declaration will be in advance
console.log(a);
var a = 1;

// ES6 let and const variables are not declared in advance. They have the concept of block level scope and are not allowed to be declared repeatedly
// const declared variables must be assigned when declared, and modification is not allowed

// 1. Variable declaration will not be in advance
// console.log(name);    // Error 1. Variable declaration will not be made in advance
let name = 'wll';
{
  let name2 = 'cjk';
  console.log('inside',name2,name);
}
console.log('external',name);

// 2. There is the concept of block level scope
for (let i = 1;i<10;i++){
  console.log(i);
}
// console.log(i);  // Error 2. There is the concept of block level scope

function myFun(){   //Function has local scope
  var age = 12;
  console.log(name);
}
myFun();
// console.log(age); // report errors

//3. Repeated declaration is not allowed
const a = 1;
// const a = true;   // Error 3. Repeated declaration is not allowed


// 4. The variable declared by const must be assigned when declared, and cannot be modified
//const c;    // If an error is reported, the variable declared by const must be assigned a value
const c = 0;
// c++;        // Error: the variable declared by const cannot be modified

2. Array deconstruction

1) Incomplete deconstruction of arrays

// Incomplete deconstruction of arrays
let [a,b] = [1,2,3];  //Results 1 2
let [a,b,c] = [1,[2,3],4];
console.log(a,b,c);   //1 [ 2, 3 ] 4
let [a,[b],c] = [1,[2,3],4];
console.log(a,b,c);     //1 2 4

2) Set deconstruction... Extension operator

// Extension operator
// ... used on the left of = to aggregate and generate new objects and arrays
// ... used on the right side of = has the function of splitting and stripping
let [a,...b] = [1,2,3]
console.log(a,b);   // Result 1 [2, 3]

3) Default value deconstruction (the default value takes effect when the matching value is strictly equal to undefined)

// Set the default value for array deconstruction. If there is a match, use the default value if there is no match
let [a,b,c] = [1,2];
console.log(a,b,c);   //Result 1 2 undefined
let [a,b,c=10] = [1,2];
console.log(a,b,c);     //Result 1 2 10
let [a,b,c=10] = [1,2,3];
console.log(a,b,c);     //Result 1 2 3

4) The default value can also be a function

function myFun(){
  console.log('function');    //Function has no return value defined
}
let [a,b,c=myFun()] = [1,2];    //c is the return value of myFun function return
console.log(a,b,c);     //1 2 undefined

3. Object deconstruction

1) Object deconstruction

Using the shorthand form of the object, the key value is omitted and the variable corresponding to the value value is retained

The variables to the left of the equal sign are placed inside braces to match the elements in the object on the right. The attributes of the object have no order. The variable must have the same name as the attribute in order to get the correct value. If the variable name and attribute name are inconsistent, it needs to be renamed

// Object deconstruction uses the shorthand form of the object, omits the key value, and retains the variable corresponding to the value value value
let {name,age} = {name:'wll',age:22};   
console.log(name,age);    //wll 22
let {name:username,age:userage} = {name:'wll',age:22};
console.log(username,userage);    //wll 22

2) Nested deconstruction

Deconstruct layer by layer, deconstruct the outermost layer first

// Nested deconstruction
let obj = {p:['hello',{y:'world'}]};
let {p:[a,{y:b}]} = obj;  //Deconstruct layer by layer, deconstruct the outermost layer first
console.log(a,b);   //hello world

3) Object deconstruction setting defaults

The default value takes effect if the property value of the object is strictly equal to undefined

// Object deconstruction setting defaults
let {name,age,gender} = {name:'wll',age:12};
console.log(name,age,gender);   //wll 12 undefined
let {name,age,gender='female'} = {name:'wll',age:12};
console.log(name,age,gender);     //wll 12 female
let {name,age,gender='female'} = {name:'wll',age:12,gender:'male'};
console.log(name,age,gender);     //wll 12 male

4) Extension of object deconstruction

// Extension of object deconstruction
let {a,...b} = {a:1,b:2,c:3};
console.log(a,b);       //1 { b: 2, c: 3 }
let {...b} = {a:1,b:2,c:3};
console.log(b);           //{ a: 1, b: 2, c: 3 }

5) Deep copy of object

Opened up a new memory space

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

6) Classic interview questions

const [a, b, c, ...d] = [1, 2, 3, 11, 999];
const { e, f,f1, g, ...h } = { f: 4, g: 5, i: 6, j: 7 };
console.log(a, b, c, d, e, f1, g, h);
//1,2,3,[11,999],undefined,undefined,5,{i: 6, j: 7}

4. String deconstruction

1) Array deconstruction can be used, and the specified characters can be obtained by using array structure

2) Use object deconstruction and object structure to obtain instance properties and methods

3) String to array (array deconstruction, extension operator)

// Strings can be deconstructed using either array [] or object {}
let [a,b,c,d,e] = 'hello';
console.log(a,b,c,d,e);   //h e l l o
let {length,toString} = 'hello';
console.log(length,toString);   //5 [Function: toString]
// String to array (array deconstruction, extension operator)
let [...arr] = 'hello';
console.log(arr);     //[ 'h', 'e', 'l', 'l', 'o' ]

5.number deconstruction and Boolean deconstruction

1) Numbers and Boolean can only use {} to deconstruct methods and properties in their prototype objects

2) You cannot use [] deconstruction because numbers and Boolean are not iterative

//Numbers and Boolean can only use {} to deconstruct methods and properties in their prototype objects
//You cannot use [] deconstruction because numbers and Boolean are not iterative
// let [a,b] = 10;   // Error is reported, and the number is not iterated
// let [a] = true;     // Error is reported. Boolean does not iterate

let {valueOf} = 10;
console.log(valueOf);   //[Function: valueOf]

let {valueOf} = true;
console.log(valueOf);     //[Function: valueOf]