5 façons d'utiliser la déstructuration en JavaScript

La lecture des propriétés des objets et l'accès aux éléments du tableau sont des opérations courantes. La destruction des allocations rend ces opérations plus faciles et plus propres. Dans cet article, en plus de l'utilisation de base, je présenterai également 5 utilisations intéressantes de la déstructuration en JavaScript.

1. Échanger des variables

Habituellement, la méthode d'échange de deux variables nécessite une variable temporaire supplémentaire, jetons un œil à l'exemple :

let a = 1;
let b = 2;
let temp;

temp = a;
a = b;
b = temp;

a; // => 2
b; // => 1

temp est une variable temporaire, qui enregistre d'abord la valeur de a. Attribuez ensuite la valeur de b à a, puis attribuez la valeur de temp à b.

Ce serait plus simple si vous utilisiez la déstructuration, il n'y a pas besoin de temp variables.

let a = 1;
let b = 2;

[a, b] = [b, a];

a; // => 2
b; // => 1

[a，b] = [b，a] est une mission de déstructuration A droite, un tableau [b, a] est créé, c'est-à-dire [2,1]. Ce tableau 2 est attribué à a, et 1 est attribué à b.

Bien que cette méthode crée également un tableau temporaire, cette méthode semble au moins plus concise. En utilisant la déstructuration, nous pouvons également échanger plus de 2 variables.

let zero = 2;
let one = 1;
let two = 0;

[zero, one, two] = [two, one, zero];

zero; // => 0
one;  // => 1
two;  // => 2

2. Accéder aux éléments du tableau

Il existe un scénario dans lequel nous pouvons avoir un tableau d'éléments vide. et souhaitez accéder au premier, au deuxième ou au nième élément d'un tableau, mais si l'élément n'existe pas, utilisez la valeur par défaut spécifiée.

Habituellement, l'attribut length du tableau est utilisé pour déterminer

const colors = [];

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

firstColor; // => 'white'

En utilisant la déstructuration de tableau, le même effet peut être obtenu de manière plus concise :

const colors = [];

const [firstColor = 'white'] = colors;

firstColor; // => 'white'

const [firstColor = 'white'] = colors Déstructuration will colorsLe premier élément du tableau est affecté à la variable firstColor. Si le tableau n'a aucun élément à l'index 0, la valeur par défaut "white" est attribuée.

Bien sûr, cela peut être plus flexible. Si vous souhaitez accéder uniquement au deuxième élément, vous pouvez le faire.

const colors = [];

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

secondColor; // => 'black'

Notez la virgule sur le côté gauche de la déstructuration : cela signifie que le premier élément est ignoré et secondColor est attribué à l'aide de l'élément d'index colors dans le tableau 1.

3. Opérations immuables

Quand j'ai commencé à utiliser React et Redux, j'ai été obligé d'écrire du code qui respectait l'immuabilité. Même si c’était un peu difficile au début, j’ai ensuite vu ses avantages : il était plus facile de gérer un flux de données unidirectionnel.

L'immuabilité exige que l'objet d'origine ne puisse pas être modifié. Heureusement, la déstructuration permet de mettre en œuvre facilement certaines opérations de manière immuable.

const numbers = [1, 2, 3];

const [, ...fooNumbers] = numbers;

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

Déstructuration [, ... fooNumbers] = numbersCrée un nouveau tableau fooNumbers, fooNumbers contenant numbers éléments sauf le premier élément.

numbers Le tableau n'a pas changé et le fonctionnement reste inchangé.

De la même manière immuable, les attributs peuvent être supprimés de l'objet, puis essayer de supprimer l'attribut big de l'objet foo :

const big = {
 foo: 'value Foo',
 bar: 'value Bar'
};

const { foo, ...small } = big;

small; // => { bar: 'value Bar' }
big; // => { foo: 'value Foo', bar: 'value Bar' }

4. iterables

Dans les exemples précédents, la déstructuration a été utilisée sur les tableaux, mais nous pouvons déstructurer n'importe quel objet qui implémente le protocole itérable.

De nombreux types et objets primitifs natifs sont itérables : array, string, typed arrays, set et map.

Si vous ne souhaitez pas vous limiter aux types de base, vous pouvez personnaliser la logique de déstructuration en implémentant le protocole itérable.

movies contient une liste de movie objets. C'est génial d'avoir movies comme chaîne lors de sa déconstruction. Implémentons un itérateur personnalisé. L'objet title

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'

implémente le protocole itérable en définissant la méthode movies, et l'itérateur itère Symbol.iterator. title

suit le

protocole itérable permettant de décomposer l'objet en movies en lisant les premiers title movies :title. const [firstMovieTitle] = movies

5. Déstructuration des propriétés dynamiques

En règle générale, la déstructuration d'objets par propriétés est plus courante que la déstructuration de tableaux. Déstructurer l'objet

semble beaucoup plus simple :

const movie = { title: 'Heat' };

const { title } = movie;

title; // => 'Heat'

crée une variable const {title} = movie et lui attribue la valeur de l'attribut title. movie.title

En ce qui concerne la déstructuration d'objets, j'ai été un peu surpris que nous n'ayons pas besoin de connaître les noms de propriété de manière statique et que nous puissions utiliser des noms de propriété dynamiques pour déconstruire l'objet.

Pour voir comment fonctionne la déstructuration dynamique, écrivez une fonction

: greet

function greet(obj, nameProp) {
 const { [nameProp]: name = 'Unknown' } = obj;
 return `Hello, ${name}!`;
}

greet({ name: 'Batman' }, 'name'); // => 'Hello, Batman!'
greet({ }, 'name'); // => 'Hello, Unknown!'

Appelez la fonction

avec 2 paramètres : objet et nom de propriété. greet()

À l'intérieur de

, l'affectation de déstructuration greet() utilise la forme de crochets const {[nameProp]：name ='Unknown'} = obj pour lire le nom de l'attribut dynamique, et la variable [nameProp] reçoit la valeur de l'attribut dynamique. name

Mieux encore, si l'attribut n'existe pas, vous pouvez spécifier une valeur par défaut de "

". Unknown

6. Conclusion

La destruction est très utile si vous souhaitez accéder aux propriétés des objets et aux éléments du tableau.

En plus de l'utilisation de base, le destructeur de tableau peut également échanger facilement des variables, accéder aux éléments du tableau et effectuer certaines opérations immuables.

JavaScript offre de plus grandes possibilités car vous pouvez définir une logique de destruction personnalisée à l'aide d'itérateurs.

Adresse originale : https://dmitripavlutin.com/5-interesting-uses-javascript-destructuring/

Pour plus de connaissances liées à la programmation, veuillez visiter : Apprenez la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!