ES6 new - deconstruction assignment of array / object

Catalog

Deconstruct assignment

1. Definition ：

2. Deconstruction assignment summary ：

An array of deconstruction

es5：

1.es6, An array of deconstruction

2. Deconstruction supports nesting , The left and right structures correspond

3. Partial deconstruction

4. Assign default , The deconstructed variables are undefined, The default value will take effect

5. matters needing attention ：

Object to deconstruct  

es5

1.es6, Object to deconstruct

2. Deconstruction supports nesting , The left and right structures correspond , Grasp the strength of the structure

3. Rename the deconstructed variable name

 4. Partial deconstruction

 6. matters needing attention

---

Deconstruct assignment

1. Definition ：

es6 Allow to follow certain mode , Extract... From arrays and objects , Assign values to variables , This is called deconstruction .

2. Deconstruction assignment summary ：

2.1. The structure of the left and right sides of the assignment symbol must be consistent ( Or it's all arrays , Or they are all objects )

2.2. The declaration and assignment of variables must be completed in one sentence .

An array of deconstruction

let arr = [ " durant ",33,"NBA Professional players " ]

es5：

let lastname = arrr[0]

let age = arr[1]

let job = arr[2]

1.es6, An array of deconstruction

let [lastname,age,job ] = arr

console.log(lastname,age,job)

2. Deconstruction supports nesting , The left and right structures correspond

let arr =  [ " durant ",[33],"NBA Professional players " ]

let [lastname, [age] ,job ] = arr

console.log(age)

3. Partial deconstruction

let arr =  [ " durant ",33,"NBA Professional players "," The nets " ]

Partial deconstruction , The previous part uses commas to indicate skipping

let [,age,job] = arr

console.log(age,job) 

 ... Receive the rest , Inside this rest It's a Array

let [lastname,...rest] = arr

console.log(lastname,rest)

4. Assign default , The deconstructed variables are undefined, The default value will take effect

let arr = [' durant ',33]

let [,,team] = arr

console.log(arr)

 let [,,team = " The thunder "] = arr

console.log(team)

 let arr = [ " durant " ,33," The nets "]

 let [,,team = " The thunder "] = arr

 console.log(team)

5. matters needing attention ：

let arr = [' durant ',33]

5.1 The left and right deconstructions are inconsistent => undefined

let [lastname,age ] = arr

console.log(lastname,age)

5.2 Declaration and assignment are not completed in one sentence => Report errors

let [ lastname,age ]

[ lastname,age ] = arr

Object to deconstruct  

let obj = { lastname:" durant ",age:"33",job:"NBA Professional players " }

es5

let lastname = obj[ "lastname" ]

let age = obj.age

let job = obj.job

1.es6, Object to deconstruct

let { lastname,age,job } = { lastnaem:" durant ",age:33,job:"NBA Professional players " }

//let { age,job lastname } = { lastnaem:" durant ",age:33,job:"NBA Professional players " } // The object is disordered

// let { lastname:lastname,age:age,job:job} = { lastnaem:" durant ",age:33,job:"NBA Professional players " }

console.log( lastname,age,job )

2. Deconstruction supports nesting , The left and right structures correspond , Grasp the strength of the structure

let obj = {

name:{ lastname:" durant ",nickname:[" contractor "," Du Xiaoshuai "] },

age:33,job:"NBA Professional players "  }

// Take out lastname,nickname,age,job Value

let { name：{lastname,nickname},age,job} = obj

console.log( lastname,nickname,age,job )

// Yes nickname The array is deconstructed again

let { name：{lastname,nickname},age,job} = obj

let [name1,name2] = nickname

console.log(name1,name2)

3. Rename the deconstructed variable name

let obj = { lastname:" durant ",age:"33",job:"NBA Professional players " }

let { lastname：uesrname ,age } = obj

console.log(username,age)

 4. Partial deconstruction

let obj = { lastname:" durant ",age:"33",job:"NBA Professional players ",team:" The nets " }

... Receive the rest , there rest It's a object

let { lastname,...rest } = obj

console.log(lastname,rest)  

 5. The default value is , The deconstructed variable value is undefined, The default value will take effect

let obj = { lastname:" durant ",age:"33" }

let { lastname,team} = obj

console.log(lastname,team)

let { lastname,team = " The thunder " } = obj

console.log( lastname,team )

let obj = { lastname:" durant ",age:"33",team:" The nets " }

let { team = " The thunder ",no:num = 7 } = obj

console.log( team,num)

 6. matters needing attention

let obj = { lastname:" durant ", age:33,team:" The nets "}

6.1 The left and right structures are inconsistent => Report errors

let [lastname,age] = obj

console.log(lastname,age)

 6.2 Declaration and assignment are not completed in the same sentence => complete

let {lastname,age}

{lastname,age} = obj

7. application

7.1 Instead of object . Property name The value of

7.2. The structure of function parameters , simplify object ... Property name The value of

function add (obj){ return obj.x+obj.y }

consle.log(add( { x:12,y:24 } ))

// Abbreviation

function add ({ x,y }){ return x+y }

consle.log(add( { x:12,y:24 } ))