“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

takeaway

Recommended close reading module…

🍇 Array deconstruction –

🍇 Object deconstruction – [note!!]

Deconstruct the concept of assignment

The destruct assignment syntax is a Javascript expression.

  • By deconstructing assignments, attributes/values can be taken from objects/arrays and assigned to other variables.
  • Deconstruction assignment is “deconstruction” by copying elements of a structure into variables. But the object/array itself is not modified.

An array of deconstruction

The basic use

📖 can be used to assign values while defining variables

let [one, two, three] = foo; // equivalent to let one = foo[0]; let two = foo[1]; let three = foo[2];Copy the code

📖 can also declare variables first, before destructuring the assignment

Setting defaults

If [left ≠ right], you can set a default value first, otherwise the variable without a value will become undefined

Residual value processing

You can use three dots “…” + argument to receive all remaining elements, variable name arbitrary, must be in the position of the last argument

Advanced usage

🎨 can be used in conjunction with the split function, for example

let [Mother,Father] = "judy,pete".split(',');

console.log(Mother)   //judy
console.log(Father)   //pete
Copy the code

🎨 can ignore elements with commas, for example

let [name1,,name3] = ["Julius01", "Caesar02", "Consul03"]
Copy the code

🎨 can be assigned directly to the properties of the object, for example

let user = {};
[user.name, user.surname] = ["Ilya","Kantor"]
Copy the code

🎨 can be used in conjunction with the.entries() method to traverse key-value pairs of objects, for example

for (let [key, value] of Object.entries(fruit)) {... }Copy the code

🎨 can use deconstruction for variable exchange, for example

Object to deconstruct

The basic use

Note that variable names remain consistent

let {a, b} = {a:"Julius01", b:"Caesar02"}
Copy the code

📖 New variable name

If you want to extract a variable from an object and assign it to a new variable name that is different from the object property name. It should read:

let {name1: a,name2: b} = {name1:"Julius01", name2:"Caesar02"}
Copy the code

The colon represents “what value: to whom”, as shown in the example above, assigning name1 to variable A and name2 to variable B

Setting defaults

Object destructions can also be set to default values

let { a, b = 2} = {a:"Julius01"}
Copy the code

📖 Name and set default values

A property can be at the same time

  • 1) Deconstruct an object and assign it to a variable with a different name
  • 2) Assign a default value in case the undeconstructed value isundefined.

Processing of residual values

When an object has more attributes than the number of variables we provide, we can take only some of the attributes and use 1 variable to store the rest of the values, for example

Fruit = {apple:' apple ', banana:' banana ', grape:' grape '} restFruit} = fruit;Copy the code

Attention!!

🎨 object destruct assignment, the order of variables is not important, for example:

🎨 does not support directly declaring variables and then deconstructing assignments

As you can see, array destructions are correct, but object destructions are incorrect.

This is because JavaScript puts {… } as a code block. So this code {a, b, c} = {a: “hi”, b: ‘axjy’, c: 99}; Is invalid. If you want it to be valid, you need to enclose the entire assignment expression in parentheses (…). To tell JavaScript that this is not a code block.

(…). The expression must be preceded by a semicolon, or it may be executed as a function on the previous line.

conclusion

  • Full syntax for deconstructing arrayslet [item1 = default, item2, ...rest] = array
  • The complete syntax for deconstructing objectslet {prop : varName = default, ... rest} = object

References:

javaScript Destructuring assignment

MDN destructuring assignment

🎨 [thumbs up] [concerns] don’t get lost, more front-end dry goods waiting for you to unlock

Phase to recommend

👉 be sure to know JavaScript higher-order functions

👉 Talk about the modular mechanism of the front end

👉 illustrates JavaScript’s garbage collection mechanism

👉JavaScript this binding rule