An overview of

ES6 allowed according to certain mode, to extract value from an array and the object, to value assignment of variables, this is called the deconstruction (1) the deconstruction assignment is an extension of the assignment operator (2) he is an array or object for pattern matching, and (3) of the variable assignment in writing code is concise and easy to read, semantic more clear; It also facilitates data field retrieval in complex objects

Two attention

(1) The pattern on both sides of the = sign should be the same. Arrays are arrays and objects are objects

Two Methods of use

(1) Array deconstruction

'One-dimensional array deconstruction'
let [value1, value2, value3] = ['a'.'b'.'c']
// value1 => a
// value2 => b
// value3 => b   
Copy the code
'Two dimensional array deconstruction'     
let [value1, [value2,value3]] = ['a'['b'.'c']]
// value1 => a
// value2 => b
// value3 => b
Copy the code

(2) Object deconstruction

The keys on the left of the equals sign need not be in the same order as the keys on the right, but the keys must be the same

'Complete structure of the object'
let { age, name, sex } = {name:'qinsimin'.age:18}  
// age => 18
// name => qinsimin
// sex => undefined
Copy the code
'Incomplete structure of object'
let { name } = {name:'qinsimin'.age:18}  
// name => qinsimin
Copy the code
'Nested structure'
let {p: [x, { y }] } = {p: ['hello', {y: 'world'}}]// x => hello
// y => world	
Copy the code

(3) Attribute renaming

As a serious front-end program ape, we in the development process, often encounter the background to our return of the data total certain field name, not elegant and also very long, it happens that we need more than one place to use the variable, irritating…. Teh… Normally we would let xx = res.xxxxxxxxxx like this, but this makes our front-end code less elegant. For a front-end with a high level of code cleanliness, this is definitely not allowed… At this point, the “deconstruction” of ES6 provides us with a good solution. See below ~~~

let { workingWriteTime: time } = {workingWriteTime:"2020-12-12".desc:"Javascript is the worst language in the world."}
// time => 2020-12-12
Copy the code

(4) String deconstruction

let [str1, str2, str3] = 'abc'
// str1 => a
// str2 => b
// str3 => c	
Copy the code

(5) Default value

let [value1, value2, value3='I'm the default.'] = ['a'.'b']
// value1 => a
// value2 => b
// value3 => I am the default value
Copy the code

(6) Default values for function arguments

function fun({name, age=18}){
    // name => qinsimin
    // age => 18
}
fun({name:'qinsimin'})	
Copy the code
function sum([num1, num2]){
    // num1 => 100
    // num2 => 200
}
sum([100.200])
Copy the code

(7) Default value of the whole object

function fn({name='qinsimin', age=20} ){}
fn()
// Uncaught TypeError: Cannot read property 'name' of undefined

function fn({name='qinsimin', age=20} = {} ){
    // name => qinsimin
    // age => 20
}
fn()

Copy the code

(8) Function return value deconstruction

function array(){
   return [1.2.3]}let [value1, value2, value3] = array()	
Copy the code
function object(){
   return {
       name:'qinsimin'.age:18}}let {name, age} = object()
// name => qinsimin
// age => 18

Copy the code

(9) Skillfully use deconstruction to realize the exchange of variable values

'The way it was written before
let a = 1,b =2,temp;
    temp = a;
    a = b;
    b = temp;
console.log(a,b) / / = 1 > 2

'Deconstruct writing'
var num1 = 11,num2 = 22
var [num1, num2] = [num2,num1]
console.log(num1,num2) / / = > 22 November
Copy the code

(10) Deconstruction of remaining parameters

let{name, age, ... rest} = {name: 'qinsimin'.age: 18.sex: 'woman'.husband: 'zhailei'}
// name => qinsimin
// age => 18
//rest => { sex: 'woman', husband: 'zhailei' }
Copy the code
let [a,b,...rest] = [1.2.3.4.5]
// a => 1
// b => 2
//rest => [3, 4, 5]
Copy the code
function fun({name,age,... arg}){
      // name => qinsimin
      // age => 18
      // arg => { sex: 'woman', husband: 'zhailei' }
}
fun({name: 'qinsimin'.age: 18.sex: 'woman'.husband: 'zhailei'})
Copy the code