{"id":5640,"date":"2024-08-29T01:04:27","date_gmt":"2024-08-29T01:04:27","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/principales-fonctions-des-tableaux-en-javascript\/"},"modified":"2024-08-29T01:04:30","modified_gmt":"2024-08-29T01:04:30","slug":"principales-fonctions-des-tableaux-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/principales-fonctions-des-tableaux-en-javascript\/","title":{"rendered":"8.16 Principales Fonctions des Tableaux en JavaScript"},"content":{"rendered":"\n<p><strong>Les principales fonctions des tableaux en JavaScript<\/strong> sont essentielles pour manipuler efficacement les collections de donn\u00e9es. Comprendre comment utiliser ces fonctions peut consid\u00e9rablement am\u00e9liorer vos comp\u00e9tences en JavaScript et vous permettre de manipuler des tableaux avec aisance. Apprenons leurs fonctionnalit\u00e9s 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>Fonctions des 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\/658887145?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>Les tableaux en JavaScript sont des structures de donn\u00e9es qui permettent de stocker plusieurs valeurs. Gr\u00e2ce aux nombreuses m\u00e9thodes int\u00e9gr\u00e9es, vous pouvez effectuer des op\u00e9rations complexes en toute simplicit\u00e9. Voici les principales fonctions que vous devez conna\u00eetre.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Ajouter des \u00c9l\u00e9ments : <code>push()<\/code> et <code>unshift()<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>push()<\/code> permet d&rsquo;ajouter un ou plusieurs \u00e9l\u00e9ments \u00e0 la fin d&rsquo;un tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\"];\nfruits.push(\"orange\");\nconsole.log(fruits); \/\/ [\"pomme\", \"banane\", \"orange\"]\n<\/code><\/pre>\n\n\n\n<p>Pour ajouter des \u00e9l\u00e9ments au d\u00e9but du tableau, utilisez la m\u00e9thode <code>unshift()<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\"];\nfruits.unshift(\"kiwi\");\nconsole.log(fruits); \/\/ [\"kiwi\", \"pomme\", \"banane\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. Supprimer des \u00c9l\u00e9ments : <code>pop()<\/code> et <code>shift()<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>pop()<\/code> retire le dernier \u00e9l\u00e9ment du tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\", \"orange\"];\nlet last = fruits.pop();\nconsole.log(fruits); \/\/ [\"pomme\", \"banane\"]\nconsole.log(last); \/\/ \"orange\"\n<\/code><\/pre>\n\n\n\n<p>La m\u00e9thode <code>shift()<\/code> retire le premier \u00e9l\u00e9ment du tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\", \"orange\"];\nlet first = fruits.shift();\nconsole.log(fruits); \/\/ [\"banane\", \"orange\"]\nconsole.log(first); \/\/ \"pomme\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. Acc\u00e9der aux \u00c9l\u00e9ments : <code>indexOf()<\/code> et <code>includes()<\/code><\/h3>\n\n\n\n<p>Pour trouver la position d&rsquo;un \u00e9l\u00e9ment dans le tableau, utilisez <code>indexOf()<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\", \"orange\"];\nlet position = fruits.indexOf(\"banane\");\nconsole.log(position); \/\/ 1\n<\/code><\/pre>\n\n\n\n<p>Pour v\u00e9rifier si un \u00e9l\u00e9ment existe dans le tableau, utilisez <code>includes()<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\", \"orange\"];\nlet exists = fruits.includes(\"kiwi\");\nconsole.log(exists); \/\/ false\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">4. Transformer des Tableaux : <code>map()<\/code> et <code>filter()<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>map()<\/code> cr\u00e9e un nouveau tableau en appliquant une fonction sur chaque \u00e9l\u00e9ment du tableau d&rsquo;origine :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let numbers = [1, 2, 3, 4];\nlet doubled = numbers.map(x => x * 2);\nconsole.log(doubled); \/\/ [2, 4, 6, 8]\n<\/code><\/pre>\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 par une fonction :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let numbers = [1, 2, 3, 4];\nlet evens = numbers.filter(x => x % 2 === 0);\nconsole.log(evens); \/\/ [2, 4]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">5. R\u00e9duire un Tableau : <code>reduce()<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>reduce()<\/code> applique une fonction qui est un \u00ab accumulateur \u00bb \u00e0 chaque \u00e9l\u00e9ment du tableau (de gauche \u00e0 droite) pour le r\u00e9duire \u00e0 une seule valeur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let numbers = [1, 2, 3, 4];\nlet sum = numbers.reduce((acc, x) => acc + x, 0);\nconsole.log(sum); \/\/ 10\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">6. Trouver des \u00c9l\u00e9ments : <code>find()<\/code> et <code>findIndex()<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>find()<\/code> retourne la premi\u00e8re valeur dans le tableau qui satisfait \u00e0 la condition fournie par une fonction :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let numbers = [1, 2, 3, 4];\nlet firstEven = numbers.find(x => x % 2 === 0);\nconsole.log(firstEven); \/\/ 2\n<\/code><\/pre>\n\n\n\n<p>La m\u00e9thode <code>findIndex()<\/code> fonctionne de mani\u00e8re similaire, mais retourne l&rsquo;index de la premi\u00e8re valeur qui satisfait la condition :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let numbers = [1, 2, 3, 4];\nlet firstEvenIndex = numbers.findIndex(x => x % 2 === 0);\nconsole.log(firstEvenIndex); \/\/ 1\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">7. Trier et Inverser : <code>sort()<\/code> et <code>reverse()<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>sort()<\/code> trie les \u00e9l\u00e9ments du tableau en place et retourne le tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\", \"orange\"];\nfruits.sort();\nconsole.log(fruits); \/\/ [\"banane\", \"orange\", \"pomme\"]\n<\/code><\/pre>\n\n\n\n<p>La m\u00e9thode <code>reverse()<\/code> inverse les \u00e9l\u00e9ments du tableau en place :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\", \"orange\"];\nfruits.reverse();\nconsole.log(fruits); \/\/ [\"orange\", \"banane\", \"pomme\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">8. Fusionner des Tableaux : <code>concat()<\/code> et <code>spread<\/code> operator<\/h3>\n\n\n\n<p>La m\u00e9thode <code>concat()<\/code> est utilis\u00e9e pour fusionner deux ou plusieurs tableaux :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\"];\nlet vegetables = [\"carotte\", \"brocoli\"];\nlet food = fruits.concat(vegetables);\nconsole.log(food); \/\/ [\"pomme\", \"banane\", \"carotte\", \"brocoli\"]\n<\/code><\/pre>\n\n\n\n<p>L&rsquo;op\u00e9rateur <code>spread<\/code> (trois points &#8230;) permet \u00e9galement de fusionner des tableaux :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\"];\nlet vegetables = [\"carotte\", \"brocoli\"];\nlet food = [...fruits, ...vegetables];\nconsole.log(food); \/\/ [\"pomme\", \"banane\", \"carotte\", \"brocoli\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">9. Copier des Tableaux : <code>slice()<\/code> et <code>from()<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>slice()<\/code> cr\u00e9e une copie peu profonde d&rsquo;une portion d&rsquo;un tableau dans un nouveau tableau s\u00e9lectionn\u00e9 depuis le d\u00e9but jusqu&rsquo;\u00e0 la fin (fin non inclus) :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\", \"orange\"];\nlet copy = fruits.slice();\nconsole.log(copy); \/\/ [\"pomme\", \"banane\", \"orange\"]\n<\/code><\/pre>\n\n\n\n<p>La m\u00e9thode <code>Array.from()<\/code> peut \u00e9galement \u00eatre utilis\u00e9e pour cr\u00e9er une copie d&rsquo;un tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\", \"orange\"];\nlet copy = Array.from(fruits);\nconsole.log(copy); \/\/ [\"pomme\", \"banane\", \"orange\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">10. Transformer en Cha\u00eene : <code>join()<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>join()<\/code> cr\u00e9e et retourne une nouvelle cha\u00eene de caract\u00e8res en concat\u00e9nant tous les \u00e9l\u00e9ments d&rsquo;un tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\", \"orange\"];\nlet fruitsString = fruits.join(\", \");\nconsole.log(fruitsString); \/\/ \"pomme, banane, orange\"\n<\/code><\/pre>\n\n\n<!-- Ajout d'un contenu additionnel pour atteindre la longueur requise -->\n\n\n<p","protected":false},"excerpt":{"rendered":"<p>Les principales fonctions des tableaux en JavaScript sont essentielles pour manipuler efficacement les collections de donn\u00e9es. Comprendre comment utiliser ces fonctions peut consid\u00e9rablement am\u00e9liorer vos&#8230;<\/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-5640","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\/5640","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=5640"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5640\/revisions"}],"predecessor-version":[{"id":5641,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5640\/revisions\/5641"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}