{"id":5664,"date":"2024-08-29T01:52:37","date_gmt":"2024-08-29T01:52:37","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ajouter-arguments-avec-rest-parameter-en-javascript\/"},"modified":"2024-08-29T01:52:40","modified_gmt":"2024-08-29T01:52:40","slug":"ajouter-arguments-avec-rest-parameter-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ajouter-arguments-avec-rest-parameter-en-javascript\/","title":{"rendered":"10.10 Ajouter Arguments avec REST Parameter en JavaScript"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>REST Parameter JavaScript<\/strong> permet une plus grande flexibilit\u00e9 dans la gestion des param\u00e8tres de fonction. Apprendre \u00e0 utiliser le <strong>REST Parameter en JavaScript<\/strong> peut rendre vos fonctions plus robustes et adaptables. D\u00e9couvrons comment ils fonctionnent et comment les impl\u00e9menter avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>REST Parameter 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\/658888689?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>Le <strong>REST Parameter en JavaScript<\/strong> est introduit par l&rsquo;ES6 et permet aux fonctions d&rsquo;accepter un nombre ind\u00e9fini d&rsquo;arguments sous forme de tableau. En pla\u00e7ant simplement trois points (\u00ab\u00a0&#8230;\u00a0\u00bb) devant un nom de param\u00e8tre, vous pouvez regrouper tous les arguments restants dans une seule variable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Syntaxe de Base du REST Parameter<\/h3>\n\n\n\n<p>La syntaxe de base pour utiliser le REST Parameter est tr\u00e8s simple. Voici comment vous pouvez l&rsquo;impl\u00e9menter dans une fonction JavaScript :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function nomDeFonction(arg1, arg2, ...restArgs) {\n    console.log(arg1);          \/\/ Premier argument\n    console.log(arg2);          \/\/ Deuxi\u00e8me argument\n    console.log(restArgs);      \/\/ Liste de tous les arguments restants\n}\n\nnomDeFonction(1, 2, 3, 4, 5);\n\/\/ Output:\n\/\/ 1\n\/\/ 2\n\/\/ [3, 4, 5]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le REST Parameter pour Additionner des Nombres<\/h3>\n\n\n\n<p>Utilisons le REST Parameter pour concevoir une fonction qui additionne un nombre quelconque de nombres :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function additionner(...nombres) {\n    return nombres.reduce((acc, actuel) => acc + actuel, 0);\n}\n\nconsole.log(additionner(1, 2, 3, 4)); \/\/ Output: 10\nconsole.log(additionner(5, 10, 15));  \/\/ Output: 30\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner avec des Param\u00e8tres Normaux<\/h3>\n\n\n\n<p>Il est possible de combiner le REST Parameter avec des param\u00e8tres normaux. Voyons un exemple pratique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function saluer(salutation, ...noms) {\n    return `${salutation}, ${noms.join(' et ')}!`;\n}\n\nconsole.log(saluer(\"Bonjour\", \"Alice\", \"Bob\", \"Charlie\")); \/\/ Output: Bonjour, Alice et Bob et Charlie!\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Avanc\u00e9e du REST Parameter<\/h3>\n\n\n\n<p>Le REST Parameter peut \u00e9galement \u00eatre utilis\u00e9 pour effectuer des op\u00e9rations plus complexes. Voici un exemple o\u00f9 nous utilisons le REST Parameter pour concat\u00e9ner des cha\u00eenes de caract\u00e8res :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function concatener(separateur, ...mots) {\n    return mots.join(separateur);\n}\n\nconsole.log(concatener(\", \", \"JavaScript\", \"est\", \"g\u00e9nial\")); \/\/ Output: JavaScript, est, g\u00e9nial\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Diff\u00e9rence entre REST Parameter et Arguments Objet<\/h3>\n\n\n\n<p>Le REST Parameter et l&rsquo;objet <code>arguments<\/code> permettent tous deux d&rsquo;acc\u00e9der \u00e0 un nombre variable d&rsquo;arguments, mais ils ont leurs diff\u00e9rences. L&rsquo;objet <code>arguments<\/code> n&rsquo;est pas un tableau r\u00e9el et a des limitations en ES6 par rapport \u00e0 <code>rest<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function comparer(a, b) {\n    console.log(arguments);\n    console.log([a, b, ...arguments]);\n}\n\ncomparer(1, 2, 3); \n\/\/ arguments: [1, 2, 3]\n\/\/ Using ...arguments with rest parameter: [1, 2, 1, 2, 3]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cas Pratiques d&rsquo;Utilisation du REST Parameter<\/h3>\n\n\n\n<p>Pour mieux comprendre les applications pratiques, abordons quelques cas d&rsquo;utilisation o\u00f9 le REST Parameter apporte une solution \u00e9l\u00e9gante :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Fusionner des Tableaux<\/h4>\n\n\n\n<p>Le REST Parameter facilite la fusion de plusieurs tableaux en un seul :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function fusionnerTableaux(...tableaux) {\n    return tableaux.flat();\n}\n\nconsole.log(fusionnerTableaux([1, 2], [3, 4], [5, 6])); \/\/ Output: [1, 2, 3, 4, 5, 6]\n<\/code><\/pre>\n\n\n\n<p>Pour plus d&rsquo;informations sur les tableaux en JavaScript, consultez notre guide sur la <a href=\"https:\/\/wikiform.fr\/codespace\/creer-un-tableau-simple-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">cr\u00e9ation de tableaux simples en JavaScript<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9ation d&rsquo;Objets \u00e0 Partir de Paires Cl\u00e9\/Valeur<\/h4>\n\n\n\n<p>Utilisez le REST Parameter pour cr\u00e9er des objets dynamiquement :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function creerObjet(...paires) {\n    const objet = {};\n    paires.forEach(([cl\u00e9, valeur]) => {\n        objet[cl\u00e9] = valeur;\n    });\n    return objet;\n}\n\nconsole.log(creerObjet(['nom', 'Alice'], ['\u00e2ge', 25])); \n\/\/ Output: { nom: 'Alice', \u00e2ge: 25 }\n<\/code><\/pre>\n\n\n\n<p>Pour comprendre davantage comment manipuler les objets en JavaScript, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-un-objet-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">tutoriel sur la cr\u00e9ation d&rsquo;objets en JavaScript<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Le <strong>REST Parameter en JavaScript<\/strong> est une fonctionnalit\u00e9 puissante qui simplifie la gestion des param\u00e8tres de fonction flexibles et nombre variable. En utilisant le REST Parameter, vous pouvez cr\u00e9er des fonctions plus robustes, adaptables et lisibles. N&rsquo;h\u00e9sitez pas \u00e0 mettre en pratique ce que vous avez appris et \u00e0 explorer davantage pour devenir un expert en JavaScript. Pour plus de tutoriels sur JavaScript et d&rsquo;autres sujets de programmation, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">cours complet sur JavaScript<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-PYTHON-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\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 \u00e0 moiti\u00e9 prix!\" title=\"\"><\/a>\n\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) {\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();\n    }\n});\n<\/script>\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html REST Parameter JavaScript permet une plus grande flexibilit\u00e9 dans la gestion des param\u00e8tres de fonction. Apprendre \u00e0 utiliser le REST Parameter en JavaScript peut&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2842,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5664","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\/5664","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=5664"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5664\/revisions"}],"predecessor-version":[{"id":5665,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5664\/revisions\/5665"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2842"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}