Guide Complet sur les Tableaux en JavaScript<\/title>\n <meta name=\"description\" content=\"Apprenez comment utiliser les tableaux en JavaScript pour am\u00e9liorer vos comp\u00e9tences en programmation. D\u00e9couvrez des exemples pratiques et des m\u00e9thodes avanc\u00e9es.\">\n<\/head>\n<body>\n\n\n<p><strong>Les tableaux en JavaScript<\/strong> sont une structure de donn\u00e9es tr\u00e8s puissante et flexible utilis\u00e9e pour stocker des listes d’\u00e9l\u00e9ments. Apprendre \u00e0 les utiliser peut consid\u00e9rablement am\u00e9liorer vos comp\u00e9tences en programmation et votre capacit\u00e9 \u00e0 g\u00e9rer divers types de donn\u00e9es dans vos applications web. Explorons ensemble ces outils fondamentaux de JavaScript avec 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\/658885866?dnt=1&fullscreen=0&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 \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 \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 collections de donn\u00e9es. Ces \u00e9l\u00e9ments de donn\u00e9es peuvent \u00eatre de diff\u00e9rents types, y compris des nombres, des cha\u00eenes de caract\u00e8res, des objets et m\u00eame d’autres tableaux. Voici un aper\u00e7u des principales fonctionnalit\u00e9s des tableaux.<\/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 avez plusieurs options, dont l’utilisation de l’objet <code>Array<\/code> ou des crochets <code>[]<\/code>. Voici quelques exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9ation de tableaux\nlet fruits = [\"Pomme\", \"Banane\", \"Orange\"];\nlet numbers = [1, 2, 3, 4, 5];\nlet mixedArray = [42, \"Hello\", true, {name: \"John\"}, [10, 20]];\n\nconsole.log(fruits); \/\/ [\"Pomme\", \"Banane\", \"Orange\"]\nconsole.log(mixedArray); \/\/ [42, \"Hello\", true, Object, Array]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der aux \u00c9l\u00e9ments d’un Tableau<\/h3>\n\n\n\n<p>Pour acc\u00e9der aux \u00e9l\u00e9ments d’un tableau, utilisez l’indexation avec des crochets <code>[]<\/code>. Les index des tableaux commencent \u00e0 0 pour le premier \u00e9l\u00e9ment. Voici comment acc\u00e9der \u00e0 diff\u00e9rents \u00e9l\u00e9ments :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"Pomme\", \"Banane\", \"Orange\"];\n\nconsole.log(fruits[0]); \/\/ \"Pomme\"\nconsole.log(fruits[1]); \/\/ \"Banane\"\nconsole.log(fruits[2]); \/\/ \"Orange\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Modifier les \u00c9l\u00e9ments d’un Tableau<\/h3>\n\n\n\n<p>Les tableaux en JavaScript sont mutables, ce qui signifie que vous pouvez changer leurs \u00e9l\u00e9ments apr\u00e8s leur cr\u00e9ation. Voyons comment modifier les \u00e9l\u00e9ments d’un tableau existant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"Pomme\", \"Banane\", \"Orange\"];\n\nfruits[1] = \"Mango\"; \/\/ Remplacer \"Banane\" par \"Mango\"\n\nconsole.log(fruits); \/\/ [\"Pomme\", \"Mango\", \"Orange\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter et Supprimer des \u00c9l\u00e9ments d’un Tableau<\/h3>\n\n\n\n<p>JavaScript offre plusieurs m\u00e9thodes pour manipuler les tableaux, y compris l’ajout et la suppression d’\u00e9l\u00e9ments. Voici quelques m\u00e9thodes couramment utilis\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"Pomme\", \"Banane\", \"Orange\"];\n\n\/\/ Ajouter un \u00e9l\u00e9ment \u00e0 la fin\nfruits.push(\"Kiwi\");\n\nconsole.log(fruits); \/\/ [\"Pomme\", \"Banane\", \"Orange\", \"Kiwi\"]\n\n\/\/ Supprimer le dernier \u00e9l\u00e9ment\nfruits.pop();\n\nconsole.log(fruits); \/\/ [\"Pomme\", \"Banane\", \"Orange\"]\n\n\/\/ Ajouter un \u00e9l\u00e9ment au d\u00e9but\nfruits.unshift(\"Fraise\");\n\nconsole.log(fruits); \/\/ [\"Fraise\", \"Pomme\", \"Banane\", \"Orange\"]\n\n\/\/ Supprimer le premier \u00e9l\u00e9ment\nfruits.shift();\n\nconsole.log(fruits); \/\/ [\"Pomme\", \"Banane\", \"Orange\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les M\u00e9thodes Avanc\u00e9es sur les Tableaux<\/h3>\n\n\n\n<p>Les tableaux en JavaScript viennent avec un ensemble riche de m\u00e9thodes avanc\u00e9es pour effectuer des op\u00e9rations complexes. Explorons quelques-unes de ces m\u00e9thodes :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">M\u00e9thode <code>map()<\/code><\/h4>\n\n\n\n<p>La m\u00e9thode <code>map()<\/code> cr\u00e9e un nouveau tableau avec les r\u00e9sultats de l’appel d’une fonction fournie sur chaque \u00e9l\u00e9ment du tableau appelant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let numbers = [1, 2, 3, 4, 5];\nlet squaredNumbers = numbers.map(num => num * num);\n\nconsole.log(squaredNumbers); \/\/ [1, 4, 9, 16, 25]\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">M\u00e9thode <code>filter()<\/code><\/h4>\n\n\n\n<p>La m\u00e9thode <code>filter()<\/code> cr\u00e9e un nouveau tableau avec tous les \u00e9l\u00e9ments qui passent le test impl\u00e9ment\u00e9 par la fonction fournie :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let numbers = [1, 2, 3, 4, 5, 6];\nlet evenNumbers = numbers.filter(num => num % 2 === 0);\n\nconsole.log(evenNumbers); \/\/ [2, 4, 6]\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">M\u00e9thode <code>reduce()<\/code><\/h4>\n\n\n\n<p>La m\u00e9thode <code>reduce()<\/code> applique une fonction sur un accumulateur et chaque valeur du tableau (de gauche \u00e0 droite) pour les r\u00e9duire en une seule valeur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let numbers = [1, 2, 3, 4, 5];\nlet sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);\n\nconsole.log(sum); \/\/ 15\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion : Maximisez l’Usage des Tableaux JavaScript<\/h2>\n\n\n\n<p>Les <strong>tableaux en JavaScript<\/strong> sont une partie int\u00e9grante de la gestion des donn\u00e9es dans la programmation web. En ma\u00eetrisant la cr\u00e9ation, l’acc\u00e8s, la modification, et l’utilisation des m\u00e9thodes avanc\u00e9es pour les tableaux, vous augmenterez consid\u00e9rablement votre efficacit\u00e9 en tant que d\u00e9veloppeur. Continuez \u00e0 explorer les fonctionnalit\u00e9s des tableaux pour d\u00e9couvrir encore plus de possibilit\u00e9s et optimiser vos applications. Pour plus de tutoriels sur JavaScript, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">cours sur les fondamentaux de JavaScript<\/a>.<\/p>\n\n\n\n<p>Si vous souhaitez approfondir vos connaissances sur d’autres aspects de JavaScript, consultez ces guides utiles :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-tableau-en-javascript\">Qu’est-ce qu’un tableau en JavaScript ?<\/a><\/li>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/operations-mathematiques-en-javascript-tutoriel\">Op\u00e9rations Math\u00e9matiques en JavaScript<\/a><\/li>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/conditions-if-else-en-javascript-guide\">Conditions If-Else en JavaScript<\/a><\/li>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-existantes-en-javascript\">Utiliser les Fonctions Existantes en JavaScript<\/a><\/li>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/boucles-for-en-javascript-utilisation\">Boucles For en JavaScript<\/a><\/li>\n<\/ul>\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<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Guide Complet sur les Tableaux en JavaScript Les tableaux en JavaScript sont une structure de donn\u00e9es tr\u00e8s puissante et flexible utilis\u00e9e pour stocker des listes…<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5610","post","type-post","status-publish","format-standard","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\/5610","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=5610"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5610\/revisions"}],"predecessor-version":[{"id":5611,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5610\/revisions\/5611"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5610,"date":"2024-08-29T00:04:13","date_gmt":"2024-08-29T00:04:13","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-tableau-en-javascript\/"},"modified":"2024-08-29T00:04:16","modified_gmt":"2024-08-29T00:04:16","slug":"qu-est-ce-qu-un-tableau-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-tableau-en-javascript\/","title":{"rendered":"8.1 Qu’est-ce qu’un Tableau en JavaScript ?"},"content":{"rendered":"\n\n\n Guide Complet sur les Tableaux en JavaScript<\/title>\n <meta name=\"description\" content=\"Apprenez comment utiliser les tableaux en JavaScript pour am\u00e9liorer vos comp\u00e9tences en programmation. D\u00e9couvrez des exemples pratiques et des m\u00e9thodes avanc\u00e9es.\">\n<\/head>\n<body>\n\n\n<p><strong>Les tableaux en JavaScript<\/strong> sont une structure de donn\u00e9es tr\u00e8s puissante et flexible utilis\u00e9e pour stocker des listes d’\u00e9l\u00e9ments. Apprendre \u00e0 les utiliser peut consid\u00e9rablement am\u00e9liorer vos comp\u00e9tences en programmation et votre capacit\u00e9 \u00e0 g\u00e9rer divers types de donn\u00e9es dans vos applications web. Explorons ensemble ces outils fondamentaux de JavaScript avec 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\/658885866?dnt=1&fullscreen=0&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 \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 \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 collections de donn\u00e9es. Ces \u00e9l\u00e9ments de donn\u00e9es peuvent \u00eatre de diff\u00e9rents types, y compris des nombres, des cha\u00eenes de caract\u00e8res, des objets et m\u00eame d’autres tableaux. Voici un aper\u00e7u des principales fonctionnalit\u00e9s des tableaux.<\/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 avez plusieurs options, dont l’utilisation de l’objet <code>Array<\/code> ou des crochets <code>[]<\/code>. Voici quelques exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9ation de tableaux\nlet fruits = [\"Pomme\", \"Banane\", \"Orange\"];\nlet numbers = [1, 2, 3, 4, 5];\nlet mixedArray = [42, \"Hello\", true, {name: \"John\"}, [10, 20]];\n\nconsole.log(fruits); \/\/ [\"Pomme\", \"Banane\", \"Orange\"]\nconsole.log(mixedArray); \/\/ [42, \"Hello\", true, Object, Array]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der aux \u00c9l\u00e9ments d’un Tableau<\/h3>\n\n\n\n<p>Pour acc\u00e9der aux \u00e9l\u00e9ments d’un tableau, utilisez l’indexation avec des crochets <code>[]<\/code>. Les index des tableaux commencent \u00e0 0 pour le premier \u00e9l\u00e9ment. Voici comment acc\u00e9der \u00e0 diff\u00e9rents \u00e9l\u00e9ments :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"Pomme\", \"Banane\", \"Orange\"];\n\nconsole.log(fruits[0]); \/\/ \"Pomme\"\nconsole.log(fruits[1]); \/\/ \"Banane\"\nconsole.log(fruits[2]); \/\/ \"Orange\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Modifier les \u00c9l\u00e9ments d’un Tableau<\/h3>\n\n\n\n<p>Les tableaux en JavaScript sont mutables, ce qui signifie que vous pouvez changer leurs \u00e9l\u00e9ments apr\u00e8s leur cr\u00e9ation. Voyons comment modifier les \u00e9l\u00e9ments d’un tableau existant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"Pomme\", \"Banane\", \"Orange\"];\n\nfruits[1] = \"Mango\"; \/\/ Remplacer \"Banane\" par \"Mango\"\n\nconsole.log(fruits); \/\/ [\"Pomme\", \"Mango\", \"Orange\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter et Supprimer des \u00c9l\u00e9ments d’un Tableau<\/h3>\n\n\n\n<p>JavaScript offre plusieurs m\u00e9thodes pour manipuler les tableaux, y compris l’ajout et la suppression d’\u00e9l\u00e9ments. Voici quelques m\u00e9thodes couramment utilis\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"Pomme\", \"Banane\", \"Orange\"];\n\n\/\/ Ajouter un \u00e9l\u00e9ment \u00e0 la fin\nfruits.push(\"Kiwi\");\n\nconsole.log(fruits); \/\/ [\"Pomme\", \"Banane\", \"Orange\", \"Kiwi\"]\n\n\/\/ Supprimer le dernier \u00e9l\u00e9ment\nfruits.pop();\n\nconsole.log(fruits); \/\/ [\"Pomme\", \"Banane\", \"Orange\"]\n\n\/\/ Ajouter un \u00e9l\u00e9ment au d\u00e9but\nfruits.unshift(\"Fraise\");\n\nconsole.log(fruits); \/\/ [\"Fraise\", \"Pomme\", \"Banane\", \"Orange\"]\n\n\/\/ Supprimer le premier \u00e9l\u00e9ment\nfruits.shift();\n\nconsole.log(fruits); \/\/ [\"Pomme\", \"Banane\", \"Orange\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les M\u00e9thodes Avanc\u00e9es sur les Tableaux<\/h3>\n\n\n\n<p>Les tableaux en JavaScript viennent avec un ensemble riche de m\u00e9thodes avanc\u00e9es pour effectuer des op\u00e9rations complexes. Explorons quelques-unes de ces m\u00e9thodes :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">M\u00e9thode <code>map()<\/code><\/h4>\n\n\n\n<p>La m\u00e9thode <code>map()<\/code> cr\u00e9e un nouveau tableau avec les r\u00e9sultats de l’appel d’une fonction fournie sur chaque \u00e9l\u00e9ment du tableau appelant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let numbers = [1, 2, 3, 4, 5];\nlet squaredNumbers = numbers.map(num => num * num);\n\nconsole.log(squaredNumbers); \/\/ [1, 4, 9, 16, 25]\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">M\u00e9thode <code>filter()<\/code><\/h4>\n\n\n\n<p>La m\u00e9thode <code>filter()<\/code> cr\u00e9e un nouveau tableau avec tous les \u00e9l\u00e9ments qui passent le test impl\u00e9ment\u00e9 par la fonction fournie :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let numbers = [1, 2, 3, 4, 5, 6];\nlet evenNumbers = numbers.filter(num => num % 2 === 0);\n\nconsole.log(evenNumbers); \/\/ [2, 4, 6]\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">M\u00e9thode <code>reduce()<\/code><\/h4>\n\n\n\n<p>La m\u00e9thode <code>reduce()<\/code> applique une fonction sur un accumulateur et chaque valeur du tableau (de gauche \u00e0 droite) pour les r\u00e9duire en une seule valeur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let numbers = [1, 2, 3, 4, 5];\nlet sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);\n\nconsole.log(sum); \/\/ 15\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion : Maximisez l’Usage des Tableaux JavaScript<\/h2>\n\n\n\n<p>Les <strong>tableaux en JavaScript<\/strong> sont une partie int\u00e9grante de la gestion des donn\u00e9es dans la programmation web. En ma\u00eetrisant la cr\u00e9ation, l’acc\u00e8s, la modification, et l’utilisation des m\u00e9thodes avanc\u00e9es pour les tableaux, vous augmenterez consid\u00e9rablement votre efficacit\u00e9 en tant que d\u00e9veloppeur. Continuez \u00e0 explorer les fonctionnalit\u00e9s des tableaux pour d\u00e9couvrir encore plus de possibilit\u00e9s et optimiser vos applications. Pour plus de tutoriels sur JavaScript, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">cours sur les fondamentaux de JavaScript<\/a>.<\/p>\n\n\n\n<p>Si vous souhaitez approfondir vos connaissances sur d’autres aspects de JavaScript, consultez ces guides utiles :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-tableau-en-javascript\">Qu’est-ce qu’un tableau en JavaScript ?<\/a><\/li>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/operations-mathematiques-en-javascript-tutoriel\">Op\u00e9rations Math\u00e9matiques en JavaScript<\/a><\/li>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/conditions-if-else-en-javascript-guide\">Conditions If-Else en JavaScript<\/a><\/li>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-existantes-en-javascript\">Utiliser les Fonctions Existantes en JavaScript<\/a><\/li>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/boucles-for-en-javascript-utilisation\">Boucles For en JavaScript<\/a><\/li>\n<\/ul>\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<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Guide Complet sur les Tableaux en JavaScript Les tableaux en JavaScript sont une structure de donn\u00e9es tr\u00e8s puissante et flexible utilis\u00e9e pour stocker des listes…<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5610","post","type-post","status-publish","format-standard","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\/5610","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=5610"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5610\/revisions"}],"predecessor-version":[{"id":5611,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5610\/revisions\/5611"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}