This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021.

By Ruphaa

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.

In this article, you will learn everything you need to know about JS deconstruction.

Why is there deconstruction in JS?

This is a normal object that contains the names of four people.

Const names = {Taylor: 'Xiaozhi ', Shawn:' Front-end Xiaozhi ', Zayn: 'Dazhi ', Halsey:' Wang Dazhi ',}Copy the code

Now, what would you do if you were asked to manually print all the names to the console? This might be done:

console.log(names.taylor)
console.log(names.shawn)
console.log(names.zayn)
console.log(names.halsey)
Copy the code

It’s a little annoying to dot this way. How can I make it better?

const taylor = names.taylor
const shawn = names.shawn
const zayn = names.zayn
const halsey = names.halsey

console.log(taylor)
console.log(shawn)
console.log(zayn)
console.log(halsey)
Copy the code

Much better. But we’re still doing the same thing. What if we could declare and assign object attributes on a single variable?

That would be better, right? This is where object deconstruction helps us. So we can do this:

const { taylor, shawn, zayn, halsey} = names

console.log(taylor)
console.log(shawn)
console.log(zayn)
console.log(halsey)
Copy the code

This is much better than before.

How does it work?

That’s easy. We simply take the properties from the object and store them in a variable. By default, the variable name is the same as the attribute name. So we can write this:

const { taylor, shawn, zayn: zaynMalik, halsey} = names
Copy the code

Array deconstruction?

Array deconstruction is similar to object deconstruction, but with some differences. We know that data is stored in an array with an index. They are in order. Therefore, when doing deconstruction, we must maintain the order. Such as:

const albums = ['Lover', 'Evermore', 'Red', 'Fearless']

const [lover, ever] = albums
// Lover Evermore
Copy the code

Also, arrays have no properties of values. So, you can just give any variable name you want.

Let’s move on to some use cases for object and array deconstruction.

An array of deconstruction

Switching variable

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

Ignore some return values

function f() { return [1, 2, 3]; } const [a, , b] = f(); console.log(a); // 1 console.log(b); / / 3Copy the code

The default value

let a, b; [a=5, b=7] = [1]; console.log(a); // 1 console.log(b); / / 7Copy the code

Create a subarray with the Rest argument

const albums = ['Lover', 'Evermore', 'Red', 'Fearless']

const [, ...albums2] = albums

console.log(albums2) // ['Evermore', 'Red', 'Fearless']
Copy the code

Object to deconstruct

Deconstruct fields from objects passed as function parameters

Const anjan = {name: 'age ', age: 20 } const statement = ({name, Age}) => {return 'My name is ${name}. I am ${age} years old.'} Statement (anjan) I am 20 years old.Copy the code

Nested object deconstruction

Const profile= {name: 'Anjan', age: 20, professional: {profession: 'front-end ',}} const {name, age, professional: {profession}} = profile console.log(professional) console.log(profession) // Front-end developmentCopy the code

The default value

const {a = 10, b = 5} = {a: 3}; console.log(a); // 3 console.log(b); / / 5Copy the code

Nested objects and array destructions

const taylor = {
  name: 'Taylor Swift',
  age: 31,
  address: {
      city: 'New York',
      country: 'USA',
  },
  albums: ['Lover', 'Evermore', 'Red', 'Fearless'],
}

const {
  name,
  age,
  address: { city },
  albums: [lover, ...rest],
} = taylor

console.log(name) // Taylor Swift
console.log(age) // 31
console.log(city) // New York
console.log(lover) // Lover
console.log(rest) // [ 'Evermore', 'Red', 'Fearless' ]
Copy the code

That’s all you need to know about JS deconstruction.

The possible bugs in editing can not be known in real time. In order to solve these bugs after the event, I spent a lot of time on log debugging. By the way, I recommend a good bug monitoring tool for youFundebug.

Original text: dev. To/thatanjan/e…

communication

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.