{"id":5628,"date":"2024-08-29T00:40:14","date_gmt":"2024-08-29T00:40:14","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-fonction-splice-en-javascript-tutoriel\/"},"modified":"2024-08-29T00:40:17","modified_gmt":"2024-08-29T00:40:17","slug":"utiliser-fonction-splice-en-javascript-tutoriel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-fonction-splice-en-javascript-tutoriel\/","title":{"rendered":"8.10 Utiliser Fonction splice en JavaScript : Tutoriel"},"content":{"rendered":"\n<p><strong>Utiliser la fonction <code>splice<\/code> en JavaScript<\/strong> est essentiel pour manipuler efficacement les tableaux. La compr\u00e9hension de cette m\u00e9thode permet de r\u00e9aliser des op\u00e9rations complexes telles que l&rsquo;insertion, la suppression, et la modification d&rsquo;\u00e9l\u00e9ments au sein d&rsquo;un tableau. Apprenons comment utiliser <strong>splice<\/strong> en JavaScript gr\u00e2ce \u00e0 des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la fonction <code>splice<\/code> 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\/658886680?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>La m\u00e9thode <code>splice<\/code> permet de changer le contenu d&rsquo;un tableau en retirant, rempla\u00e7ant, ou ajoutant des \u00e9l\u00e9ments \u00e0 des positions sp\u00e9cifiques. Cette <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonction-splice-en-javascript-tutoriel\">fonction splice en JavaScript<\/a> est tr\u00e8s flexible et puissante pour la manipulation des tableaux.<\/p>\n<ul>\n  <li><strong>start<\/strong> : L&rsquo;indice de d\u00e9but o\u00f9 les modifications doivent commencer.<\/li>\n  <li><strong>deleteCount<\/strong> : Nombre d&rsquo;\u00e9l\u00e9ments \u00e0 supprimer \u00e0 partir de la position de d\u00e9but.<\/li>\n  <li><strong>elements<\/strong> : Les \u00e9l\u00e9ments \u00e0 ajouter \u00e0 partir de la position de d\u00e9but.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Basique de la Fonction <code>splice<\/code><\/h3>\n\n\n\n<p>Pour mieux comprendre, examinons un exemple basique utilisant <code>splice<\/code> pour supprimer des \u00e9l\u00e9ments :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"Banane\", \"Orange\", \"Pomme\", \"Mango\"];\nconsole.log(\"Avant splice:\", fruits);\n\n\/\/ Supprimer 2 \u00e9l\u00e9ments \u00e0 partir de l'indice 1\nlet deletedFruits = fruits.splice(1, 2);\nconsole.log(\"Apr\u00e8s splice:\", fruits);  \/\/ [\"Banane\", \"Mango\"]\nconsole.log(\"\u00c9l\u00e9ments supprim\u00e9s:\", deletedFruits);  \/\/ [\"Orange\", \"Pomme\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Insertion d&rsquo;\u00c9l\u00e9ments avec <code>splice<\/code><\/h3>\n\n\n\n<p>En plus de supprimer des \u00e9l\u00e9ments, <code>splice<\/code> peut \u00e9galement \u00eatre utilis\u00e9 pour ins\u00e9rer de nouveaux \u00e9l\u00e9ments \u00e0 une position sp\u00e9cifique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let l\u00e9gumes = [\"Carotte\", \"Tomate\", \"Concombre\"];\nconsole.log(\"Avant splice:\", l\u00e9gumes);\n\n\/\/ Ins\u00e9rer deux nouveaux \u00e9l\u00e9ments \u00e0 l'indice 1\nl\u00e9gumes.splice(1, 0, \"Betterave\", \"Poivron\");\nconsole.log(\"Apr\u00e8s splice:\", l\u00e9gumes);  \/\/ [\"Carotte\", \"Betterave\", \"Poivron\", \"Tomate\", \"Concombre\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Remplacement d&rsquo;\u00c9l\u00e9ments avec <code>splice<\/code><\/h3>\n\n\n\n<p>L&rsquo;une des <a href=\"https:\/\/wikiform.fr\/codespace\/fonctions-flechees-en-javascript-guide\">fonctionnalit\u00e9s puissantes de <code>splice<\/code><\/a> est la possibilit\u00e9 de remplacer des \u00e9l\u00e9ments existants :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let technologies = [\"HTML\", \"CSS\", \"JavaScript\"];\nconsole.log(\"Avant splice:\", technologies);\n\n\/\/ Remplacer \"CSS\" par \"Python\"\ntechnologies.splice(1, 1, \"Python\");\nconsole.log(\"Apr\u00e8s splice:\", technologies);  \/\/ [\"HTML\", \"Python\", \"JavaScript\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combinaison des Utilisations de <code>splice<\/code><\/h3>\n\n\n\n<p>Pour montrer la polyvalence de <code>splice<\/code>, combinons l&rsquo;insertion et la suppression en une seule op\u00e9ration :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let animaux = [\"Chien\", \"Chat\", \"Lapin\"];\nconsole.log(\"Avant splice:\", animaux);\n\n\/\/ Supprimer \"Chat\" et ajouter \"Lion\" et \"Tigre\" \u00e0 l'indice 1\nanimaux.splice(1, 1, \"Lion\", \"Tigre\");\nconsole.log(\"Apr\u00e8s splice:\", animaux);  \/\/ [\"Chien\", \"Lion\", \"Tigre\", \"Lapin\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Pratique de <code>splice<\/code> en Projets R\u00e9els<\/h3>\n\n\n\n<p>Voyons une utilisation pratique de <code>splice<\/code> dans un contexte de projet r\u00e9el. Supposons que nous ayons une <a href=\"https:\/\/wikiform.fr\/codespace\/projet-calculatrice-javascript-objectifs\">application de gestion de t\u00e2ches<\/a> o\u00f9 nous devons ajouter, supprimer ou r\u00e9organiser des t\u00e2ches :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let tasks = [\"Acheter du lait\", \"Faire du jogging\", \"\u00c9tudier JavaScript\"];\nconsole.log(\"Liste des t\u00e2ches:\", tasks);\n\n\/\/ Ajouter une nouvelle t\u00e2che\ntasks.splice(2, 0, \"Appeler le docteur\");\nconsole.log(\"Apr\u00e8s ajout d'une t\u00e2che:\", tasks);  \/\/ [\"Acheter du lait\", \"Faire du jogging\", \"Appeler le docteur\", \"\u00c9tudier JavaScript\"]\n\n\/\/ Supprimer une t\u00e2che\nlet removedTask = tasks.splice(1, 1);\nconsole.log(\"Apr\u00e8s suppression d'une t\u00e2che:\", tasks);  \/\/ [\"Acheter du lait\", \"Appeler le docteur\", \"\u00c9tudier JavaScript\"]\nconsole.log(\"T\u00e2che supprim\u00e9e:\", removedTask);  \/\/ [\"Faire du jogging\"]\n\n\/\/ Remplacer une t\u00e2che\ntasks.splice(2, 1, \"Faire les devoirs\");\nconsole.log(\"Apr\u00e8s remplacement d'une t\u00e2che:\", tasks);  \/\/ [\"Acheter du lait\", \"Appeler le docteur\", \"Faire les devoirs\"]\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La fonction <code>splice<\/code> est un outil puissant pour manipuler les tableaux en JavaScript. En ins\u00e9rant, supprimant ou rempla\u00e7ant des \u00e9l\u00e9ments, <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-elements-dom-js-textcontent-innerhtml\">vous pouvez g\u00e9rer efficacement les donn\u00e9es de vos tableaux<\/a> pour r\u00e9pondre aux besoins sp\u00e9cifiques de vos projets. Continuez \u00e0 exp\u00e9rimenter avec <code>splice<\/code> pour d\u00e9couvrir toutes ses capacit\u00e9s. Pour en apprendre davantage sur les m\u00e9thodes de tableau en JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fonctions-de-tableaux-avanc\u00e9es\/152\">les fonctions de tableaux avanc\u00e9es 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-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\n\n<p>Dans l&rsquo;univers JavaScript, il existe de nombreuses m\u00e9thodes pour manipuler les tableaux, y compris les m\u00e9thodes <a href=\"https:\/\/wikiform.fr\/codespace\/concatenation-en-javascript-guide-pratique\">de concat\u00e9nation<\/a>, de <a href=\"https:\/\/wikiform.fr\/codespace\/verifier-le-contraire-d-une-condition-en-javascript\">v\u00e9rification de conditions<\/a>, et bien plus encore. La <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-break-et-continue-en-javascript\">compr\u00e9hension des technologies telles que le BOM et le DOM<\/a> est \u00e9galement cruciale pour cr\u00e9er des projets robustes et interactifs. Pour approfondir vos comp\u00e9tences en JavaScript, explorez davantage de ressources et continuez \u00e0 pratiquer r\u00e9guli\u00e8rement.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Utiliser la fonction splice en JavaScript est essentiel pour manipuler efficacement les tableaux. La compr\u00e9hension de cette m\u00e9thode permet de r\u00e9aliser des op\u00e9rations complexes telles&#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-5628","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\/5628","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=5628"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5628\/revisions"}],"predecessor-version":[{"id":5629,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5628\/revisions\/5629"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}