<img loading="lazy" class="alignnone size-full wp-image-11479" src="https://www.htmlgoodies.com/wp-content/uploads/2022/03/ES6-javascript.png" alt="Exemples JavaScript" width="225" height="225" srcset="https://www.htmlgoodies.com/wp-content/uploads/2022/03/ES6-javascript.png 225w, https://www.htmlgoodies.com/wp-content/uploads/2022/03/ES6-javascript-150x150.png 150w" sizes="(max-width: 225px) 100vw, 225px" />
La déstructuration d’objet est une fonctionnalité JavaScript (ECMAScript 6) utile pour extraire des propriétés d’objets et les lier à des variables. Comme nous l’avons vu dans le Destructuration d’objet ES6 tutoriel, la déstructuration d’objet peut extraire plusieurs propriétés dans une seule instruction, accéder aux propriétés d’objets imbriqués et définir une valeur par défaut si la propriété n’existe pas. Dans le suivi d’aujourd’hui, nous examinerons la déstructuration mixte (objet et tableau), ainsi que la façon de déstructurer les arguments de fonction et de méthode.
Qu’est-ce que la déstructuration mixte en JavaScript ?
Comme évoqué dans l’intro, la déstructuration mixte implique la déclaration et la définition de variables à partir d’un objet qui contient des attributs de tableaux ou d’un tableau d’objets. Pour illustrer, voici un Objet Personne qui contient des éléments imbriqués d’Objets et de Tableaux :
const person = {
name: 'Rob',
location: {
city: 'Ottawa',
country: 'Canada',
phoneNumbers: ['555-1234', '555-2345'],
},
};
Nous pouvons ensuite utiliser ES6 Destructuring pour attribuer toutes les propriétés de l’objet à des variables individuelles en répliquant la structure de l’objet :
const {
name,
location: {
city,
country,
phoneNums: [phone1, phone2],
},
} = person;
// Now we can reference each variable without having to use dot (.) attribute accessors.
// Outputs "I am Rob from Ottawa, Canada. You can reach me at 555-1234 or 555-2345."
console.log(
`I am ${name} from ${city}, ${country}. You can reach me at ${phone1} or ${phone2}.`
);
Nous pouvons également utiliser ES6 Destructuring pour affecter des éléments Array à des variables individuelles, tant que nous connaissons à l’avance la longueur du tableau. Voici un exemple qui montre comment c’est fait :
const dataArray = [
{ data: 1 },
{ data: 2 },
{ data: 3 }
];
const [
{ data: val0 },
{ data: val1 },
{ data: val2 }
] = dataArray;
//Outputs "1, 2, 3"
console.log(`${val0}, ${val1}, ${val2}`);
L’astuce consiste à remplacer les valeurs des éléments par des variables dans lesquelles les stocker.
Lis: Un guide pour travailler avec des variables CSS
Déstructuration des arguments de fonction d’objet en JavaScript
Les objets passés aux fonctions peuvent être déstructurés dans la signature de la fonction où les arguments de la fonction sont définis. Cette fois, nous répliquerions la structure de l’objet dans la liste des arguments :
//Programmer Object containing nested elements
const programmer = {
name: 'George',
age: 29,
skills: {
languages: 'JavaScript, HTML, CSS',
databases: 'MySQL, MS SQL, MongoDB',
},
};
//The programmer object is destructured within the parameters of the function that is passed in
const displayEmployeeInfo = ({ name, age, skills: { languages, databases } }) => {
console.log(
`The employee name is ${name} and his age is ${age}.
He knows the following languages - ${languages}
and is familiar with the databases - ${databases}.`
);
}
//Invoke the displayEmployeeInfo() function with the programmer object
//Output: The employee name is George and his age is 29. He knows the following
//languages - JavaScript, HTML, CSS and is familiar with the databases - MySQL,
//MS SQL, MongoDB
displayEmployeeInfo(programmer);
Paramètres déstructurés et valeurs par défaut
Comme tous les paramètres de fonction, nous pouvons attribuer des valeurs par défaut à nos variables locales directement dans la signature de la fonction. Voici la displayEmployeeInfo() fonctionnent à nouveau avec des valeurs par défaut affectées aux variables compétences, langues et base de données :
//Programmer Object without skills
const programmer = {
name: 'George',
age: 29,
skills: {
languages: 'JavaScript, HTML, CSS'
}
};
const displayEmployeeInfo = ({ name, age, skills: { languages="none", databases="none" } }) => {
console.log(
`The employee name is ${name} and his age is ${age}.
He knows the following languages - ${languages}
and is familiar with the databases - ${databases}.`
);
}
//Invoke the displayEmployeeInfo() function with the programmer object
//Output: The employee name is George and his age is 29. He knows the following
//languages - JavaScript, HTML, CSS and is familiar with the databases - none
displayEmployeeInfo(programmer);
Rendre les paramètres déstructurés facultatifs
Notez que, même si nous avons spécifié des valeurs par défaut pour certaines des variables, si nous devions appeler le displayEmployeeInfo() fonction sans arguments, nous obtiendrions une erreur car des paramètres déstructurés sont toujours requis.
const displayEmployeeInfo = ({ name, age, skills: { languages="none", databases="none" } }) => {
console.log(
`The employee name is ${name} and his age is ${age}.
He knows the following languages - ${languages}
and is familiar with the databases - ${databases}.`
);
}
//Invoking the displayEmployeeInfo() function with no arguments
//throws the Error "TypeError: (destructured parameter) is undefined"
displayEmployeeInfo();
La clé pour éviter l’erreur ci-dessus consiste à attribuer un littéral d’objet de secours pour tous les objets de niveau supérieur, y compris l’objet programmeur et l’objet compétences imbriquées.
const displayEmployeeInfo = ({ name = "John Doe", age = "unknown", skills: { languages="none", databases="none" } = {} } = {}) => {
document.write(
`The employee name is ${name} and his age is ${age}.
He knows the following languages - ${languages}
and is familiar with the databases - ${databases}.`
);
}
//Invoking the function displayEmployeeInfo with the programmer object
//Output: The employee name is John Doe and his age is unknown. He knows the following
//languages - none and is familiar with the databases - none
displayEmployeeInfo();
Réflexions finales sur la déstructuration des objets mixtes et des arguments de fonction dans ES6
Dans ce didacticiel de développement Web, nous avons exploré quelques-unes des applications les plus avancées de la syntaxe de déstructuration ES6. Aussi puissant que soit la déstructuration en soi, ils sont capables de rationaliser encore plus votre code lorsqu’ils sont combinés avec d’autres fonctionnalités ES6 telles que Spread Syntax et Rest Parameters.
Vous trouverez un démo des exemples de code d’aujourd’hui sur codepen.io. Là, vous pouvez regarder le code et observer la sortie produite.
Lis: Outils de gestion de projet pour les développeurs Web
— to www.htmlgoodies.com
Jeu de briques
Snake
Pacman
Bubble