Detailed introduction to ES6 (2) Destructuring assignment

About destructuring assignment is very simple. It is an es6 syntactic sugar. It mainly includes array destructuring assignment. Object destructuring assignment. The main application is destructuring on demand.

Array destructuring assignment

//Array destructuring pattern matching is matched according to a fixed left and right pattern
let [a,b,c] = [1,2,3]
console.log(a,b,c)

// Matching multidimensional arrays must also do the same pattern 
let [a,b,[c,d,[e]]] = [1,2,[3,4,[5,6,[7 ]]]]
console.log(a)

// You can use .. to match all data after matching b. Note that if c is followed by a variable, an error will be reported 
let [a,b,...c] = [1,2,3,4,5,6, 7,[8 ]]
console.log(c)

object destructuring assignment

// The most common pattern is assignment 
let {obj1,obj2} = {obj1:123,obj2:123 }
console.log(obj1)

// The second mode is separated from assignment. At this time, obj1 is the matching mode: a=> assign the matched value to a 
let {obj1:a,obj2:b} = {obj1:123,obj2:123 }
console.log(a)

// The third type of object array mixed destructuring 
// This example is a little more complicated. First, obj1 is pattern matched to [1,2,{b:3},[4,5]] 
// then a=>1 b=>2 Next is matching an object {b:c} which is b is the pattern c assignment xy is an array match 
let {obj1:[a,b,{b:c},[x,y]]} = {obj1:[ 1,2,{b:3},[4,5 ]]}
console.log(a)
console.log(c)
console.log(x)
console.log(y)

// block scope let x exists in es6 syntax ;

{x} = {x:10}
console.log(x) // Error is reported because after parsing to {x}, the js engine will treat {x} as a code block, that is, a scope of a scope instead of a destructuring assignment mode 
// The correct way 
let x;
({x} = {x:10}) // just convert the scope to an expression 
console.log(x)

// In particular, it is said that the data deconstructed when the array is deconstructed must have the Iterator interface. It will be described in detail 
later.//During the process of object deconstruction, because of the principle that everything is an object, no matter what the deconstruction is, it conforms to the syntax specification 
// ({} = function(){}) 
// ({} = []) //correct 
// ([] = {}) //error 
// ({} = 'sdf') 
// ({} = 123)

Other destructuring is not commonly used

// String deconstruction As mentioned above, everything is an object. No matter what is converted into an object when deconstructing an object, except for null undefined 
let [a,b,c,d] = 'xlln' 
let {length:len} = 'xlln'
console.log(a)
console.log(s)

// It can also be seen from the following two examples 
let {toString:s} = 123 
console.log(s === Number.prototype.toString)

let {slice}  = '123'
console.log(slice === String.prototype.slice)

// Regardless of array destructuring and object destructuring, there are default 
values.//Note here that es is internally judging whether it is equal to the default value, whether it is to judge whether it is === strictly equal to undefined, and the default value will be used if it is equal to 
let [a = 1,b = 2,c = 3] = []
console.log(a)
let {a = 1,b = 2,c = 3} = {a:undefined,b:null,c:null}
console.log(a) //1
console.log(b) //null
console.log(c) //null

// Usage one function parameter destructuring 
function fn1({a,b}){
    console.log(a+b)
}

fn1({a: 1,b:2 })
 // You can specify a default value for the parameter. Also, the default value takes effect only when it is absolutely equal to undefined. That is, the item matched by the pattern is equal to undefined. It must be matched by the current pattern, otherwise it is invalid 
. fn2({a = 4,b = 5} = {a:1,b:2 }){
    console.log(a+b)
}
fn2()
// Not the 
fn2({}) matched by the current pattern 
// 9 The current pattern is the parameter object {undefined,undefined}

// Usage 2 deconstruct the node core module or JS built-in object 
const {push} = [];
console.log(push)
const {join} = require('path')
console.log(join)

// Usage ternary exchange 
let x = 1 ;
let y = 3; // Note that it must be added here; otherwise it will be parsed incorrectly 
[x , y] = [ y , x]
console.log(x)