Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
web:javascript:fondamentaux:objets [2021/06/21 06:56] – phil | web:javascript:fondamentaux:objets [2021/08/11 10:47] (Version actuelle) – [3. Ajouter des valeurs dans un objet] phil | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | [[web: | ||
+ | |||
+ | ==== JavaScript - Programmation objet et JSON ==== | ||
+ | |||
+ | [Mise à jour le 11/8/2021] | ||
+ | |||
+ | * **Sources** et compléments sur **MDN Web Docs** | ||
+ | * < | ||
+ | * < | ||
+ | |||
+ | * ** Lectures connexes** | ||
+ | * Wikis WebPEM : [[: | ||
+ | |||
+ | ---- | ||
+ | |||
+ | < | ||
+ | |||
+ | === 1. Créer un objet === | ||
+ | Pour créer un objet, il faut insérer des accolades (**{ }**). La **clé** se place avant les " | ||
+ | |||
+ | // | ||
+ | <code javascript *.js> | ||
+ | var objet = {}; // Objet vide | ||
+ | |||
+ | var voiture = { // Objet littéral, car voiture est définie en une seule fois | ||
+ | marque :" | ||
+ | type : " | ||
+ | couleur: " | ||
+ | nombre: 2, | ||
+ | "En vente " : " | ||
+ | }; | ||
+ | </ | ||
+ | |||
+ | <note tip>Les clés étant obligatoirement des chaînes de caractères, | ||
+ | |||
+ | === 2. Valeurs d'un objet === | ||
+ | Pour accéder aux valeurs d'un objet, il suffit de placer la clé entre des guillemets et dans des crochets ou de la **lier** avec un **point**. | ||
+ | |||
+ | // | ||
+ | <code javascript> | ||
+ | var voiture = { | ||
+ | marque :" | ||
+ | type : " | ||
+ | couleur : " | ||
+ | nombre : 2, | ||
+ | "En vente " : true | ||
+ | }; | ||
+ | // Première possibilité (même principe que les tableaux) ou deuxième possibilité (en utilisant un lien : le point) | ||
+ | voiture[" | ||
+ | voiture.marque; | ||
+ | </ | ||
+ | |||
+ | <note tip>Pour extraire la liste complète des clés d'un objet : appliquer la méthode // | ||
+ | |||
+ | //Exemple// | ||
+ | <code javascript *.js> | ||
+ | Object.keys(voiture); | ||
+ | </ | ||
+ | |||
+ | === 3. Ajout de valeurs === | ||
+ | |||
+ | // | ||
+ | <code javascript *.js> | ||
+ | var voiture = {}; // Première possibilité : même principe que les tableaux | ||
+ | voiture[" | ||
+ | voiture[" | ||
+ | voiture[" | ||
+ | // ou | ||
+ | var voiture = {}; | ||
+ | voiture.marque = " | ||
+ | voiture.type = " | ||
+ | voiture.couleur = " | ||
+ | </ | ||
+ | |||
+ | === 4. Combiner des tableaux et des objets === | ||
+ | Il est possible d' | ||
+ | |||
+ | // | ||
+ | <code javascript *.js> | ||
+ | var voitures = [ // Tableau d' | ||
+ | { marque : " | ||
+ | { marque : " | ||
+ | { marque : " | ||
+ | ]; | ||
+ | // Accès aux éléments du tableau | ||
+ | voitures[0]; | ||
+ | voitures[1][" | ||
+ | voitures[2].type; | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | === 5. Explorer des objets dans la console === | ||
+ | Le navigateur permet de connaître le détail des objets qu'il affiche dans la console. | ||
+ | |||
+ | {{ : | ||
+ | // | ||
+ | <code javascript *.js> | ||
+ | var amis = [ | ||
+ | | ||
+ | | ||
+ | ]; | ||
+ | |||
+ | amis; // résultat dans la console : | ||
+ | </ | ||
+ | |||
+ | === 6. Parcourir un objet avec une boucle for in === | ||
+ | Il n'est pas possible de parcourir un objet littéral avec une boucle **for**. Normal, puisqu' | ||
+ | En revanche, la boucle **for in** se révèle très intéressante ! | ||
+ | |||
+ | La boucle for in est l' | ||
+ | Le fonctionnement est quasiment le même que pour un tableau, excepté qu'ici il suffit de fournir une « **variable clé** » qui reçoit un identifiant (au lieu d'un index) et de spécifier l' | ||
+ | |||
+ | // | ||
+ | <code javascript *.js> | ||
+ | var posX = { | ||
+ | x1 : 12, | ||
+ | x2 : 14, | ||
+ | x3 : 16 | ||
+ | }; | ||
+ | |||
+ | for (var id in posX) { // On stocke l' | ||
+ | |||
+ | console.log(posX[id]); | ||
+ | } | ||
+ | // résultat dans la console : 12 14 16 | ||
+ | </ | ||
+ | |||
+ | === 7. Pour aller plus loin... === | ||
+ | < | ||
+ | " target=" | ||