{"id":5616,"date":"2024-08-29T00:16:09","date_gmt":"2024-08-29T00:16:09","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-un-tableau-associatif-en-javascript\/"},"modified":"2024-08-29T00:16:13","modified_gmt":"2024-08-29T00:16:13","slug":"creer-un-tableau-associatif-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-un-tableau-associatif-en-javascript\/","title":{"rendered":"8.4 Cr\u00e9er un Tableau Associatif en JavaScript"},"content":{"rendered":"\n<p><strong>Cr\u00e9er un Tableau Associatif en JavaScript<\/strong> constitue une des bases fondamentales de la programmation c\u00f4t\u00e9 client. Comprendre comment manipuler les <strong>tableaux associatifs en JavaScript<\/strong> peut grandement am\u00e9liorer vos comp\u00e9tences en d\u00e9veloppement Web. Apprenons ensemble comment les cr\u00e9er et les utiliser gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Tableaux Associatifs en JavaScript<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658886135?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\n  document.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n      if (!isPopupDisplayed) {\n        player.on('timeupdate', function(data) {\n          if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n            \/\/ Pause the video and display the popup\n            player.pause().then(function() {\n              if (window.innerWidth > 768) {\n                document.querySelector('.desktop-popup').style.display = 'block';\n              } else {\n                document.querySelector('.mobile-popup').style.display = 'block';\n              }\n              fetchPriceAndUpdatePopup();\n              isPopupDisplayed = true;\n            });\n          }\n        });\n      }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n      fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n        .then(response => response.text())\n        .then(html => {\n          var parser = new DOMParser();\n          var fetchedDoc = parser.parseFromString(html, 'text\/html');\n          var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n          var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n          var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n          var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n          document.getElementById('price').textContent = price;\n          document.getElementById('priceMobile').textContent = price;\n          document.querySelector('.desktop-popup del').textContent = originalPrice;\n          document.querySelector('.mobile-popup del').textContent = originalPrice;\n        })\n        .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n      document.querySelector('.desktop-popup').style.display = 'none';\n      document.querySelector('.mobile-popup').style.display = 'none';\n      player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n  });\n<\/script>\n\n\n\n<p>En JavaScript, un tableau associatif est simplement un objet utilis\u00e9 pour stocker des paires cl\u00e9-valeur. Contrairement \u00e0 un tableau standard, o\u00f9 les \u00e9l\u00e9ments sont acc\u00e9d\u00e9s via des indices num\u00e9riques, les propri\u00e9t\u00e9s d&rsquo;un objet sont acc\u00e9d\u00e9es via des cl\u00e9s. Pour d\u00e9couvrir davantage sur l&rsquo;utilit\u00e9 de JavaScript, vous pouvez consulter notre rubrique sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">Qu&rsquo;est-ce que JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Tableau Associatif en JavaScript<\/h3>\n\n\n\n<p>Commen\u00e7ons par cr\u00e9er un simple tableau associatif en utilisant des objets JavaScript. Un objet est cr\u00e9\u00e9 avec des accolades et les paires cl\u00e9-valeur sont d\u00e9finies en utilisant le format <code>cl\u00e9: valeur<\/code>. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let tableauAssociatif = {\n  \"nom\": \"Dupont\",\n  \"\u00e2ge\": 30,\n  \"profession\": \"D\u00e9veloppeur\"\n};\n\nconsole.log(tableauAssociatif.nom); \/\/ Affiche \"Dupont\"\nconsole.log(tableauAssociatif[\"\u00e2ge\"]); \/\/ Affiche 30\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter et Modifier des \u00c9l\u00e9ments dans le Tableau Associatif<\/h3>\n\n\n\n<p>Pour ajouter ou modifier des \u00e9l\u00e9ments dans un tableau associatif, vous pouvez utiliser la notation par point (dot notation) ou la notation par crochets (bracket notation). Voici comment proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let tableauAssociatif = {\n  \"nom\": \"Dupont\",\n  \"\u00e2ge\": 30,\n  \"profession\": \"D\u00e9veloppeur\"\n};\n\n\/\/ Ajouter un nouvel \u00e9l\u00e9ment\ntableauAssociatif.salaire = 50000;\ntableauAssociatif[\"ville\"] = \"Paris\";\n\n\/\/ Modifier un \u00e9l\u00e9ment existant\ntableauAssociatif.\u00e2ge = 31;\ntableauAssociatif[\"nom\"] = \"Durand\";\n\nconsole.log(tableauAssociatif);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Supprimer des \u00c9l\u00e9ments dans un Tableau Associatif<\/h3>\n\n\n\n<p>La suppression d&rsquo;un \u00e9l\u00e9ment dans un tableau associatif se fait \u00e0 l&rsquo;aide de l&rsquo;op\u00e9rateur <code>delete<\/code>. Regardons un exemple pratique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let tableauAssociatif = {\n  \"nom\": \"Dupont\",\n  \"\u00e2ge\": 30,\n  \"profession\": \"D\u00e9veloppeur\",\n  \"ville\": \"Paris\"\n};\n\n\/\/ Suppression d'\u00e9l\u00e9ments\ndelete tableauAssociatif.ville;\ndelete tableauAssociatif[\"profession\"];\n\nconsole.log(tableauAssociatif);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Parcourir un Tableau Associatif<\/h3>\n\n\n\n<p>Pour parcourir les \u00e9l\u00e9ments d&rsquo;un tableau associatif, vous pouvez utiliser une boucle <code>for...in<\/code>. Cette boucle permet d&rsquo;it\u00e9rer sur toutes les propri\u00e9t\u00e9s d&rsquo;un objet. Voici comment faire :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let tableauAssociatif = {\n  \"nom\": \"Dupont\",\n  \"\u00e2ge\": 30,\n  \"ville\": \"Paris\"\n};\n\nfor (let cl\u00e9 in tableauAssociatif) {\n  console.log(`Cl\u00e9: ${cl\u00e9}, Valeur: ${tableauAssociatif[cl\u00e9]}`);\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Avanc\u00e9e des Tableaux Associatifs<\/h3>\n\n\n\n<p>Pour aller plus loin, vous pouvez combiner les objets avec d&rsquo;autres structures de donn\u00e9es comme les tableaux, cr\u00e9ant ainsi des structures de donn\u00e9es complexes et puissantes. Voici un exemple d&rsquo;un tableau de tableaux associatifs :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let employ\u00e9s = [\n  { \"nom\": \"Dupont\", \"\u00e2ge\": 30, \"profession\": \"D\u00e9veloppeur\" },\n  { \"nom\": \"Martin\", \"\u00e2ge\": 27, \"profession\": \"Designer\" },\n  { \"nom\": \"Durand\", \"\u00e2ge\": 35, \"profession\": \"Chef de projet\" }\n];\n\nemploy\u00e9s.forEach(emploi => {\n  console.log(`${emploi.nom}, ${emploi.\u00e2ge} ans, est ${emploi.profession}`);\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipulation des Cl\u00e9s et Valeurs<\/h3>\n\n\n\n<p>JavaScript offre des m\u00e9thodes pour manipuler facilement les cl\u00e9s et les valeurs des objets. Par exemple, les m\u00e9thodes <code>Object.keys()<\/code>, <code>Object.values()<\/code> et <code>Object.entries()<\/code> sont tr\u00e8s utiles pour les op\u00e9rations sur les tableaux associatifs :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let tableauAssociatif = {\n  \"nom\": \"Dupont\",\n  \"\u00e2ge\": 30,\n  \"ville\": \"Paris\"\n};\n\nlet cl\u00e9s = Object.keys(tableauAssociatif);\nlet valeurs = Object.values(tableauAssociatif);\nlet entr\u00e9es = Object.entries(tableauAssociatif);\n\nconsole.log(cl\u00e9s);    \/\/ [\"nom\", \"\u00e2ge\", \"ville\"]\nconsole.log(valeurs); \/\/ [\"Dupont\", 30, \"Paris\"]\nconsole.log(entr\u00e9es); \/\/ [[\"nom\", \"Dupont\"], [\"\u00e2ge\", 30], [\"ville\", \"Paris\"]]\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>tableaux associatifs en JavaScript<\/strong> sont des outils essentiels pour le d\u00e9veloppement Web. Ils permettent de structurer et de manipuler efficacement les donn\u00e9es par paires cl\u00e9-valeur. En ma\u00eetrisant ces concepts, vous pouvez \u00e9crire du code plus clair, plus organis\u00e9 et plus performant. Pour aller plus loin, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">cours sur les fondamentaux de JavaScript<\/a> et explorez de nombreuses autres ressources pour am\u00e9liorer vos comp\u00e9tences. Vous pouvez \u00e9galement d\u00e9couvrir la place des variables dans les tableaux associatifs dans notre rubrique sur la <a href=\"https:\/\/wikiform.fr\/codespace\/portee-des-variables-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">port\u00e9e des variables en JavaScript<\/a> et apprendre davantage sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-avancee-des-tableaux-en-javascript\" target=\"_blank\" rel=\"noopener\">utilisation avanc\u00e9e des tableaux en JavaScript<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9er un Tableau Associatif en JavaScript constitue une des bases fondamentales de la programmation c\u00f4t\u00e9 client. Comprendre comment manipuler les tableaux associatifs en JavaScript peut&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2868,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5616","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-4-javascript","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5616"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5616\/revisions"}],"predecessor-version":[{"id":5617,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5616\/revisions\/5617"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2868"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}