This is the 22nd day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The problem

Interviewer: Can you talk a little bit about deconstruction assignment for ES6?

Interviewee: Yes, for objects and arrays. Easy and quick access to their internal values.

Interviewer: Does the deconstruction of the object match the value of its prototype?

Interviewer: Er… I didn’t notice that.

Interviewer: Oh

The above scenario is pure fiction.

Today we will summarize the deconstruction assignment of ES6, including array, object and other types of deconstruction assignment, and see what knowledge points are not mastered by themselves, let’s learn together.

Deconstruction assignment

Extract the target value from the given data (such as arrays, objects, etc.) and assign it to a variable. If the data is not an object type, it is converted to an object type; if it cannot be converted, an error is reported.

var {a} = null // error
var {a} = undefined // error

var {length} = '123' // to a string object with a length attribute
console.log(length) / / 3
Copy the code

An array of

Arrays are extracted sequentially and assigned to the variables with the corresponding subscripts. Variables can be named at will.

If there are too many variables, the extra variable that does not match is undefined

If there are fewer variables, only the corresponding variable is assigned.

var [first,second] = [1.2.3]
console.log(first, second)  / / 1. 2

var [first,second, third, fourth] = [1.2.3]
console.log(first, second, third)  / / 1 2 3
console.log(fourth)  // undefined
Copy the code

Array deconstruction also supports nesting.

var [one,[two]] = [1[2].3]
console.log(two) / / 2
Copy the code

You can set a default value for a variable. If the variable does not match, the default value is used instead of undefined.

Variables do not match if they have no corresponding values or if their corresponding values are all equal to undefined.

var [first] = []
console.log(first) // undefined

var [first = 'a'] = []
console.log(first) // 'a'

var [first = 'a'] = [undefined]
console.log(first) // 'a'

var [first = 'a'] = [null]
console.log(first) // null

var [first = 'a'] = [0]
console.log(first) / / 0
Copy the code

The default value can also use the variable name, provided that it is stated first.

var [first, second = first] = [1]
console.log(first, second) / / 1, 1
Copy the code

If you just want the second value, you could write it like this

var [,second] = [1.2]
console.log(second) / / 2
Copy the code

object

Objects are deconstructed not in order, but by matching whether the key and the variable name are the same, and if so, assigning the value corresponding to the key to the variable. If not, undefined.

var {a, b} = {a:1.b:2}
console.log(a,b) / / 1. 2

var {c} = {a:1.b:2}
console.log(c) // undefined
Copy the code

If you want to customize your own variables, you can do so, but then you can only access them through custom variables.

var {a: first} = {a:1.b:2}
console.log(first) / / 1
console.log(a) // a is not defined
Copy the code

Object deconstruction also supports nesting and fetching values from its prototype.

var {a: {b}} = {a: {b:2}}
console.log(b) / / 2

// Set the prototype object
var obj = Object.create({a:1})
var {a} = obj 
console.log(a) / / 1
Copy the code

As with arrays, default values are supported for variables.

// The default value is used for null values
var {a = 123, b = 456} = {}
console.log(a, b) // 123  456

// undefined will use the default value
var {a: first = 123} = {a: undefined}
console.log(first) / / 123

var {a: first = 123} = {a: null}
console.log(first) // null
Copy the code

other

Function parameters can also be deconstructed and default values can be set

function fn ({a = 1, b = 2} = {}) {
  return a + b
}
fn({a: 10.b: 20}) / / 30
fn({a: 10}) / / 12
fn() / / 3
Copy the code

Destructuring assignments is very handy for swapping values

var a = 1, b = 2;
[b,a] = [a,b]
console.log(a, b) 1 / / 2
Copy the code

Destruct assignment is also handy for Map destruct traversal and Object. Entries methods

var map =  new Map([['a'.1],
  ['b'.2]])for(let [key, val] of map) {
  console.log(key, val)  
  // a 1
  // b 2
}

var obj = {a: 1.b: 2}
for (let [key, val] of Object.entries(obj)) {
    console.log(key, val)
    // a 1
    // b 2
}
Copy the code

reference

Destruct assignment of variables