Maison >interface Web >js tutoriel >Un guide simple sur la déstructuration en JavaScript : apprenez avec des exemples simples
JavaScript possède une fonctionnalité appelée déstructuration qui vous permet d'extraire facilement des valeurs de tableaux ou des propriétés d'objets et de les affecter à des variables. La déstructuration facilite le travail avec les données et constitue un outil essentiel pour les débutants qui apprennent JavaScript.
Dans cet article, nous détaillerons la déstructuration avec des exemples très simples afin que vous puissiez la comprendre en un rien de temps.
Imaginez que vous avez une boîte pleine de jouets et que vous souhaitez sortir quelques jouets de la boîte et jouer avec eux. Au lieu de récupérer chaque jouet individuellement, la déstructuration vous permet de récupérer les jouets (ou données) spécifiques dont vous avez besoin en une seule fois !
En JavaScript, la déstructuration vous permet de décompresser les valeurs des tableaux ou d'extraire les propriétés des objets dans des variables. C'est un moyen propre et pratique de gérer les données, en particulier lorsque vous travaillez avec des tableaux ou des objets complexes.
Commençons par la déstructuration des tableaux. Les tableaux sont comme des listes contenant plusieurs valeurs, et la déstructuration vous permet de prendre les valeurs d'un tableau et de les affecter à des variables dans une seule ligne de code.
Exemple 1 : Déstructuration de base d'un tableau
let fruits = ['apple', 'banana', 'orange']; // Destructuring the array let [fruit1, fruit2, fruit3] = fruits; console.log(fruit1); // Output: apple console.log(fruit2); // Output: banana console.log(fruit3); // Output: orange
Dans cet exemple, nous avons un tableau appelé fruits, et nous utilisons la déstructuration pour attribuer les valeurs à fruit1, fruit2 et fruit3. Au lieu d'accéder manuellement à chaque élément, la déstructuration nous permet de tout faire en même temps !
Exemple 2 : Sauter des éléments du tableau
Vous pouvez également ignorer des éléments d'un tableau en utilisant la déstructuration. Disons que vous voulez seulement le premier et le troisième fruit de la gamme de fruits.
let fruits = ['apple', 'banana', 'orange']; // Skipping the second element let [fruit1, , fruit3] = fruits; console.log(fruit1); // Output: apple console.log(fruit3); // Output: orange
Ici, en laissant un espace vide (juste une virgule) dans le motif déstructurant, on saute le deuxième élément (banane) et on passe directement au orange.
Exemple 3 : Valeurs par défaut dans la déstructuration de tableaux
Que se passe-t-il si le tableau ne contient pas suffisamment d'éléments ? Vous pouvez définir des valeurs par défaut pour éviter de devenir indéfini.
let colors = ['red']; // Setting a default value for the second color let [color1, color2 = 'blue'] = colors; console.log(color1); // Output: red console.log(color2); // Output: blue
Puisque les couleurs n'ont qu'un seul élément (rouge), la deuxième variable (color2) obtient la valeur par défaut de « bleu ».
Maintenant, passons à la déstructuration des objets. Les objets sont comme des conteneurs qui stockent des paires clé-valeur, et la déstructuration vous aide à extraire facilement des propriétés spécifiques.
Exemple 4 : Déstructuration d'objets de base
let person = { name: 'John', age: 30, job: 'developer' }; // Destructuring the object let { name, age, job } = person; console.log(name); // Output: John console.log(age); // Output: 30 console.log(job); // Output: developer
Ici, l'objet personne a trois propriétés : nom, âge et travail. La déstructuration nous permet d'extraire ces propriétés dans des variables distinctes portant les mêmes noms.
Exemple 5 : attribution à de nouveaux noms de variables
Que se passe-t-il si vous souhaitez attribuer ces propriétés à des variables portant des noms différents ? Vous pouvez le faire facilement avec la déstructuration d'objets.
let car = { brand: 'Toyota', model: 'Corolla', year: 2020 }; // Assigning to new variable names let { brand: carBrand, model: carModel, year: carYear } = car; console.log(carBrand); // Output: Toyota console.log(carModel); // Output: Corolla console.log(carYear); // Output: 2020
Dans cet exemple, nous avons utilisé brand: carBrand pour attribuer la propriété brand à une nouvelle variable appelée carBrand, et de même pour le modèle et l'année.
Exemple 6 : Valeurs par défaut dans la déstructuration d'objets
Tout comme avec les tableaux, vous pouvez définir des valeurs par défaut lors de la déstructuration d'objets.
let student = { name: 'Alice' }; // Setting default value for age let { name, age = 18 } = student; console.log(name); // Output: Alice console.log(age); // Output: 18 (since age wasn't in the object)
Étant donné que l'objet étudiant n'a pas de propriété d'âge, sa valeur par défaut est 18.
Exemple 7 : Déstructuration imbriquée
Parfois, les objets peuvent contenir d’autres objets. C'est là que la déstructuration imbriquée s'avère utile.
let user = { name: 'Bob', address: { city: 'New York', zip: 10001 } }; // Destructuring nested object let { name, address: { city, zip } } = user; console.log(name); // Output: Bob console.log(city); // Output: New York console.log(zip); // Output: 10001
Dans cet exemple, nous avons non seulement déstructuré la propriété name mais également la ville et le zip de l'objet adresse imbriqué.
La déstructuration est une fonctionnalité puissante et simple de JavaScript qui facilite grandement le travail avec des tableaux et des objets. En utilisant la déstructuration, vous pouvez écrire du code plus propre et plus efficace tout en gagnant du temps et en réduisant les erreurs. Que vous soyez débutant ou que vous appreniez simplement JavaScript, la déstructuration est quelque chose que vous utiliserez souvent dans votre parcours de codage.
Commencez à expérimenter la déstructuration et voyez comment elle peut simplifier votre code ! 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!