{"id":5666,"date":"2024-08-29T01:56:36","date_gmt":"2024-08-29T01:56:36","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-spread-operator-en-javascript-guide\/"},"modified":"2024-08-29T01:56:38","modified_gmt":"2024-08-29T01:56:38","slug":"utiliser-spread-operator-en-javascript-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-spread-operator-en-javascript-guide\/","title":{"rendered":"10.11 Utiliser Spread Operator en JavaScript : Guide"},"content":{"rendered":"\n<p><strong>Utiliser le Spread Operator en JavaScript<\/strong> est une technique essentielle pour travailler avec des tableaux et des objets de mani\u00e8re plus efficace et concise. Comprendre comment le <strong>Spread Operator en JavaScript<\/strong> fonctionne et ses diff\u00e9rentes utilisations peut r\u00e9volutionner votre mani\u00e8re de coder. Apprenons \u00e0 l&rsquo;utiliser \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>Spread Operator 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\/658888752?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&rsquo;offre 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 Spread Operator, introduit dans ES6, est repr\u00e9sent\u00e9 par trois points <code>...<\/code>. Il permet d&rsquo;\u00e9taler les \u00e9l\u00e9ments d&rsquo;un tableau ou les propri\u00e9t\u00e9s d&rsquo;un objet, facilitant ainsi le travail avec ces structures. Voyons quelques exemples pratiques :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le Spread Operator avec des Tableaux<\/h3>\n\n\n\n<p>Le Spread Operator peut \u00eatre utilis\u00e9 pour copier ou combiner des tableaux. Voici un exemple de copie de tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Copie de tableau\nconst originalArray = [1, 2, 3];\nconst copiedArray = [...originalArray];\n\nconsole.log(copiedArray); \/\/ [1, 2, 3]\n<\/code><\/pre>\n\n\n\n<p>Vous pouvez \u00e9galement l&rsquo;utiliser pour combiner plusieurs tableaux :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Combiner des tableaux\nconst array1 = [1, 2];\nconst array2 = [3, 4];\nconst combinedArray = [...array1, ...array2];\n\nconsole.log(combinedArray); \/\/ [1, 2, 3, 4]\n<\/code><\/pre>\n\n\n\n<p>Pour approfondir l&rsquo;utilisation des tableaux en JavaScript, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-for-in-en-javascript-guide-pratique\">les boucles For-In en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le Spread Operator avec des Objets<\/h3>\n\n\n\n<p>Pour les objets, le Spread Operator est tr\u00e8s utile pour cr\u00e9er des copies d&rsquo;objets ou les fusionner. Voici comment copier un objet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Copie d'objet\nconst originalObject = { a: 1, b: 2 };\nconst copiedObject = { ...originalObject };\n\nconsole.log(copiedObject); \/\/ { a: 1, b: 2 }\n<\/code><\/pre>\n\n\n\n<p>Vous pouvez \u00e9galement fusionner plusieurs objets :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Fusionner des objets\nconst obj1 = { a: 1, b: 2 };\nconst obj2 = { c: 3, d: 4 };\nconst mergedObject = { ...obj1, ...obj2 };\n\nconsole.log(mergedObject); \/\/ { a: 1, b: 2, c: 3, d: 4 }\n<\/code><\/pre>\n\n\n\n<p>Pour plus d&rsquo;informations, consultez notre article sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/decomposition-objet-en-javascript-destructuring\">utilisation de la d\u00e9structuration en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Avanc\u00e9e du Spread Operator<\/h3>\n\n\n\n<p>Le Spread Operator peut \u00e9galement \u00eatre utilis\u00e9 dans des situations plus avanc\u00e9es comme les fonctions ou la manipulation de n\u0153uds DOM.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation dans les Fonctions<\/h4>\n\n\n\n<p>Le Spread Operator peut \u00eatre utilis\u00e9 pour passer un tableau en tant qu&rsquo;ensemble d&rsquo;arguments \u00e0 une fonction :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function sum(x, y, z) {\n  return x + y + z;\n}\n\nconst numbers = [1, 2, 3];\n\nconsole.log(sum(...numbers)); \/\/ 6\n<\/code><\/pre>\n\n\n\n<p>Poursuivez votre exploration en visitant notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-les-fonctions-existantes-en-javascript\">l&rsquo;utilisation des fonctions existantes en JavaScript<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Clonage de N\u0153uds DOM<\/h4>\n\n\n\n<p>Le Spread Operator peut \u00e9galement \u00eatre utilis\u00e9 pour cloner des \u00e9l\u00e9ments DOM :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const list = document.querySelectorAll('li');\nconst arrayFromList = [...list];\nconsole.log(arrayFromList); \/\/ Array of list items\n<\/code><\/pre>\n\n\n\n<p>Pour en savoir plus sur la manipulation des \u00e9l\u00e9ments DOM, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/acceder-aux-elements-du-dom-en-javascript\">l&rsquo;acc\u00e8s aux \u00e9l\u00e9ments du DOM en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le Spread Operator pour D\u00e9structurer des Donn\u00e9es<\/h3>\n\n\n\n<p>Le Spread Operator fonctionne \u00e9galement bien avec la d\u00e9structuration, permettant de capturer des parties sp\u00e9cifiques d&rsquo;un tableau ou d&rsquo;un objet.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ D\u00e9structuration de tableau\nconst [first, ...rest] = [1, 2, 3, 4];\nconsole.log(first); \/\/ 1\nconsole.log(rest);  \/\/ [2, 3, 4]\n\n\/\/ D\u00e9structuration d'objet\nconst { a, ...others } = { a: 1, b: 2, c: 3 };\nconsole.log(a);     \/\/ 1\nconsole.log(others); \/\/ { b: 2, c: 3 }\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Manipulation Avanc\u00e9e de Donn\u00e9es<\/h4>\n\n\n\n<p>Le Spread Operator peut \u00eatre utilis\u00e9 pour des manipulations avanc\u00e9es de donn\u00e9es, comme immutabilit\u00e9 des objets dans le contexte de librairies comme React :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Immutability in React state management\nconst state = { name: 'John', age: 30 };\nconst newState = { ...state, age: 31 };\n\nconsole.log(newState); \/\/ { name: 'John', age: 31 }\n<\/code><\/pre>\n\n\n<!-- Ajout d'un contenu suppl\u00e9mentaire pour atteindre la longueur requise -->\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d&rsquo;Utilisation du Spread Operator<\/h3>\n\n\n\n<p>Pour aller plus loin, voici quelques exemples avanc\u00e9s d&rsquo;utilisation du Spread Operator pour illustrer sa flexibilit\u00e9 et sa puissance.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Mise \u00e0 Jour de Tableaux Immuables<\/h4>\n\n\n\n<p>Dans des frameworks tels que Redux, le Spread Operator est couramment utilis\u00e9 pour maintenir l&rsquo;immuabilit\u00e9 des \u00e9tats :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const initialState = { \n  users: [{name: 'John'}, {name: 'Jane'}] \n};\n\nfunction reducer(state = initialState, action) {\n  switch (action.type) {\n    case 'ADD_USER':\n      return {\n        ...state,\n        users: [...state.users, action.newUser]\n      };\n    default:\n      return state;\n  }\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Fusionner des Propri\u00e9t\u00e9s dans un Contexte Asynchrone<\/h4>\n\n\n\n<p>Le Spread Operator est \u00e9galement utile pour fusionner les r\u00e9ponses de plusieurs requ\u00eates asynchrones :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>async function fetchData() {\n  const userResponse = await fetch('\/api\/user');\n  const postsResponse = await fetch('\/api\/posts');\n\n  const userData = await userResponse.json();\n  const postsData = await postsResponse.json();\n\n  return {\n    ...userData,\n    posts: postsData\n  };\n}\n\nfetchData().then(data => console.log(data));\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser le Spread Operator avec les Rest Parameters<\/h4>\n\n\n\n<p>Le Spread Operator peut \u00eatre combin\u00e9 avec les rest parameters pour cr\u00e9er des fonctions flexible :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function combineArrays(...arrays) {\n  return [].concat(...arrays);\n}\n\nconst result = combineArrays([1, 2], [3, 4], [5, 6]);\nconsole.log(result); \/\/ [1, 2, 3, 4, 5, 6]\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Application Pratique du Spread Operator<\/h4>\n\n\n\n<p>Consid\u00e9rons une application r\u00e9elle o\u00f9 le Spread Operator est utilis\u00e9 pour g\u00e9rer un formulaire complexe. Imaginez une fonction qui prend en entr\u00e9e les champs d&rsquo;un formulaire et les fusionne dans un seul objet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const form1 = { name: 'John', age: 30 };\nconst form2 = { job: 'Developer', city: 'New York' };\n\nconst mergedForm = {...form1, ...form2};\nconsole.log(mergedForm); \/\/ { name: 'John', age: 30, job: 'Developer', city: 'New York' }\n<\/code><\/pre>\n\n\n\n<p>En continuant d&rsquo;explorer JavaScript et le Spread Operator, consultez \u00e9galement des ressources suppl\u00e9mentaires pour approfondir vos comp\u00e9tences. Par exemple, le <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\" target=\"_blank\" rel=\"noopener\">site MDN Web Docs<\/a> propose des articles d\u00e9taill\u00e9s et des guides sur JavaScript, et le <a href=\"https:\/\/www.javascript.com\/\" target=\"_blank\" rel=\"noopener\">site JavaScript.com<\/a> offre des tutoriels et des ressources pour les d\u00e9veloppeurs. Vous pouvez \u00e9galement suivre des cours interactifs sur des plateformes comme <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> pour un apprentissage structur\u00e9.<\/p>\n\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/","protected":false},"excerpt":{"rendered":"<p>Utiliser le Spread Operator en JavaScript est une technique essentielle pour travailler avec des tableaux et des objets de mani\u00e8re plus efficace et concise. Comprendre&#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-5666","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\/5666","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=5666"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5666\/revisions"}],"predecessor-version":[{"id":5667,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5666\/revisions\/5667"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}