{"id":5618,"date":"2024-08-29T00:20:15","date_gmt":"2024-08-29T00:20:15","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/acceder-aux-elements-du-tableau-en-javascript\/"},"modified":"2024-08-29T00:20:19","modified_gmt":"2024-08-29T00:20:19","slug":"acceder-aux-elements-du-tableau-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/acceder-aux-elements-du-tableau-en-javascript\/","title":{"rendered":"8.5 Acc\u00e9der aux \u00c9l\u00e9ments du Tableau en JavaScript"},"content":{"rendered":"\n<p><strong>Acc\u00e9der aux \u00c9l\u00e9ments du Tableau en JavaScript<\/strong> est une comp\u00e9tence fondamentale pour tout d\u00e9veloppeur web. Comprendre comment manipuler les tableaux peut grandement am\u00e9liorer l&rsquo;efficacit\u00e9 et la flexibilit\u00e9 de vos applications JavaScript. Dans ce tutoriel, nous allons explorer des techniques pratiques et des exemples concrets pour acc\u00e9der et manipuler les \u00e9l\u00e9ments d&rsquo;un tableau en JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>\u00c9l\u00e9ments Tableau 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\/658886232?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>\ndocument.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>Un tableau en JavaScript est un objet global utilis\u00e9 pour stocker de multiples valeurs dans une seule variable. Apprendre \u00e0 acc\u00e9der \u00e0 ces valeurs est essentiel pour manipuler les donn\u00e9es efficacement. Explorons les diff\u00e9rentes m\u00e9thodes pour acc\u00e9der aux \u00e9l\u00e9ments des tableaux.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der aux \u00c9l\u00e9ments par leur Indice<\/h3>\n\n\n\n<p>La m\u00e9thode la plus courante pour acc\u00e9der aux \u00e9l\u00e9ments d&rsquo;un tableau est par leur indice. Les indices commencent \u00e0 0, ce qui signifie que le premier \u00e9l\u00e9ment d&rsquo;un tableau se trouve \u00e0 l&rsquo;indice 0, le second \u00e0 l&rsquo;indice 1, et ainsi de suite. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const fruits = [\"Pomme\", \"Banane\", \"Cerise\"];\nconsole.log(fruits[0]); \/\/ Affiche \"Pomme\"\nconsole.log(fruits[1]); \/\/ Affiche \"Banane\"\nconsole.log(fruits[2]); \/\/ Affiche \"Cerise\"<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la M\u00e9thode <code>forEach()<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>forEach()<\/code> permet d&rsquo;ex\u00e9cuter une fonction donn\u00e9e sur chacun des \u00e9l\u00e9ments du tableau. C&rsquo;est une mani\u00e8re intuitive et lisible de parcourir les \u00e9l\u00e9ments :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const fruits = [\"Pomme\", \"Banane\", \"Cerise\"];\nfruits.forEach((fruit, index) => {\n    console.log(`Fruit \u00e0 l'indice ${index}: ${fruit}`);\n});\n\/\/ Affiche:\n\/\/ Fruit \u00e0 l'indice 0: Pomme\n\/\/ Fruit \u00e0 l'indice 1: Banane\n\/\/ Fruit \u00e0 l'indice 2: Cerise<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der aux \u00c9l\u00e9ments avec la Boucle <code>for<\/code><\/h3>\n\n\n\n<p>Utiliser une boucle <code>for<\/code> est une m\u00e9thode classique pour parcourir et acc\u00e9der aux \u00e9l\u00e9ments d&rsquo;un tableau. Cela vous donne un contr\u00f4le pr\u00e9cis sur l&rsquo;ordre et la fr\u00e9quence d&rsquo;acc\u00e8s :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const fruits = [\"Pomme\", \"Banane\", \"Cerise\"];\nfor (let i = 0; i &lt; fruits.length; i++) {\n    console.log(`Fruit \u00e0 l'indice ${i}: ${fruits[i]}`);\n}\n\/\/ Affiche:\n\/\/ Fruit \u00e0 l'indice 0: Pomme\n\/\/ Fruit \u00e0 l'indice 1: Banane\n\/\/ Fruit \u00e0 l'indice 2: Cerise<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la Boucle <code>for...of<\/code><\/h3>\n\n\n\n<p>La boucle <code>for...of<\/code> est une syntaxe ES6 qui permet de parcourir de mani\u00e8re simple et efficace les \u00e9l\u00e9ments d&rsquo;un tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const fruits = [\"Pomme\", \"Banane\", \"Cerise\"];\nfor (const fruit of fruits) {\n    console.log(fruit);\n}\n\/\/ Affiche:\n\/\/ Pomme\n\/\/ Banane\n\/\/ Cerise<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der aux \u00c9l\u00e9ment avec <code>map()<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>map()<\/code> cr\u00e9e un nouveau tableau selon les r\u00e9sultats d&rsquo;une fonction appliqu\u00e9e sur chaque \u00e9l\u00e9ment du tableau initial. C&rsquo;est utile pour transformer les \u00e9l\u00e9ments :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const numbers = [1, 2, 3, 4];\nconst doubleNumbers = numbers.map((num) => num * 2);\nconsole.log(doubleNumbers); \/\/ Affiche [2, 4, 6, 8]<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la M\u00e9thode <code>filter()<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>filter()<\/code> cr\u00e9e un nouveau tableau avec tous les \u00e9l\u00e9ments qui passent un test fourni en argument sous forme de fonction :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const numbers = [1, 2, 3, 4];\nconst evenNumbers = numbers.filter((num) => num % 2 === 0);\nconsole.log(evenNumbers); \/\/ Affiche [2, 4]<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la M\u00e9thode <code>reduce()<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>reduce()<\/code> applique une fonction qui est un accumulateur sur chaque \u00e9l\u00e9ment du tableau (de gauche \u00e0 droite) pour le transformer en une valeur unique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const numbers = [1, 2, 3, 4];\nconst sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);\nconsole.log(sum); \/\/ Affiche 10<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der aux \u00c9l\u00e9ments avec la M\u00e9thode <code>find()<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>find()<\/code> renvoie la premi\u00e8re valeur trouv\u00e9e dans le tableau qui satisfait la fonction de test fournie. Cette m\u00e9thode est particuli\u00e8rement utile pour trouver un \u00e9l\u00e9ment unique bas\u00e9 sur une condition :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const users = [\n    { id: 1, name: 'John' },\n    { id: 2, name: 'Jane' },\n    { id: 3, name: 'Joe' },\n];\nconst user = users.find(user => user.id === 2);\nconsole.log(user); \/\/ Affiche { id: 2, name: 'Jane' }<\/code><\/pre>\n\n\n\n<p>Pour enrichir votre compr\u00e9hension des tableaux en JavaScript, n&rsquo;h\u00e9sitez pas \u00e0 consulter des ressources telles que la <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\" target=\"_blank\" rel=\"noopener\">documentation MDN<\/a> et des tutoriels suppl\u00e9mentaires. Vous trouverez \u00e9galement des pratiques guid\u00e9es sur des plateformes comme <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> et <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noopener\">Udemy<\/a> qui offrent des cours complets sur JavaScript. Si vous cherchez plus de conseils sur <a href=\"qu-est-ce-qu-une-variable-en-javascript\">qu&rsquo;est-ce qu&rsquo;une variable en JavaScript<\/a> ou d&rsquo;autres aspects comme <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\">les extensions pour JavaScript<\/a>, Wikiform est une excellente ressource.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Acc\u00e9der aux \u00e9l\u00e9ments du tableau en JavaScript est une comp\u00e9tence essentielle qui ouvre la porte \u00e0 une manipulation de donn\u00e9es flexible et puissante. Que vous utilisiez des boucles classiques, des m\u00e9thodes modernes comme <code>foreach()<\/code> et <code>map()<\/code>, ou encore des techniques avanc\u00e9es comme <code>reduce()<\/code> et <code>find()<\/code>, ma\u00eetriser ces approches vous permettra de devenir un d\u00e9veloppeur JavaScript plus efficace. Continuez \u00e0 explorer et \u00e0 pratiquer pour approfondir votre ma\u00eetrise des tableaux en JavaScript. Pour aller plus loin, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">cours complet sur les fondamentaux de JavaScript<\/a> et notre <a href=\"https:\/\/wikiform.fr\/codespace\/manipuler-tableaux-arrays-javascript-tutoriel\">tutoriel sur la manipulation des tableaux<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-javascript\/144\" 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-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Acc\u00e9der aux \u00c9l\u00e9ments du Tableau en JavaScript est une comp\u00e9tence fondamentale pour tout d\u00e9veloppeur web. Comprendre comment manipuler les tableaux peut grandement am\u00e9liorer l&rsquo;efficacit\u00e9 et&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2839,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5618","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\/5618","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=5618"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5618\/revisions"}],"predecessor-version":[{"id":5619,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5618\/revisions\/5619"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2839"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}