logo

Comment créer un dictionnaire et ajouter dynamiquement des paires clé-valeur ?

Cet article vous apprendra comment créer un dictionnaire en JavaScript en utilisant des objets pour stocker des paires clé-valeur. Bien que JavaScript n'ait pas de type de dictionnaire intégré, nous pouvons en créer un efficacement à l'aide d'objets JavaScript. Commençons par créer un nouvel objet JavaScript qui fera office de dictionnaire.

Syntaxe:



La clé peut être une chaîne, un entier. Si vous écrivez simplement key1 ou n’importe quel nombre, il sera traité comme une chaîne.

var dict = { key1 : value1 , key2 : value2 , .... };>
  • Créer un dictionnaire vide
    var dict = {};>
  • Ajout de paires clé-valeur dans le dictionnaire
    dict[new_key] = new_value;>
    ou Si new_key est déjà présent dans le dictionnaire, sa valeur sera mise à jour en new_value.
    dict.new_key = new_value;>
  • Accès aux paires clé-valeur
    var value = dict[key];>
    ou
    var value = dict.key;>
  • Itérer tout le dictionnaire
    for(var key in dict) { console.log(key + ' : ' + dict[key]); }>

Exemple:

HTML
   Dictionnaire en Javascripttitre>tête> <body style='text-align: center;'> <h1 style='color: green;'>techcodeview.com h1><p>var dict = { <br />'geek' : 1 , <br />'pour 2', <br />'geeks' : 3,5 <br />} ; <br />p> <button onClick='fun()'>Bouton Ajouter de nouvelles paires clé-valeur><p id='demo'>p><script>function fun() { var dict = { geek : 1, pour : '2', geeks : 3.5, } ;  dict.new_geeks = 'nouvelle_valeur';  dict['another_new_geeks'] = 'another_value';  var to_show = 'var dict = { ';  for (var key in dict) { to_show += ''' + key + '' : ' + dict[key] + ' ';  } to_show += ' }; ';  document.getElementById('demo') .innerHTML = to_show;  } script> corps> html>></pre> </code> <p dir='ltr'>  <b>  <strong>Sortir:</strong>  </b>  </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />  <img src='//techcodeview.com/img/javascript-misc/88/how-create-dictionary.webp' alt="">  <br></article>
                         
                        </div><!--//content-->
                    </div><!--//section-inner-->                 
                </section><!--//section-->
    
            </div><!--//primary-->
            <div class="secondary col-md-4 col-sm-12 col-xs-12">
                  <aside class="info aside section">
                    <div class="section-inner">
                        <h2 class="">Catégorie</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/python-function-programs/">Programmes De Fonctions Python</a> </li><li> <a href="/python-list-programs/">Programmes De Liste Python</a> </li><li> <a href="/spotlight/">Projecteur</a> </li><li> <a href="/csharp-method/">Méthode Csharp</a> </li><li> <a href="/java-jdbc/">Javajdbc</a> </li><li> <a href="/artificial-neural-network/">Réseau Neuronal Artificiel</a> </li><li> <a href="/adobe-illustrator/">Adobe Illustrator</a> </li><li> <a href="/python-matplotlib/">Python-Matplotlib</a> </li><li> <a href="/java-operators/">Opérateurs Java</a> </li><li> <a href="/javascript-lodash/">Javascript-Lodash</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                   <div class="section-inner">
                        <h2 class="heading">Encodage et décodage Java Base64</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Java Base64 Encode Decode exemples et sujets sur l'interface fonctionnelle, la classe anonyme, lambda pour la liste, lambda pour les méthodes comparables, par défaut, la référence de méthode, la date et l'heure Java, Java Nashorn, Java facultatif, le flux, le filtre, etc.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/java-base64-encode-decode"> <i class="fa fa-external-link"></i> Lire La Suite</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">Des Articles Intéressants</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/access-environment-variable-values-python">Accéder aux valeurs des variables d'environnement en Python</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/dana-white-net-worth-2024-ufc-ceo-s-salary">Dana White Net Worth 2024 (salaire, maison et voitures du PDG de l’UFC)</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/standard-deviation-formula">Écart type – Formule, exemples et comment calculer</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/create-directory-python">Créer un répertoire en Python</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/how-run-java-program-cmd-using-notepad">Comment exécuter un programme Java dans CMD à l'aide du Bloc-notes</a> </strong> </span>
                                    
                                </li><!--//item-->
                               
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
              
                 <aside class="list music aside section">
                    <div class="section-inner">
                        <h2 class="heading">Articles Populaires</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/mysql-tutorial">pas</a>
</li><li><a href="/when-was-first-computer-invented">ordinateur inventé en quelle année</a>
</li><li><a href="/what-is-10-6th-power">10 puissance de 6</a>
</li><li><a href="/java-string-date">convertir la date de la chaîne</a>
</li><li><a href="/stdin-stdout-c">stdin en c</a>
</li><li><a href="/when-did-windows-7-come-out">quand est-ce que Windows 7 est sorti</a>
</li> 
                                
                                
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
              
            </div><!--//secondary-->    
        </div><!--//row-->
    </div><!--//masonry-->
    
	    <footer class="footer">
        <div class="container text-center">
                <span>
Copyright ©2025 Tous Les Droits Sont Réservés |  <a href="//lv.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité</a>  </span>
        </div>
    </footer>
 
         
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>    
    

    <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>     
	
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
	
</body>
</html>