Partage de technologie

En JavaScript, qu’est-ce que l’affectation de déstructuration ?

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Rassembler du sable dans une tour, faire un petit progrès chaque jour


⭐ Introduction de la colonne

Premiers pas avec le front-end : explorez le monde merveilleux du développement Web Bienvenue dans le voyage d'entrée frontale ! Si vous êtes intéressé, vous pouvez vous abonner à cette chronique !Cette chronique s'adresse à ceux qui sont intéressésdéveloppement web Du sur mesure pour ceux qui sont intéressés et qui viennent d’entrer dans le domaine du front-end. Que vous soyez un novice complet ou un développeur possédant des connaissances de base, vous disposerez ici d'une plateforme d'apprentissage systématique et conviviale. Dans cette rubrique, nous la mettrons à jour quotidiennement sous forme de questions et réponses, vous présentant des points de connaissances front-end sélectionnés et des réponses aux questions fréquemment posées. Grâce au format questions-réponses, nous espérons répondre plus directement aux questions des lecteurs sur la technologie front-end et aider chacun à établir progressivement une base solide. Qu'il s'agisse de HTML, CSS, JavaScript ou de divers frameworks et outils couramment utilisés, nous expliquerons les concepts d'une manière simple et facile à comprendre, et fournirons des exemples et des exercices pratiques pour consolider ce que vous avez appris. Dans le même temps, nous partagerons également quelques conseils pratiques et bonnes pratiques pour vous aider à mieux comprendre et appliquer diverses technologies dans le développement front-end.

Insérer la description de l'image ici

Que vous recherchiez un changement de carrière, une amélioration de vos compétences ou la satisfaction de vos intérêts personnels, nous nous engageons à vous fournir les meilleures ressources et le meilleur soutien d'apprentissage. Explorons ensemble le monde merveilleux du développement Web ! Rejoignez le parcours d'entrée front-end et devenez un développeur front-end exceptionnel ! Commençons notre voyage front-end ! ! !

Le contenu du jour :En JavaScript, qu’est-ce que l’affectation de déstructuration ?

Insérer la description de l'image ici


En JavaScript, qu’est-ce que l’affectation de déstructuration ?

1. Introduction

L'affectation de déstructuration est une syntaxe introduite dans ES6 qui vous permet d'extraire des valeurs d'un tableau ou d'un objet et de les affecter à différentes variables. L'affectation de déstructuration rend l'extraction des données plus concise et claire et simplifie la structure du code. Cet article expliquera en détail le concept, la syntaxe et l'application de l'affectation de déstructuration dans la programmation pratique.

2. Déconstruire le concept d'affectation

L'affectation de déstructuration est un moyen d'extraire des données d'un tableau ou d'un objet et de les affecter à une variable indépendante. Il simplifie les opérations d'extraction de données et évite les accès multiples aux propriétés des objets ou aux éléments du tableau.

3. Déstructuration et affectation des tableaux

3.1 Syntaxe de base

L'affectation de déstructuration de tableau nous permet d'extraire des valeurs d'un tableau et de les affecter à des variables.

const [a, b, c] = [1, 2, 3];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
console.log(c); // 输出: 3
  • 1
  • 2
  • 3
  • 4

3.2 Sauter des éléments

Vous pouvez ignorer certains éléments du tableau et extraire uniquement les valeurs requises.

const [a, , c] = [1, 2, 3];
console.log(a); // 输出: 1
console.log(c); // 输出: 3
  • 1
  • 2
  • 3

3.3 Valeur par défaut

Vous pouvez spécifier une valeur par défaut pour la variable attribuée par déstructuration lorsque l'élément de tableau correspondant est.undefined, la valeur par défaut prendra effet.

const [a, b = 2] = [1];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
  • 1
  • 2
  • 3

3.4 Échanger des valeurs de variables

L'affectation de déstructuration fournit un moyen concis d'échanger les valeurs de deux variables.

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 输出: 2
console.log(b); // 输出: 1
  • 1
  • 2
  • 3
  • 4
  • 5

4. Déstructuration et affectation d'objets

4.1 Syntaxe de base

