Translator: Dmitri Pavlutin

Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

1. Swap variables

The usual method of swapping two variables requires an extra temporary variable. Consider an example:

let a = 1; let b = 2; let temp; temp = a; a = b; b = temp; a; // => 2 b; / / = > 1Copy the code

Temp is a temporary variable that holds the value of a first. We then assign the value of B to A, and then we assign the value of temp to B.

It is much easier to use the deconstruction method, which does not require any damn temp variables.

let a = 1; let b = 2; [a, b] = [b, a]; a; // => 2 b; / / = > 1Copy the code

[a, b] = [b, a] is deconstructed assignment, right, creates an array [b, a], that is, [2,1]. This array 2 is assigned to A, and 1 is assigned to B.

Although this approach also creates temporary arrays, it at least looks cleaner, and we can swap more than two variables using deconstruction.

let zero = 2; let one = 1; let two = 0; [zero, one, two] = [two, one, zero]; zero; // => 0 one; // => 1 two; / / = > 2Copy the code

2. Access elements in the array

There’s a scenario where we might have an empty item array. And you want to access the first, second, or NTH item of the array, but if the item does not exist, specify the default value.

This is usually done using the length property of the array

const colors = [];

let firstColor = 'white';
if (colors.length > 0) {
 firstColor = colors[0];
}

firstColor; // => 'white'
Copy the code

Using array deconstruction, we can achieve the same effect more succinctly:

const colors = [];

const [firstColor = 'white'] = colors;

firstColor; // => 'white'
Copy the code

Const [firstColor = ‘white’] = colors Deconstruction assigns the first element of the Colors array to the firstColor variable. If the array does not have any elements at index 0, the default value of “white” is assigned.

You can be more flexible, of course, if you only want to access the second element.

const colors = [];

const [, secondColor = 'black'] = colors;

secondColor; // => 'black'
Copy the code

Notice the comma on the left of the deconstruction: it means that the first element is ignored, and secondColor is assigned to the element with index 1 in the Colors array.

3. Immutable operation

When I started using React and Redux, I was forced to write code that adhered to immutability. While it was difficult at first, I saw the benefit: it was easier to handle one-way data flows.

Immutability requires that the original object cannot be changed. Fortunately, deconstruction can easily implement certain operations in an immutable manner.

const numbers = [1, 2, 3];

const [, ...fooNumbers] = numbers;

fooNumbers; // => [2, 3]
numbers; // => [1, 2, 3]
Copy the code

Destruct [,… fooNumbers] = numbers Create a new array fooNumbers that contains numbers except for the first element.

The numbers array does not change, leaving the operation unchanged.

In the same immutable way, you can remove the property from the object, and then try removing the foo property from the object big:

const big = { foo: 'value Foo', bar: 'value Bar' }; const { foo, ... small } = big; small; // => { bar: 'value Bar' } big; // => { foo: 'value Foo', bar: 'value Bar' }Copy the code

4. Deconstruction iterables

In the previous examples, arrays were destructed, but we can destruct any object that implements the Iterable Protocol [2].

Many native primitive types and objects are iterable: Array, String, typed Arrays, set, and Map.

If you don’t want to be limited to basic types, you can customize the deconstruction logic by implementing an iterable protocol.

Movies contains a list of movie objects. When deconstructing movies, it’s nice to get titles as strings. Let’s implement a custom iterator.

const movies = { list: [ { title: 'Heat' }, { title: 'Interstellar' } ], [Symbol.iterator]() { let index = 0; return { next: () => { if (index < this.list.length) { const value = this.list[index++].title; return { value, done: false }; } return { done: true }; }}; }}; const [firstMovieTitle] = movies; console.log(firstMovieTitle); // => 'Heat'Copy the code

Movies objects implement the iterable protocol by defining the symbol. iterator method, which iterates over title.

Following the Iterable protocol allows shredding of movies objects into titles by reading the title of the first movie :const [firstMovieTitle] = movies.

5. Deconstruct dynamic properties

As a rule of thumb, object deconstruction by attributes is more common than array deconstruction.

Object deconstruction looks simpler:

const movie = { title: 'Heat' };

const { title } = movie;

title; // => 'Heat'
Copy the code

Const {title} = movie creates a variable title and assigns the value of the property movie.title to it.

When it comes to object deconstruction, I’m a little surprised that we don’t have to know property names statically, we can use dynamic property names to deconstruct objects.

To see how dynamic deconstruction works, write a greet function:

function greet(obj, nameProp) { const { [nameProp]: name = 'Unknown' } = obj; return `Hello, ${name}! `; } greet({ name: 'Batman' }, 'name'); // => 'Hello, Batman! ' greet({ }, 'name'); // => 'Hello, Unknown! 'Copy the code

Call the greet() function with two parameters: the name of the object and the property.

Greet () const {[nameProp] : name =’Unknown’} = obj reads the name of the dynamic property using square brackets. The name variable receives the dynamic property value.

Better yet, specify a default value of “Unknown” if the attribute does not exist.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Here incidentally, I recommend a good [BUG monitoring tool Fundebug][3].

Original text: dmitripavlutin.com/5-interesti…

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.

[1] :Github.com/qq449245884…[2].Developer.mozilla.org/en-US/docs/…[3] :www.fundebug.com/?utm_source…