{"id":5624,"date":"2024-08-29T00:32:13","date_gmt":"2024-08-29T00:32:13","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/trouver-element-par-valeur-en-javascript-indexof\/"},"modified":"2024-08-29T00:32:15","modified_gmt":"2024-08-29T00:32:15","slug":"trouver-element-par-valeur-en-javascript-indexof","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/trouver-element-par-valeur-en-javascript-indexof\/","title":{"rendered":"8.8 Trouver \u00c9l\u00e9ment par Valeur en JavaScript (indexOf)"},"content":{"rendered":"\n<p><strong>Trouver \u00c9l\u00e9ment JavaScript par Valeur (indexOf)<\/strong> est une fonctionnalit\u00e9 essentielle pour manipuler efficacement les tableaux. Conna\u00eetre et ma\u00eetriser la m\u00e9thode <strong>indexOf<\/strong> permet de rechercher, valider et effectuer des actions en fonction des \u00e9l\u00e9ments pr\u00e9sents dans un tableau. Dans ce tutoriel, nous d\u00e9couvrirons comment utiliser <strong>indexOf<\/strong> de mani\u00e8re optimale gr\u00e2ce \u00e0 des exemples pratiques et des conseils utiles.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la M\u00e9thode <strong>indexOf<\/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\/658886467?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>indexOf<\/code> en JavaScript est utilis\u00e9e pour rechercher un sp\u00e9cifi\u00e9 \u00e9l\u00e9ment dans un tableau et renvoie son premier indice. Si l&rsquo;\u00e9l\u00e9ment n&rsquo;est pas trouv\u00e9, <code>indexOf<\/code> retourne <code>-1<\/code>. Cette m\u00e9thode est tr\u00e8s utile pour v\u00e9rifier l&rsquo;existence d&rsquo;un \u00e9l\u00e9ment et pour obtenir sa position dans le tableau, facilitant ainsi des t\u00e2ches courantes de manipulation de donn\u00e9es. Pour en savoir plus sur <a href=\"https:\/\/wikiform.fr\/codespace\/recursivite-en-javascript-guide-complet\">la r\u00e9cursivit\u00e9 en JavaScript<\/a>, consultez notre guide d\u00e9taill\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Syntaxe de <strong>indexOf<\/strong><\/h3>\n\n\n\n<p>La syntaxe de la m\u00e9thode <code>indexOf<\/code> est simple et directe :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let index = array.indexOf(element, start);<\/code><\/pre>\n\n\n\n<p>Voici ce que chaque param\u00e8tre repr\u00e9sente :<\/p>\n<ul>\n    <li><code>element<\/code> : L&rsquo;\u00e9l\u00e9ment \u00e0 rechercher dans le tableau.<\/li>\n    <li><code>start<\/code> (optionnel) : La position de d\u00e9part pour la recherche (par d\u00e9faut, c&rsquo;est 0).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple de base de l&rsquo;utilisation de <strong>indexOf<\/strong><\/h3>\n\n\n\n<p>Voyons un exemple simple o\u00f9 nous recherchons un \u00e9l\u00e9ment dans un tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\", \"cerise\", \"banane\"];\nlet index = fruits.indexOf(\"banane\");\n\nconsole.log(index); \/\/ Affiche 1 car \"banane\" se trouve \u00e0 l'indice 1\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Recherche d&rsquo;\u00e9l\u00e9ment inexistante<\/h3>\n\n\n\n<p>Si l&rsquo;\u00e9l\u00e9ment n&rsquo;existe pas dans le tableau, <code>indexOf<\/code> retourne -1 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\", \"cerise\"];\nlet index = fruits.indexOf(\"orange\");\n\nconsole.log(index); \/\/ Affiche -1 car \"orange\" n'est pas dans le tableau\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Recherche \u00e0 partir d&rsquo;un indice sp\u00e9cifique<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement sp\u00e9cifier un indice de d\u00e9part \u00e0 partir duquel commencer la recherche :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\", \"cerise\", \"banane\"];\nlet index = fruits.indexOf(\"banane\", 2);\n\nconsole.log(index); \/\/ Affiche 3 car le second \"banane\" est \u00e0 l'indice 3\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <strong>indexOf<\/strong> pour la validation de l&rsquo;\u00e9l\u00e9ment<\/h3>\n\n\n\n<p>La m\u00e9thode <code>indexOf<\/code> est souvent utilis\u00e9e pour v\u00e9rifier l&rsquo;existence d&rsquo;un \u00e9l\u00e9ment dans un tableau avant de proc\u00e9der \u00e0 d&rsquo;autres actions :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let fruits = [\"pomme\", \"banane\", \"cerise\"];\n\nif (fruits.indexOf(\"cerise\") !== -1) {\n    console.log(\"Cerise est dans le tableau.\");\n} else {\n    console.log(\"Cerise n'est pas dans le tableau.\");\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">IndexOf avec des types complexes<\/h3>\n\n\n\n<p>La m\u00e9thode <code>indexOf<\/code> fonctionne \u00e9galement avec des objets et des tableaux imbriqu\u00e9s. Cependant, elle compare les r\u00e9f\u00e9rences, pas les valeurs. Voici un exemple avec des objets :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let users = [{ name: \"Alice\" }, { name: \"Bob\" }, { name: \"Charlie\" }];\nlet user = { name: \"Bob\" };\n\nlet index = users.indexOf(user);\n\nconsole.log(index); \/\/ Affiche -1 car les objets ne sont pas identiques par r\u00e9f\u00e9rence\n\n\/\/ Pour trouver l'utilisateur de mani\u00e8re correcte, comparer les valeurs\nindex = users.findIndex(u => u.name === \"Bob\");\n\nconsole.log(index); \/\/ Affiche 1 car l'utilisateur Bob est trouv\u00e9 par sa valeur de propri\u00e9t\u00e9\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Applications Avanc\u00e9es de <strong>indexOf<\/strong><\/h3>\n\n\n\n<p>L&rsquo;usage de <code>indexOf<\/code> ne se limite pas \u00e0 la simple recherche d&rsquo;\u00e9l\u00e9ment. Il peut \u00e9galement \u00eatre utilis\u00e9 pour diverses manipulations avanc\u00e9es des tableaux, telles que la suppression de doublons ou la gestion des s\u00e9lections multiples. Si vous souhaitez en savoir plus sur <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-les-exceptions-en-javascript-guide\">la gestion des exceptions en JavaScript<\/a>, lisez notre article d\u00e9taill\u00e9.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Suppression de doublons dans un tableau<\/h4>\n\n\n\n<p>Pour supprimer les doublons dans un tableau, vous pouvez utiliser <code>indexOf<\/code> en combinaison avec la m\u00e9thode <code>filter<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let numbers = [1, 2, 3, 1, 2, 4];\n\nlet uniqueNumbers = numbers.filter((item, index) => {\n    return numbers.indexOf(item) === index;\n});\n\nconsole.log(uniqueNumbers); \/\/ Affiche [1, 2, 3, 4]\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion des \u00e9l\u00e9ments s\u00e9lectionn\u00e9s<\/h4>\n\n\n\n<p>Pour g\u00e9rer une s\u00e9lection multiple d&rsquo;\u00e9l\u00e9ments dans une liste (comme dans une interface de s\u00e9lection avec des cases \u00e0 cocher), vous pouvez utiliser <code>indexOf<\/code> pour facilement ajouter ou supprimer des \u00e9l\u00e9ments :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let selectedItems = [\"apple\", \"banana\"];\n\nfunction toggleSelection(item) {\n    let index = selectedItems.indexOf(item);\n\n    if (index === -1) {\n        selectedItems.push(item);\n    } else {\n        selectedItems.splice(index, 1);\n    }\n}\n\ntoggleSelection(\"banana\"); \/\/ supprime \"banana\" de selectedItems\ntoggleSelection(\"cherry\"); \/\/ ajoute \"cherry\" \u00e0 selectedItems\n\nconsole.log(selectedItems); \/\/ Affiche [\"apple\", \"cherry\"]\n<\/code><\/pre>\n\n\n\n<p>Afin de continuer votre apprentissage sur l&rsquo;utilisation de <strong>indexOf<\/strong> et d&rsquo;autres m\u00e9thodes de manipulation de tableaux en JavaScript, explorez les ressources suivantes :<\/p>\n<ul>\n    <li>Le <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\/Objets_globaux\/Array\/indexOf\" target=\"_blank\" rel=\"noopener\">Documentation MDN sur Array.prototype.indexOf<\/a> pour des d\u00e9tails techniques et des exemples suppl\u00e9mentaires.<\/li>\n    <li>Les cours interactifs sur <a href=\"https:\/\/www.codecademy.com\/\" target=\"_blank\" rel=\"noopener\">Codecademy<\/a> pour apprendre JavaScript de mani\u00e8re pratique.<\/li>\n    <li>Des tutoriels vid\u00e9o sur <a href=\"https:\/\/www.youtube.com\/\" target=\"_blank\" rel=\"noopener\">YouTube<\/a>, tels que ceux de la cha\u00eene Traversy Media.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Trouver \u00c9l\u00e9ment JavaScript avec la m\u00e9thode <strong>indexOf<\/strong> est une fonction fondamentale en JavaScript pour rechercher et manipuler les \u00e9l\u00e9ments des tableaux. En apprenant \u00e0 utiliser efficacement <code>indexOf<\/code>, vous pouvez r\u00e9aliser des nombreuses op\u00e9rations de gestion de donn\u00e9es de mani\u00e8re simple et efficace. Continuez \u00e0 explorer cette m\u00e9thode et d&rsquo;autres fonctionnalit\u00e9s des tableaux pour perfectionner vos comp\u00e9tences en JavaScript ! Pour des informations plus d\u00e9taill\u00e9es, vous pouvez aussi consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-un-tableau-simple-en-javascript-tutoriel\">guide sur la cr\u00e9ation de tableaux simples 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-JS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\n\n<p>Pour plus de tutoriels et de cours pratiques, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">page de formation JavaScript<\/a> !<\/p>\n.\n\n\n<h2 class=\"wp-block-heading\">Exploration Plus Profonde<\/h2>\n\n\n\n<p>Pour une meilleure ma\u00eetrise de JavaScript, il est crucial de comprendre non seulement l\u2019utilisation de <strong>indexOf<\/strong> mais aussi d\u2019autres concepts avanc\u00e9s comme<a href=\"https:\/\/wikiform.fr\/codespace\/fonctions-avec-valeur-de-retour-en-javascript\" title=\"Fonctions avec Valeur de Retour en JavaScript\"> les fonctions avec valeur de retour<\/a> ainsi que<a href=\"https:\/\/wikiform.fr\/codespace\/objets-set-map-weakset-weakmap-en-javascript\" title=\"Objets Set, Map, WeakSet, WeakMap en JavaScript\"> les objets complexes comme Set et Map<\/a>. Ces connaissances renforceront votre capacit\u00e9 \u00e0 manipuler efficacement les donn\u00e9es dans vos applications. Pour une introduction plus d\u00e9taill\u00e9e, vous pouvez lire notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/decomposition-objet-en-javascript-destructuring\">la d\u00e9composition d&rsquo;objets en JavaScript<\/a>.<\/p>\n\n\n\n<p>JavaScript est \u00e9galement riche en m\u00e9thodes pour g\u00e9rer les <a href=\"https:\/\/wikiform.fr\/codespace\/operations-mathematiques-en-javascript-tutoriel\" title=\"Op\u00e9rations Math\u00e9matiques en","protected":false},"excerpt":{"rendered":"<p>Trouver \u00c9l\u00e9ment JavaScript par Valeur (indexOf) est une fonctionnalit\u00e9 essentielle pour manipuler efficacement les tableaux. Conna\u00eetre et ma\u00eetriser la m\u00e9thode indexOf permet de rechercher, valider&#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-5624","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\/5624","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=5624"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5624\/revisions"}],"predecessor-version":[{"id":5625,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5624\/revisions\/5625"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}