👋 Hi, I’m Chuck. A not-so-serious kid who loves the front end.

This article has been identified, junior high school advanced front-end even including the entry of the students can be assured to eat 🥳.

deconstruction

To get to the point, why talk about deconstruction? As a new feature of ES6, although it has been out for a long time, there are always students like me who are afraid of 😭(EMMM is mainly because I am too much of a dish, but the deeper level will not) when it comes to new things. But there is no relationship, this time don’t be afraid, I carry damage in front, you output, one fell swoop to take it!!

Not good at organizing language, but also afraid of mistakes, I can write out code to everyone to write out, convenient for everyone to understand!!

Think about the problem that we have an object and we need to separate out some of its properties, what do we do before we deconstruct it? Usually.

let foo = {
  bar: 11.baz: 31.baq: 42
};

// At this point we need to extract the bar and baz attributes separately
let bar = foo.bar;
let baz = foo.baz;
Copy the code

So what can we do with deconstruction? 👇

let foo = {
  bar: 11.baz: 31.baq: 42
};

// Now we need to fetch the bar and baz attributes separately
let { bar, baz } = foo;
Copy the code

(Wow) Deconstruction is so easy!

Knock on the chalkboard knock on the chalkboard, you don’t know the details of deconstruction, do you? I’ll tell you

On whom (or on whom)?

Destruct objects are objects and arrays!!

Deconstruction confidential

In the previous article we had a little demo of object structure. So let’s talk about this demo.

Let {bar, baz} = foo; Talking about!

I’m actually using an abbreviation here, but the full version would be

let { bar: bar, baz: baz } = foo;

Since it is an abbreviation, so to think about a problem 🤔 : in the end the abbreviation of which part? Did you abbreviate bar: and baz: or did you abbreviate: bar and: baz?

Throw the answer first: abbreviate the part before the colon.

This detail cannot be ignored, and we will soon see why the abbreviation is the previous part.

Before we do that, we need to review what we’ve learned so far, in the following object literals, who is a property and who is a value?

let foo = {
  bar: 42
};
Copy the code

Bar is the attribute, 42 is the value!!

Yes, exactly! There’s nothing wrong with it! But, do you know who are properties and who are values in deconstruction? 😏

Heh heh heh, sorry, in deconstruction, the order is completely reversed! So I’ve drawn a picture here just to show you.

This is a little detail that you have to pay attention to because it’s in the opposite order. This is important!! Why is that? If we want to name a property that is different from the property in the object, if we don’t know this detail, we will have unexpected results! For example:

let foo = {
  bar: 11.baz: 31
};

// We want to assign bar to A and baz to b
let { a: bar, b: baz } = foo;
console.log(a); / / undefined 😖
console.log(b); / / undefined 😖

// The right way!!
let { bar: a, baz: b } = foo;
console.log(a); / / 11. Yeah!
console.log(b); // 31 yeah!
Copy the code

If we do not know this detail, a Bug we are about to doubt life 🙈🙈

I know you like the wrong way as much as I do, but unfortunately we have to adapt our brains to this change!

Deconstruction is not just assignment

Consider a piece of code like this

let foo = {
  bar: 11.baz: 31
};

let { bar: a[0].baz: a[1] } = foo;
Copy the code

What would the result be? Is a[0] equal to 11 and a[1] equal to 31?

I’m sorry, this is a mistake, because at the same time as the deconstruction, there is a process of declaring variables and then assigning values to variables. Given the process of declaring a variable, it is easy to assume that a[0] is not a valid variable name, so it is natural to get an error.

Object deconstruction matters to note

Let’s look at this piece of code

let bar, baz;
let foo = {
  bar: 11.baz: 31
};

{ bar, baz } = foo;

console.log(bar); // undefined😨😨😨
console.log(baz); // undefined😨😨😨
Copy the code

This is because when there is no var/let/const declaration in front of the object destruct, the “{}” on the left of the statement is treated as a code block instead of an object. We just need to put parentheses around the statement to get the correct result.

It’s not just variables that need to be assigned in a deconstruction, any valid assignment expression will do

How to understand this sentence? I’m sure you can see that from the code.

let foo = {
  bar: 11.baz: 31
};

let a = {};
let name = 'bar';

({ bar: a.bar, baz: a.baz } = foo)

({ [name]: a[name] } = foo)
Copy the code

After watching this demo, I believe you will understand

Deconstruction can be assigned repeatedly

Object deconstruction allows listing the same property multiple times. Such as:

let foo = {
  bar: 11.baz: 31
};

let { bar: X, bar: Y } = foo;
console.log(X); / / 11
console.log(Y); / / 31
Copy the code

Deconstruct the value of an expression

The value of a deconstructed expression is always the object to be deconstructed. Such as:

let bar, baz, foo1;
let foo = {
  bar: 11.baz: 31
};

foo1 = { bar, baz } = foo;
console.log(foo1 === foo); // true
Copy the code

conclusion

In view of the limited level, there may be mistakes in the article, if you find, please tell me in time (wechat below), I will update immediately, so as not to mislead people.

Although deconstruction is not a very big point, we need to pay special attention to the details contained in it. With good use of these details, we may find a better writing method by giving full play to our creative ideas.

I’m Chuck, and I hope you found this post informative.

It doesn’t matter if it’s a thumbs up. Is it a thumbs up? What I want is to let you understand deconstruction!!