L'affectation de déstructuration d'objets nous permet d'extraire les valeurs de propriété d'un objet et de les affecter à des variables.

const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // 输出: John
console.log(age); // 输出: 30
  • 1
  • 2
  • 3
  • 4

4.2 Renommer les variables

Les variables peuvent être renommées lors de l'affectation de déstructuration pour éviter les conflits de noms de variables ou améliorer la lisibilité du code.

const person = { name: 'John', age: 30 };
const { name: userName, age: userAge } = person;
console.log(userName); // 输出: John
console.log(userAge); // 输出: 30
  • 1
  • 2
  • 3
  • 4

4.3 Valeur par défaut

Vous pouvez spécifier une valeur par défaut pour la variable affectée par la déstructuration d'un objet lorsque l'attribut correspondant n'existe pas ou que la valeur est.undefined, la valeur par défaut prendra effet.

const person = { name: 'John' };
const { name, age = 25 } = person;
console.log(name); // 输出: John
console.log(age); // 输出: 25
  • 1
  • 2
  • 3
  • 4

4.4 Déstructuration imbriquée

Vous pouvez extraire des valeurs des propriétés imbriquées d'un objet grâce à la déstructuration imbriquée.

const person = { name: 'John', address: { city: 'New York', zip: 10001 } };
const { address: { city, zip } } = person;
console.log(city); // 输出: New York
console.log(zip); // 输出: 10001
  • 1
  • 2
  • 3
  • 4

5. Application de la mission de déstructuration

5.1 Paramètres de fonction

L'affectation de déstructuration peut être utilisée pour les paramètres de fonction afin de simplifier le traitement des paramètres de fonction.

