{"id":5612,"date":"2024-08-29T00:08:08","date_gmt":"2024-08-29T00:08:08","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-un-tableau-simple-en-javascript-tutoriel\/"},"modified":"2025-01-07T16:29:31","modified_gmt":"2025-01-07T16:29:31","slug":"creer-un-tableau-simple-en-javascript-tutoriel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-un-tableau-simple-en-javascript-tutoriel\/","title":{"rendered":"8.2 Cr\u00e9er un Tableau Simple en JavaScript : Tutoriel"},"content":{"rendered":"\n\n\n<p><strong>Cr\u00e9er Tableau JavaScript<\/strong> est essentiel pour manipuler des ensembles de donn\u00e9es et r\u00e9aliser des op\u00e9rations complexes. Comprendre comment cr\u00e9er et utiliser des <strong>tableaux en JavaScript<\/strong> peut grandement simplifier votre d\u00e9veloppement et vous permettre de g\u00e9rer efficacement des collections d&rsquo;\u00e9l\u00e9ments. Apprenons comment ils fonctionnent et comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Tableaux 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\/658885960?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 des donn\u00e9es sous forme de liste. Un tableau peut contenir des \u00e9l\u00e9ments de diff\u00e9rents types, que ce soit des cha\u00eenes de caract\u00e8res, des nombres, des objets ou m\u00eame d&rsquo;autres tableaux. Les \u00e9l\u00e9ments d&rsquo;un tableau sont accessibles \u00e0 l&rsquo;aide d&rsquo;indices, permettant de les manipuler individuellement ou en groupe.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Tableau en JavaScript<\/h3>\n\n\n\n<p>Pour cr\u00e9er un tableau en JavaScript, vous pouvez utiliser une syntaxe tr\u00e8s simple. Vous avez la possibilit\u00e9 de d\u00e9clarer un tableau vide ou de l&rsquo;initialiser directement avec des \u00e9l\u00e9ments. Voici un exemple de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er un tableau vide\nlet monTableau = &#91;];\n\n\/\/ Cr\u00e9er un tableau avec des \u00e9l\u00e9ments\nlet fruits = &#91;\"Pomme\", \"Banane\", \"Orange\"];\n\nconsole.log(fruits); \/\/ Affiche &#91;'Pomme', 'Banane', 'Orange']\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der aux \u00c9l\u00e9ments d&rsquo;un Tableau<\/h3>\n\n\n\n<p>Les \u00e9l\u00e9ments d&rsquo;un tableau sont accessible via des indices, qui commencent \u00e0 0 pour le premier \u00e9l\u00e9ment. Vous pouvez utiliser des indices pour lire ou modifier les \u00e9l\u00e9ments du tableau. Examinons ce concept par un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = &#91;\"Pomme\", \"Banane\", \"Orange\"];\n\n\/\/ Acc\u00e9der au premier \u00e9l\u00e9ment\nlet premierFruit = fruits&#91;0];\nconsole.log(premierFruit); \/\/ Affiche 'Pomme'\n\n\/\/ Modifier le deuxi\u00e8me \u00e9l\u00e9ment\nfruits&#91;1] = \"Mangue\";\nconsole.log(fruits); \/\/ Affiche &#91;'Pomme', 'Mangue', 'Orange']\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter et Supprimer des \u00c9l\u00e9ments dans un Tableau<\/h3>\n\n\n\n<p>JavaScript offre plusieurs m\u00e9thodes pour ajouter ou supprimer des \u00e9l\u00e9ments d&rsquo;un tableau, telles que <code>push()<\/code> pour ajouter \u00e0 la fin, <code>unshift()<\/code> pour ajouter au d\u00e9but, <code>pop()<\/code> pour retirer de la fin et <code>shift()<\/code> pour retirer du d\u00e9but. Voyons comment utiliser ces m\u00e9thodes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = &#91;\"Pomme\", \"Banane\", \"Orange\"];\n\n\/\/ Ajouter un \u00e9l\u00e9ment \u00e0 la fin\nfruits.push(\"Fraise\");\nconsole.log(fruits); \/\/ Affiche &#91;'Pomme', 'Banane', 'Orange', 'Fraise']\n\n\/\/ Ajouter un \u00e9l\u00e9ment au d\u00e9but\nfruits.unshift(\"Kiwi\");\nconsole.log(fruits); \/\/ Affiche &#91;'Kiwi', 'Pomme', 'Banane', 'Orange', 'Fraise']\n\n\/\/ Retirer le dernier \u00e9l\u00e9ment\nfruits.pop();\nconsole.log(fruits); \/\/ Affiche &#91;'Kiwi', 'Pomme', 'Banane', 'Orange']\n\n\/\/ Retirer le premier \u00e9l\u00e9ment\nfruits.shift();\nconsole.log(fruits); \/\/ Affiche &#91;'Pomme', 'Banane', 'Orange']\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Parcourir un Tableau avec une Boucle<\/h3>\n\n\n\n<p>Vous pouvez parcourir les \u00e9l\u00e9ments d&rsquo;un tableau en utilisant diff\u00e9rentes structures de boucle telles que <code>for<\/code>, <code>for...of<\/code>, et <code>forEach<\/code>. Ces boucles vous permettent de r\u00e9aliser des op\u00e9rations sur chaque \u00e9l\u00e9ment du tableau. Voici quelques exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = &#91;\"Pomme\", \"Banane\", \"Orange\"];\n\n\/\/ Utiliser une boucle for\nfor (let i = 0; i &lt; fruits.length; i++) {\n  console.log(fruits&#91;i]);\n}\n\n\/\/ Utiliser une boucle for...of\nfor (let fruit of fruits) {\n  console.log(fruit);\n}\n\n\/\/ Utiliser la m\u00e9thode forEach\nfruits.forEach(function(fruit) {\n  console.log(fruit);\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipulation Avanc\u00e9e des Tableaux<\/h3>\n\n\n\n<p>Vous pouvez r\u00e9aliser des manipulations avanc\u00e9es sur les tableaux en utilisant les m\u00e9thodes disponibles telles que <code>map()<\/code>, <code>filter()<\/code>, <code>reduce()<\/code>, et bien d&rsquo;autres. Ces m\u00e9thodes permettent de transformer, filtrer et agr\u00e9ger les \u00e9l\u00e9ments d&rsquo;un tableau de mani\u00e8re efficace. Voici quelques exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let nombres = &#91;1, 2, 3, 4, 5];\n\n\/\/ Utiliser map pour doubler chaque \u00e9l\u00e9ment\nlet doubles = nombres.map(n =&gt; n * 2);\nconsole.log(doubles); \/\/ Affiche &#91;2, 4, 6, 8, 10]\n\n\/\/ Utiliser filter pour s\u00e9lectionner les nombres pairs\nlet pairs = nombres.filter(n =&gt; n % 2 === 0);\nconsole.log(pairs); \/\/ Affiche &#91;2, 4]\n\n\/\/ Utiliser reduce pour calculer la somme des \u00e9l\u00e9ments\nlet somme = nombres.reduce((acc, n) =&gt; acc + n, 0);\nconsole.log(somme); \/\/ Affiche 15\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>tableaux en JavaScript<\/strong> sont des outils puissants pour g\u00e9rer des ensembles de donn\u00e9es de mani\u00e8re flexible et efficace. En ma\u00eetrisant les diff\u00e9rentes m\u00e9thodes de manipulation des tableaux, vous pouvez optimiser vos scripts et rendre vos applications plus robustes. Continuez \u00e0 explorer les possibilit\u00e9s offertes par JavaScript pour d\u00e9couvrir d&rsquo;autres techniques avanc\u00e9es et am\u00e9liorer encore vos comp\u00e9tences en d\u00e9veloppement web. Pour plus de tutoriels, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-tableau-en-javascript\">qu&rsquo;est-ce qu&rsquo;un tableau en JavaScript<\/a> pour approfondir vos connaissances. Pour une base solide, vous pouvez \u00e9galement lire sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-un-tableau-simple-en-javascript-tutoriel\">cr\u00e9er un tableau simple en JavaScript tutoriel<\/a>.<\/p>\n\n\n\n<p>Si vous souhaitez enrichir vos comp\u00e9tences, apprenez \u00e0 utiliser <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-foreach-en-javascript-guide-complet\">boucles forEach en JavaScript<\/a>, ou d\u00e9couvrez les <a href=\"https:\/\/wikiform.fr\/codespace\/principales-fonctions-des-tableaux-en-javascript\">principales fonctions des tableaux en JavaScript<\/a> et comment les appliquer. Ma\u00eetrisez des sujets plus avanc\u00e9s avec notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-spread-operator-en-javascript-guide\">utiliser spread operator en JavaScript<\/a>.<\/p>\n\n\n\n<p>D\u00e9couvrez \u00e9galement notre tutoriel d\u00e9taill\u00e9 pour <a href=\"https:\/\/wikiform.fr\/codespace\/creer-un-tableau-associatif-en-javascript\">cr\u00e9er un tableau associatif en JavaScript<\/a> et des conseils pratiques sur <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-elements-dom-js-textcontent-innerhtml\">modifier des \u00e9l\u00e9ments du DOM avec 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","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9er Tableau JavaScript est essentiel pour manipuler des ensembles de donn\u00e9es et r\u00e9aliser des op\u00e9rations complexes. Comprendre comment cr\u00e9er et utiliser des tableaux en JavaScript&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2869,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5612","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\/5612","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=5612"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5612\/revisions"}],"predecessor-version":[{"id":6104,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5612\/revisions\/6104"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2869"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}