Maison > interface Web > js tutoriel > Il est facile de déstructurer un tableau en JavaScript et de donner à votre code un aspect propre.

Il est facile de déstructurer un tableau en JavaScript et de donner à votre code un aspect propre.

王林
Libérer: 2024-08-12 18:37:12
original
677 Les gens l'ont consulté

ays to Destructure Array in JavaScript & make your code look clean

Bonjouroooooooo ! ?

J'espère que vous allez à merveille ! C'est SMY ! ? Aujourd'hui, nous plongeons dans la magie JavaScript avec la déstructuration de tableaux ! ?


? Contenu:

  • ⚡ Attends quoi ?

  • ⚡ Mais pourquoi ?

  • ⚡ Mais comment ?

  • 1️⃣ Déstructuration chronologique des tableaux

  • 2️⃣ Déstructuration des tableaux par index

  • 3️⃣ Déstructuration des tableaux dans les objets

  • 4️⃣ Déstructuration de tableaux avec des index dynamiques


⚡ Attends quoi ?

La déstructuration de tableaux est une fonctionnalité intéressante de JavaScript qui vous permet d'extraire des valeurs de tableaux (ou des propriétés d'objets) dans des variables distinctes. Il ne s'agit pas seulement de donner à votre code un aspect cool, il s'agit d'écrire un code plus propre et plus lisible. Voyons comment vous pouvez déstructurer les tableaux de différentes manières !

⚡ Mais pourquoi ?

La déstructuration rend votre code plus concis et expressif. Au lieu d'accéder aux éléments du tableau par leurs indices, vous pouvez directement extraire les valeurs dans des variables. Cela peut simplifier votre code, réduire les erreurs et le rendre plus facile à comprendre.

⚡ Mais comment ?

Parcourons chaque méthode de déstructuration de tableaux avec quelques exemples !


1️⃣ Déstructuration chronologique des tableaux

C'est le moyen le plus simple de déstructurer des tableaux. Vous faites correspondre les variables aux éléments du tableau dans l'ordre dans lequel elles apparaissent.

const fruits = ['apple', 'mango', 'banana'];
const [apple, mango, banana] = fruits;

console.log(apple); // apple
console.log(mango); // mango
console.log(banana); // banana
Copier après la connexion

Comment ça marche :

  • Le tableau des fruits contient trois éléments.

  • A l'aide de [pomme, mangue, banane], on déstructure le tableau en trois variables, chacune correspondant à un élément du tableau, dans le même ordre.


2️⃣ Destructuration des tableaux par index

En JavaScript, vous ne pouvez pas déstructurer directement les tableaux par index dans le littéral du tableau lui-même, mais vous pouvez obtenir des résultats similaires avec une petite solution de contournement en utilisant Object.entries ou en définissant manuellement les valeurs.

const fruits = ['apple', 'mango', 'banana'];
const {0: apple, 1: mango, 2: banana} = fruits;

console.log(apple); // apple
console.log(mango); // mango
console.log(banana); // banana
Copier après la connexion

Comment ça marche :

  • Ici, nous utilisons une syntaxe qui imite la déstructuration en traitant les indices de tableau comme des clés. Il s'agit plutôt d'une solution de contournement puisque la déstructuration par indices n'est pas directement prise en charge, mais l'idée est d'aligner les éléments du tableau avec des variables via des indices.

3️⃣ Destructuration des tableaux dans les objets

Vous pouvez également déstructurer des tableaux imbriqués dans des objets. Cela vous permet de cibler des éléments spécifiques dans des structures imbriquées.

const fruitsPerSeason = {
  summer: ['grapes', 'pineapple'],
  winter: ['kiwis', 'oranges']
};

const { summer: [grape, pineapple], winter: [kiwi, orange] } = fruitsPerSeason;

console.log(grape); // grapes
console.log(pineapple); // pineapple
console.log(kiwi); // kiwis
console.log(orange); // oranges
Copier après la connexion

Comment ça marche :

  • fruitsPerSeason est un objet où chaque propriété est un tableau.

  • En déstructurant au sein de l'objet, nous extrayons des éléments spécifiques de ces tableaux en variables distinctes.


4️⃣ Destructuration de tableaux avec des index dynamiques

Pour une approche plus dynamique, vous pouvez combiner la déstructuration avec des variables qui détiennent des indices.

const fruitsPerSeason = {
  summer: ['pineapple', 'grapes'],
  winter: ['kiwis', 'oranges']
};

const pineappleIdx = 0, kiwisIdx = 0;
const { summer: [_, pineapple], winter: [_, kiwis] } = fruitsPerSeason;

console.log(pineapple); // pineapple
console.log(kiwis); // kiwis
Copier après la connexion

Comment ça marche :

  • Ici, nous utilisons _ comme espace réservé pour ignorer les premiers éléments et déstructurer uniquement les éléments dont nous avons besoin en fonction d'indices dynamiques (bien que les indices eux-mêmes ne soient pas utilisés dynamiquement dans cet exemple).

Conclusion :

Les tableaux de déstructuration peuvent rationaliser votre code JavaScript, le rendant plus propre et plus expressif. Que vous extrayiez des valeurs chronologiquement, cibliez des indices spécifiques ou travailliez sur des objets, ces techniques vous aident à gérer les tableaux plus efficacement.

C'est tout, les amis ! J'espère que vous avez trouvé cette analyse de la déstructuration des tableaux utile et perspicace. ?

N'hésitez pas à me suivre sur GitHub et LinkedIn pour plus de trucs et astuces JavaScript !

GitHub

LinkedIn


Restez génial et bon codage ! ✨

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal