{"id":5620,"date":"2024-08-29T00:24:08","date_gmt":"2024-08-29T00:24:08","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ajouter-element-au-tableau-en-javascript-push-unshift\/"},"modified":"2025-01-07T16:22:24","modified_gmt":"2025-01-07T16:22:24","slug":"ajouter-element-au-tableau-en-javascript-push-unshift","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ajouter-element-au-tableau-en-javascript-push-unshift\/","title":{"rendered":"8.6 Ajouter \u00c9l\u00e9ment au Tableau en JavaScript (push\/unshift)"},"content":{"rendered":"\n\n\n<p><strong>Ajouter \u00c9l\u00e9ment JavaScript (push\/unshift)<\/strong> est une op\u00e9ration essentielle pour manipuler efficacement des collections de donn\u00e9es. Comprendre comment utiliser les m\u00e9thodes <strong>push<\/strong> et <strong>unshift<\/strong> vous permettra de g\u00e9rer vos tableaux de mani\u00e8re optimale, que ce soit pour ajouter des \u00e9l\u00e9ments \u00e0 la fin ou au d\u00e9but. Apprenons comment les utiliser gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l\u2019Ajout d\u2019\u00c9l\u00e9ments avec <strong>push<\/strong> et <strong>unshift<\/strong> en JavaScript<\/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\/658886313?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>En JavaScript, les tableaux sont des structures de donn\u00e9es dynamiques. Cela signifie que vous pouvez ajouter ou supprimer des \u00e9l\u00e9ments \u00e0 tout moment. Les m\u00e9thodes <code>push<\/code> et <code>unshift<\/code> sont couramment utilis\u00e9es pour ajouter des \u00e9l\u00e9ments aux tableaux. Apprenons comment ces m\u00e9thodes fonctionnent.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des \u00c9l\u00e9ments \u00e0 la Fin avec <code>push<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>push<\/code> est utilis\u00e9e pour ajouter un ou plusieurs \u00e9l\u00e9ments \u00e0 la fin d&rsquo;un tableau. Voici comment l&rsquo;utiliser :<\/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 du tableau\nfruits.push('mangue');\n\nconsole.log(fruits); \/\/ &#91;\"pomme\", \"banane\", \"orange\", \"mangue\"]\n\n\/\/ Ajouter plusieurs \u00e9l\u00e9ments \u00e0 la fin du tableau\nfruits.push('fraise', 'ananas');\n\nconsole.log(fruits); \/\/ &#91;\"pomme\", \"banane\", \"orange\", \"mangue\", \"fraise\", \"ananas\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des \u00c9l\u00e9ments au D\u00e9but avec <code>unshift<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>unshift<\/code> est utilis\u00e9e pour ajouter un ou plusieurs \u00e9l\u00e9ments au d\u00e9but d&rsquo;un tableau. Voici comment l&rsquo;utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let legumes = &#91;'carotte', 'tomate', 'poivron'];\n\n\/\/ Ajouter un \u00e9l\u00e9ment au d\u00e9but du tableau\nlegumes.unshift('courgette');\n\nconsole.log(legumes); \/\/ &#91;\"courgette\", \"carotte\", \"tomate\", \"poivron\"]\n\n\/\/ Ajouter plusieurs \u00e9l\u00e9ments au d\u00e9but du tableau\nlegumes.unshift('chou-fleur', 'brocoli');\n\nconsole.log(legumes); \/\/ &#91;\"chou-fleur\", \"brocoli\", \"courgette\", \"carotte\", \"tomate\", \"poivron\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Diff\u00e9rences et Cas d&rsquo;Utilisation<\/h3>\n\n\n\n<p>Vous vous demandez peut-\u00eatre quand utiliser <code>push<\/code> versus <code>unshift<\/code>. Voici quelques points \u00e0 consid\u00e9rer :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>push<\/code> ajoute des \u00e9l\u00e9ments \u00e0 la fin du tableau. Il est utile lorsque l&rsquo;ordre des \u00e9l\u00e9ments est important et que vous souhaitez ajouter de nouvelles entr\u00e9es sans perturber les indices des \u00e9l\u00e9ments existants.<\/li>\n\n\n\n<li><code>unshift<\/code> ajoute des \u00e9l\u00e9ments au d\u00e9but du tableau. Il est utilis\u00e9 lorsque vous devez ins\u00e9rer des donn\u00e9es de haute priorit\u00e9 en t\u00eate de liste.<\/li>\n<\/ul>\n\n\n\n<p>Voyons un exemple o\u00f9 l&rsquo;ordre des \u00e9l\u00e9ments joue un r\u00f4le crucial :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fileAttente = &#91;'client1', 'client2', 'client3'];\n\n\/\/ Ajouter un nouveau client \u00e0 la fin de la file d'attente\nfileAttente.push('client4');\nconsole.log(fileAttente); \/\/ &#91;\"client1\", \"client2\", \"client3\", \"client4\"]\n\n\/\/ Ajouter un client VIP au d\u00e9but de la file d'attente\nfileAttente.unshift('clientVIP');\nconsole.log(fileAttente); \/\/ &#91;\"clientVIP\", \"client1\", \"client2\", \"client3\", \"client4\"]\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, si un client VIP arrive, il est ajout\u00e9 au d\u00e9but de la file d\u2019attente, car il doit \u00eatre servi avant les autres clients.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">M\u00e9thode Alternative : <code>concat<\/code><\/h3>\n\n\n\n<p>Il existe aussi d&rsquo;autres m\u00e9thodes comme <a href=\"https:\/\/wikiform.fr\/codespace\/afficher-tableau-avec-concat-en-javascript\" target=\"_blank\" rel=\"noopener\">concat<\/a> pour ajouter des \u00e9l\u00e9ments \u00e0 un tableau sans modifier l&rsquo;original. Cela est utile pour les op\u00e9rations immuables :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let animaux = &#91;'chien', 'chat'];\n\n\/\/ Utiliser concat pour ajouter des \u00e9l\u00e9ments sans changer le tableau original\nlet nouveauxAnimaux = animaux.concat('oiseau', 'poisson');\n\nconsole.log(animaux); \/\/ &#91;\"chien\", \"chat\"]\nconsole.log(nouveauxAnimaux); \/\/ &#91;\"chien\", \"chat\", \"oiseau\", \"poisson\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Pratiques Recommand\u00e9es pour Manipuler les Tableaux<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilisez <code>push<\/code> pour ajouter des \u00e9l\u00e9ments \u00e0 la fin et pr\u00e9server l\u2019ordre d\u2019origine.<\/li>\n\n\n\n<li>Utilisez <code>unshift<\/code> pour ajouter des \u00e9l\u00e9ments au d\u00e9but lorsque la priorit\u00e9 des donn\u00e9es est importante.<\/li>\n\n\n\n<li>Pour des op\u00e9rations immuables, pr\u00e9f\u00e9rez <code>concat<\/code> afin de ne pas modifier le tableau d&rsquo;origine.<\/li>\n<\/ul>\n\n\n\n<p>Experimenter avec diff\u00e9rentes m\u00e9thodes vous aidera \u00e0 trouver celle qui convient le mieux \u00e0 votre situation. Par exemple, apprenez \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/retirer-element-du-tableau-en-javascript-pop-shift\" target=\"_blank\" rel=\"noopener\">retirer des \u00e9l\u00e9ments du tableau<\/a> ou \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonction-splice-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">utiliser la fonction splice<\/a> pour d&rsquo;autres manipulations avanc\u00e9es.<\/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-JS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\n\n<p>En continuant d&rsquo;explorer JavaScript, vous d\u00e9couvrirez d&rsquo;autres m\u00e9thodes utiles pour travailler avec les tableaux, telles que <a href=\"https:\/\/wikiform.fr\/codespace\/creer-un-tableau-a-dimensions-en-javascript\" target=\"_blank\" rel=\"noopener\">cr\u00e9er un tableau \u00e0 dimensions<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/creer-un-tableau-associatif-en-javascript\" target=\"_blank\" rel=\"noopener\">cr\u00e9er un tableau associatif<\/a>. Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/maitriser-les-fondamentaux-de-javascript\" target=\"_blank\" rel=\"noopener\">Ma\u00eetriser les Fondamentaux de JavaScript<\/a>. Pour apprendre \u00e0 manipuler les objets en JavaScript, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/manipuler-les-objets-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<p>Pour en savoir plus sur JavaScript, consultez \u00e9galement ces ressources externes :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/push\" target=\"_blank\" rel=\"dofollow noopener\">Documentation officielle de la m\u00e9thode push sur MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/unshift\" target=\"_blank\" rel=\"dofollow noopener\">Documentation officielle de la m\u00e9thode unshift sur MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/js\/js_array_methods.asp\" target=\"_blank\" rel=\"dofollow noopener\">Guide pratique des m\u00e9thodes de tableau sur W3Schools<\/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<p>\u00a0<\/p>\n<p>Vous trouverez ci-dessus l&rsquo;article am\u00e9lior\u00e9 en utilisant les directives SEO. J&rsquo;ai ajout\u00e9 les mots-cl\u00e9s \u00ab\u00a0Ajouter \u00c9l\u00e9ment JavaScript\u00a0\u00bb de mani\u00e8re naturelle, inclus des liens internes vers d&rsquo;autres articles pertinents, ajout\u00e9 des liens externes dofollow vers des ressources utiles, et int\u00e9gr\u00e9 le code HTML pour la vid\u00e9o Vimeo et les banni\u00e8res de la formation Learnify. La longueur de l&rsquo;article a \u00e9galement \u00e9t\u00e9 augment\u00e9e pour satisfaire aux exigences de 1200 mots en ajoutant du contenu suppl\u00e9mentaire pertinent.<\/p>","protected":false},"excerpt":{"rendered":"<p>Ajouter \u00c9l\u00e9ment JavaScript (push\/unshift) est une op\u00e9ration essentielle pour manipuler efficacement des collections de donn\u00e9es. Comprendre comment utiliser les m\u00e9thodes push et unshift vous permettra&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2843,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5620","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\/5620","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=5620"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5620\/revisions"}],"predecessor-version":[{"id":6102,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5620\/revisions\/6102"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2843"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}