function displayPerson({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const person = { name: 'John', age: 30 };
displayPerson(person); // 输出: Name: John, Age: 30
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

5.2 Extraire la valeur de retour de la fonction

L'affectation de déstructuration peut être utilisée pour extraire des valeurs d'un tableau ou d'un objet renvoyé par une fonction.

function getCoordinates() {
  return [40.7128, -74.0060];
}

const [latitude, longitude] = getCoordinates();
console.log(`Latitude: ${latitude}, Longitude: ${longitude}`); // 输出: Latitude: 40.7128, Longitude: -74.0060
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

5.3 Gestion de plusieurs valeurs de retour

L'affectation de déstructuration peut être utilisée pour gérer plusieurs valeurs renvoyées par une fonction, évitant ainsi l'utilisation d'index de tableau ou de noms de propriétés d'objet.

function getUserInfo() {
  return { name: 'John', age: 30, city: 'New York' };
}

const { name, age, city } = getUserInfo();
console.log(name); // 输出: John
console.log(age); // 输出: 30
console.log(city); // 输出: New York
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

6. Résumé

L'affectation de déstructuration est une syntaxe concise en JavaScript permettant d'extraire une valeur d'un tableau ou d'un objet et de l'attribuer à une variable. En déstructurant les affectations, vous pouvez plus facilement extraire des données, traiter les paramètres de fonction, extraire les valeurs de retour de fonction et simplifier la structure du code. La maîtrise de la technologie d'affectation de déstructuration peut améliorer la lisibilité et la maintenabilité du code et améliorer l'efficacité du développement.


⭐Écrivez à la fin

Cette rubrique s'adresse à un large éventail de lecteurs, et convient aux débutants du front-end ; ou à ceux qui n'ont pas appris le front-end et qui sont intéressés par le front-end, ou aux étudiants du back-end qui souhaitent mieux se montrer et se développer. quelques points de connaissances front-end pendant le processus d'entretien, donc si vous avez les bases du front-end et suivez cette chronique, cela peut également vous aider dans une large mesure à trouver et à combler les lacunes puisque le blogueur lui-même s'occupe du contenu. sortie, s'il y a des défauts dans l'article, vous pouvez me contacter via le côté gauche de la page d'accueil, progressons ensemble, et en même temps, je recommande également plusieurs colonnes à tout le monde. Les partenaires intéressés peuvent s'abonner : De plus. aux colonnes ci-dessous, vous pouvez également vous rendre sur ma page d'accueil pour voir d'autres colonnes ;

Mini-jeu frontal (gratuit) Cette rubrique vous emmènera dans un monde plein de créativité et de plaisir. En utilisant les connaissances de base de HTML, CSS et JavaScript, nous construirons ensemble divers jeux de pages intéressants. Que vous soyez débutant ou que vous ayez une certaine expérience en développement front-end, cette chronique est faite pour vous. Nous commencerons par les bases et vous guiderons à travers les compétences dont vous avez besoin pour créer un jeu de pages. A travers des cas pratiques et des exercices, vous apprendrez à utiliser HTML pour construire la structure des pages, à utiliser CSS pour embellir l'interface du jeu et à utiliser JavaScript pour ajouter des effets interactifs et dynamiques au jeu. Dans cette colonne, nous aborderons différents types de mini-jeux, notamment les jeux de labyrinthe, le casse-briques, le serpent, le dragueur de mines, les calculatrices, les batailles d'avions, le tic-tac-toe, les puzzles, les labyrinthes et bien plus encore. Chaque projet vous guide tout au long du processus de construction en étapes concises et claires, avec des explications détaillées et des exemples de code. Dans le même temps, nous partagerons également quelques conseils d’optimisation et bonnes pratiques pour vous aider à améliorer les performances des pages et l’expérience utilisateur. Que vous recherchiez un projet intéressant pour exercer vos compétences front-end, ou que vous soyez intéressé par le développement de jeux de pages, la rubrique jeux front-end sera votre meilleur choix.Cliquez pour vous abonner à la rubrique des jeux front-end

Insérer la description de l'image ici

Tutoriel transparent Vue3 [de zéro à un] (payant) Bienvenue dans le tutoriel sur la transparence de Vue3 ! Cette chronique vise à fournir à chacun des connaissances techniques complètes liées à Vue3. Si vous avez une certaine expérience de Vue2, cette colonne peut vous aider à maîtriser les concepts de base et l'utilisation de Vue3. Nous partirons de zéro et vous guiderons étape par étape pour créer une application Vue complète. A travers des cas pratiques et des exercices, vous apprendrez à utiliser la syntaxe des modèles de Vue3, le développement de composants, la gestion des états, le routage et d'autres fonctions. Nous présenterons également certaines fonctionnalités avancées, telles que Composition API et Teleport, pour vous aider à mieux comprendre et appliquer les nouvelles fonctionnalités de Vue3. Dans cette colonne, nous vous guiderons à travers chaque projet en étapes concises et claires, avec des explications détaillées et des exemples de code. Dans le même temps, nous partagerons également certains problèmes et solutions courants dans le développement de Vue3 pour vous aider à surmonter les difficultés et à améliorer l'efficacité du développement. Que vous souhaitiez apprendre Vue3 en profondeur ou que vous ayez besoin d'un guide complet pour créer un projet front-end, la colonne de didacticiels approfondis de Vue3 deviendra une ressource indispensable pour vous.Cliquez pour vous abonner à la colonne Tutoriel Transparent Vue3 [De zéro à un]

Insérer la description de l'image ici

Premiers pas avec TypeScript (gratuit) Il s'agit d'une rubrique conçue pour aider tout le monde à démarrer rapidement et à maîtriser les technologies liées à TypeScript. Grâce à un langage concis et clair et à des exemples de code riches, nous expliquerons en profondeur les concepts de base, la syntaxe et les fonctionnalités de TypeScript. Que vous soyez débutant ou développeur expérimenté, vous trouverez ici un parcours d'apprentissage qui vous convient. Des fonctionnalités de base telles que les annotations de type, les interfaces et les classes au développement modulaire, à la configuration des outils et à l'intégration avec des frameworks frontaux courants, nous couvrirons de manière exhaustive tous les aspects. En lisant cette colonne, vous pourrez améliorer la fiabilité et la maintenabilité du code JavaScript, et fournir une meilleure qualité de code et une meilleure efficacité de développement pour vos projets. Embarquons ensemble dans ce voyage TypeScript passionnant et stimulant !Cliquez pour vous abonner à la colonne Guide de démarrage de TypeScript

Insérer la description de l'image ici