{"id":5622,"date":"2024-08-29T00:28:31","date_gmt":"2024-08-29T00:28:31","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/retirer-element-du-tableau-en-javascript-pop-shift\/"},"modified":"2024-08-29T00:28:33","modified_gmt":"2024-08-29T00:28:33","slug":"retirer-element-du-tableau-en-javascript-pop-shift","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/retirer-element-du-tableau-en-javascript-pop-shift\/","title":{"rendered":"8.7 Retirer \u00c9l\u00e9ment du Tableau en JavaScript (pop\/shift)"},"content":{"rendered":"\n<p><strong>8.7 Retirer \u00c9l\u00e9ment du Tableau en JavaScript (pop\/shift)<\/strong> est une technique cl\u00e9 pour manipuler les tableaux dans JavaScript. Comprendre comment utiliser les m\u00e9thodes <strong>pop()<\/strong> et <strong>shift()<\/strong> peut consid\u00e9rablement am\u00e9liorer la gestion des donn\u00e9es dans vos applications. Apprenons comment elles 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>m\u00e9thodes pop() et shift() 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\/658886403?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 m\u00e9thodes <strong>pop()<\/strong> et <strong>shift()<\/strong> en JavaScript sont utilis\u00e9es pour retirer des \u00e9l\u00e9ments d&rsquo;un tableau. La m\u00e9thode `pop()` retire le dernier \u00e9l\u00e9ment d&rsquo;un tableau, tandis que la m\u00e9thode `shift()` retire le premier \u00e9l\u00e9ment. Utilisons quelques exemples pratiques pour illustrer leur utilisation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la M\u00e9thode pop() en JavaScript<\/h3>\n\n\n\n<p>Commen\u00e7ons par explorer la m\u00e9thode <code>pop()<\/code>. Cette m\u00e9thode retire et renvoie le dernier \u00e9l\u00e9ment d&rsquo;un tableau, modifiant ainsi la longueur du tableau. Voici un exemple simple d&rsquo;utilisation de <code>pop()<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = ['Pomme', 'Banane', 'Mangue', 'Orange'];\n\nconsole.log('Tableau avant pop:', fruits); \/\/ ['Pomme', 'Banane', 'Mangue', 'Orange']\n\nlet lastFruit = fruits.pop();\n\nconsole.log('\u00c9l\u00e9ment retir\u00e9:', lastFruit); \/\/ 'Orange'\nconsole.log('Tableau apr\u00e8s pop:', fruits); \/\/ ['Pomme', 'Banane', 'Mangue']<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la M\u00e9thode shift() en JavaScript<\/h3>\n\n\n\n<p>La m\u00e9thode <code>shift()<\/code> supprime le premier \u00e9l\u00e9ment d&rsquo;un tableau et retourne cet \u00e9l\u00e9ment. Cette m\u00e9thode modifie \u00e9galement la longueur du tableau. Voici un exemple d&rsquo;utilisation de <code>shift()<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = ['Pomme', 'Banane', 'Mangue', 'Orange'];\n\nconsole.log('Tableau avant shift:', fruits); \/\/ ['Pomme', 'Banane', 'Mangue', 'Orange']\n\nlet firstFruit = fruits.shift();\n\nconsole.log('\u00c9l\u00e9ment retir\u00e9:', firstFruit); \/\/ 'Pomme'\nconsole.log('Tableau apr\u00e8s shift:', fruits); \/\/ ['Banane', 'Mangue', 'Orange']<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comparaison entre les M\u00e9thodes pop() et shift()<\/h3>\n\n\n\n<p>Bien que <code>pop()<\/code> et <code>shift()<\/code> aient des fonctions similaires en termes de suppression d&rsquo;\u00e9l\u00e9ments d&rsquo;un tableau, elles sont utilis\u00e9es pour des objectifs diff\u00e9rents. Voici une comparaison succincte :<\/p>\n\n\n\n<ul>\n<li><code>pop()<\/code> : Retire le dernier \u00e9l\u00e9ment du tableau.<\/li>\n<li><code>shift()<\/code> : Retire le premier \u00e9l\u00e9ment du tableau.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser ces M\u00e9thodes dans des Contextes R\u00e9els<\/h3>\n\n\n\n<p>Voyons maintenant comment utiliser <code>pop()<\/code> et <code>shift()<\/code> dans des sc\u00e9narios r\u00e9els, comme la gestion d&rsquo;une file d&rsquo;attente ou une pile de donn\u00e9es. Vous pourriez \u00e9galement \u00eatre int\u00e9ress\u00e9 par <a href=\"https:\/\/wikiform.fr\/codespace\/creer-un-tableau-a-dimensions-en-javascript\">comment cr\u00e9er un tableau \u00e0 dimensions en JavaScript<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion d&rsquo;une Pile de Donn\u00e9es avec pop()<\/h4>\n\n\n\n<p>Une pile fonctionne selon le principe LIFO (Last In, First Out). Utilisons <code>pop()<\/code> pour simuler ce comportement :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let stack = [];\n\n\/\/ Ajouter des \u00e9l\u00e9ments \u00e0 la pile\nstack.push(1);\nstack.push(2);\nstack.push(3);\n\nconsole.log('Pile avant pop:', stack); \/\/ [1, 2, 3]\n\n\/\/ Retirer le dernier \u00e9l\u00e9ment (LIFO)\nlet lastElement = stack.pop(); \n\nconsole.log('\u00c9l\u00e9ment retir\u00e9:', lastElement); \/\/ 3\nconsole.log('Pile apr\u00e8s pop:', stack); \/\/ [1, 2]<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion d&rsquo;une File d&rsquo;Attente avec shift()<\/h4>\n\n\n\n<p>Une file d&rsquo;attente fonctionne selon le principe FIFO (First In, First Out). Utilisons <code>shift()<\/code> pour simuler ce comportement :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let queue = [];\n\n\/\/ Ajouter des \u00e9l\u00e9ments \u00e0 la file d'attente\nqueue.push(1);\nqueue.push(2);\nqueue.push(3);\n\nconsole.log('File d'attente avant shift:', queue); \/\/ [1, 2, 3]\n\n\/\/ Retirer le premier \u00e9l\u00e9ment (FIFO)\nlet firstElement = queue.shift();\n\nconsole.log('\u00c9l\u00e9ment retir\u00e9:', firstElement); \/\/ 1\nconsole.log('File d'attente apr\u00e8s shift:', queue); \/\/ [2, 3]<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d&rsquo;Utilisation de pop() et shift()<\/h3>\n\n\n\n<p>Pour approfondir notre compr\u00e9hension des m\u00e9thodes <code>pop()<\/code> et <code>shift()<\/code>, voici quelques exemples avanc\u00e9s qui montrent comment elles peuvent \u00eatre utilis\u00e9es dans des applications plus complexes. Vous pouvez aussi consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-break-et-continue-en-javascript\">guide sur utiliser break et continue en JavaScript<\/a> pour compl\u00e9ter vos connaissances.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Suppression Conditonnelle d&rsquo;\u00c9l\u00e9ments<\/h4>\n\n\n\n<p>Imaginez que vous vouliez retirer des \u00e9l\u00e9ments d&rsquo;un tableau uniquement si une certaine condition est remplie :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let numbers = [10, 20, 30, 40];\n\nconsole.log('Tableau avant suppression conditionnelle:', numbers); \/\/ [10, 20, 30, 40]\n\nwhile (numbers.length && numbers[numbers.length - 1] > 20) {\n    numbers.pop();\n}\n\nconsole.log('Tableau apr\u00e8s suppression conditionnelle:', numbers); \/\/ [10, 20]<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation dans des Structures de Donn\u00e9es Personnalis\u00e9es<\/h4>\n\n\n\n<p>Les m\u00e9thodes <code>pop()<\/code> et <code>shift()<\/code> peuvent \u00e9galement \u00eatre utilis\u00e9es pour impl\u00e9menter des structures de donn\u00e9es plus complexes. Par exemple, une liste cha\u00een\u00e9e :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>class LinkedList {\n    constructor() {\n        this.head = null;\n    }\n\n    add(value) {\n        const newNode = { value: value, next: this.head };\n        this.head = newNode;\n    }\n\n    pop() {\n        if (!this.head) return null;\n        const value = this.head.value;\n        this.head = this.head.next;\n        return value;\n    }\n\n    shift() {\n        let current = this.head;\n        if (!current) return null;\n        if (!current.next) {\n            const value = current.value;\n            this.head = null;\n            return value;\n        }\n        while (current.next && current.next.next) {\n            current = current.next;\n        }\n        const value = current.next.value;\n        current.next = null;\n        return value;\n    }\n}\n\nconst list = new LinkedList();\nlist.add(1);\nlist.add(2);\nlist.add(3);\n\nconsole.log(list.pop()); \/\/ 3\nconsole.log(list.shift()); \/\/ 1<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ressources Suppl\u00e9mentaires<\/h3>\n\n\n\n<p>Pour en savoir plus sur les m\u00e9thodes <code>pop()<\/code> et <code>shift()<\/code> en JavaScript, vous pouvez consulter la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/pop\" target=\"_blank\" rel=\"noopener noreferrer\">documentation MDN de pop()<\/a> et la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/shift\" target=\"_blank\" rel=\"noopener noreferrer\">documentation MDN de shift()<\/a>. Vous pouvez \u00e9galement suivre des cours en ligne comme ceux de <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Coursera<\/a> pour un apprentissage structur\u00e9.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les m\u00e9thodes <strong>pop()<\/strong> et <strong>shift()<\/strong> en JavaScript sont essentielles pour g\u00e9rer et manipuler efficacement les tableaux. Elles permettent de supprimer des \u00e9l\u00e9ments de mani\u00e8re simple et efficace, selon les besoins sp\u00e9cifiques de votre application. Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">les fondamentaux de JavaScript<\/a>. Pour apprendre \u00e0 approfondir vos comp\u00e9tences en JavaScript, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/demander-confirmation-en-javascript-tutoriel\">tutoriel sur les fonctions de rappel en JavaScript<\/a>. Vous pouvez aussi enrichir vos connaissances en lisant nos articles sur <a href=\"https:\/\/wikiform.fr\/codespace\/retirer-element-du-tableau-en-javascript-pop-shift\">retirer un \u00e9l\u00e9ment du tableau en JavaScript<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-condition-en-javascript\">les conditions en JavaScript<\/a>, et <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-les-exceptions-en-javascript-guide\">comment g\u00e9rer les exceptions en 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-JAVA-SCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>8.7 Retirer \u00c9l\u00e9ment du Tableau en JavaScript (pop\/shift) est une technique cl\u00e9 pour manipuler les tableaux dans JavaScript. Comprendre comment utiliser les m\u00e9thodes pop() et&#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-5622","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\/5622","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=5622"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5622\/revisions"}],"predecessor-version":[{"id":5623,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5622\/revisions\/5623"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5622"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5622"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}