ES6 learning path (III) deconstruction assignment

Deconstruction and assignment of arrays

    const arr = [1, 2, 3]
    const [a, b, c] = arr
    console.log(a) // 1
    console.log(b) // 2
    console.log(c) // 3

Deconstruction failed

    const arr = [1, 2, 3]
    const [a, b, c, d] = arr
    console.log(a) // 1
    console.log(b) // 2
    console.log(c) // 3
    console.log(d) // undefined

Partial deconstruction

    const arr = [1, 2, 3]
    const [a, b] = arr
    console.log(a) // 1
    console.log(b) // 2

The default value is

The deconstruction assignment can give the default value , in other words , I can deconstruct the value , I will use the deconstructed value first , If I don't have a deconstructed value, I'll see if there is a default value , If there is a default value, I will use the default value .

    const arr = [1, 2, 3]
    const [a, b, c, d = 4] = [1, 2, 3]
    console.log(a, b, c, d) // 1 2 3 4

Note that if you deconstruct null It's ok if

    const arr = [1, 2, 3]
    const [a, b, c, d = 4] = [1, 2, 3, null]
    console.log(a, b, c, d)  // 1 2 3 null

deconstruction undefined You can use the default values

    const arr = [1, 2, 3]
    const [a, b, c, d = 4] = [1, 2, 3, undefined]
    console.log(a, b, c, d)

Object's deconstruction assignment

    const obj = {
    
      x: 1,
      y: 2
    }
    const {
     x, y } = obj
    console.log(x, y) // 1 2

Deconstruction assignment rename

    const obj = {
    
      x: 1,
      y: 2
    }
    const {
     x: res, y: res1 } = obj
    //  So it can be concluded that the above deconstruction is a short form , It's actually , The first one is the pattern , The latter is the variable that can be used 
    console.log(res, res1) // 1 2

Deconstruction failure

Layer 1 deconstruction failure returns undefined

    const obj = {
    
      x: 1,
      y: 2
    }
    const {
     z } = obj
    console.log(z) // undefined

Multi level deconstruction fails with an error

    const obj = {
    
      x: 1,
      y: 2
    }
    const {
     z: {
     w } } = obj // Cannot read properties of undefined (reading 'w')

Deconstructing initial value

    const {
     x = 3 } = {
    }
    console.log(x) // 3

null It can also be deconstructed

    const {
     x = 3 } = {
     x: null }
    console.log(x) // null

Put in a word

Remember a little bit

undefined == null
true
undefined === null
false

I laughed to death when I saw this

An object-oriented deconstruction assignment of an array

    const arr = [1, 2, 3]
    const {
     0: bar, 1: foo } = arr
    console.log(bar, foo) // 1 2

Deconstruction and assignment of strings

    const str = 'hello'
    const [a, b, c, d, e] = str
    console.log(a, b, c, d, e) // h e l l o

Deconstruction of values and Booleans

Personally, I feel very unpopular , Add after encountering in the project …

Deconstruction and assignment of function parameters

    function add([x, y]) {
    
      console.log(x, y) // 1,2
    }
    add([1, 2])

My understanding of this place is implicit deconstruction .

purpose

Exchange the values of variables

   	let x = 1;
    let y = 2;
    [x, y] = [y, x]
    console.log(x, y)
//  If you do not add a semicolon in this place, you will report an error , I haven't figured out why Uncaught ReferenceError: Cannot access 'y' before initialization

Returns multiple values from a function

    const {
     x, y, z } = (() => {
    
      return {
    
        x: 1,
        y: 2,
        z: 3
      }
    })() 
    console.log(x, y, z) // 1 2 3

    const [x, y, z] = (() => {
    
      return [
        1, 2, 3
      ]
    })()
    console.log(x, y, z) // 1 2 3

Directly destruct when a function is called

 //  hold x,y,z Direct deconstruction is passed in  
	function demo({
      x, y, z }) {
    
      console.log(x, y, z)  // 1 2 3
    }
    demo({
     x: 1, y: 2, z: 3 })

I am here vue Basic operations in the project

Deconstruct... In the routing object query and params Parameters

xx.vue Used in components

const {
     params, query } = this.$route

axios Deconstruct in network request data

//  deconstruction data, Rename it to res
const {
     data: res } = await axios.get('/api')