logo

¿Cómo crear un diccionario y agregar pares clave-valor de forma dinámica?

Este artículo le enseñará cómo crear un diccionario en JavaScript utilizando objetos para almacenar pares clave-valor. Aunque JavaScript no tiene un tipo de diccionario incorporado, podemos crear uno de manera efectiva usando objetos JavaScript. Comencemos creando un nuevo objeto JavaScript para que actúe como nuestro diccionario.

Sintaxis:

La clave puede ser una cadena, un número entero. Si simplemente escribe la clave1 o cualquier número, se tratará como una cadena.



var dict = { key1 : value1 , key2 : value2 , .... };>
  • Crear diccionario vacío
    var dict = {};>
  • Agregar pares clave-valor en el diccionario
    dict[new_key] = new_value;>
    O si new_key ya está presente en el diccionario, entonces el valor de esto se actualizará a new_value.
    dict.new_key = new_value;>
  • Acceso a pares clave-valor
    var value = dict[key];>
    o
    var value = dict.key;>
  • Iterando todo el diccionario
    for(var key in dict) { console.log(key + ' : ' + dict[key]); }>

Ejemplo:

HTML
   Diccionario en Javascripttítulo>cabeza> <body style='text-align: center;'> <h1 style='color: green;'>techcodeview.com h1><p>vardict = { <br />'geek' : 1 , <br />'para 2', <br />'geeks' : 3.5 <br />}; <br />p> <button onClick='fun()'>Botón Agregar nuevos pares clave-valor><p id='demo'>p><script>función divertida() { var dict = { geek: 1, para: '2', geeks: 3.5, };  dict.new_geeks = 'nuevo_valor';  dict['otro_nuevo_geeks'] = 'otro_valor';  var to_show = 'var dict = { ';  for (var clave en dict) { to_show += ''' + clave + '' : ' + dict[clave] + ' ';  } to_show += ' }; ';  document.getElementById('demo') .innerHTML = to_show;  } script> cuerpo> html>></pre> </code> <p dir='ltr'>  <b>  <strong>Producción:</strong>  </b>  </p>  <img src='//techcodeview.com/img/javascript-misc/88/how-create-dictionary.webp' alt="">  <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="">Categoría</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/neet/">Nini</a> </li><li> <a href="/english-word-play/">Juego De Palabras En Ingles</a> </li><li> <a href="/java-array-programs/">Programas De Matriz Java</a> </li><li> <a href="/project/">Proyecto</a> </li><li> <a href="/math-queries/">Consultas Matemáticas</a> </li><li> <a href="/min-heap/">Montón Mínimo</a> </li><li> <a href="/ios-development/">Desarrollo Ios</a> </li><li> <a href="/kali-linux-tutorial/">Tutorial De Kali Linux</a> </li><li> <a href="/banking-general-awareness/">Conciencia General Bancaria</a> </li><li> <a href="/cpp-vector/">Cpp-Vector</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                	 <div class="section-inner">
                        <div class="content">
                            <div class="item">
  								<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>                                                   
                            </div>
                        </div>
                    </div>
                   <div class="section-inner">
                        <h2 class="heading">Generando números aleatorios en Java</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Un portal de informática para geeks. Contiene artículos de programación y ciencias de la computación bien escritos, bien pensados ​​y bien explicados, cuestionarios y preguntas de práctica/programación competitiva/entrevistas de empresa.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/generating-random-numbers-java"> <i class="fa fa-external-link"></i> Leer Más</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">Artículos De Interés</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/quick-access-toolbar">Acceso rapido a la barra de herramientas</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/physics-concepts/">Física-Conceptos</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/what-is-global-variable">¿Qué es la variable global?</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/hashmap-containskey-method-java">HashMap contiene el método Key() en Java</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/convert-json-dictionary-python">Convertir JSON a diccionario en Python</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">Entradas Populares</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/java-tutorial">tutorial de lenguaje de programación java</a>
</li><li><a href="/c-nameof-operator">nombre de</a>
</li><li><a href="/postorder-traversal">recorrido de pedido por correo</a>
</li><li><a href="/two-dimensional-array-c">programa de matriz bidimensional en c</a>
</li><li><a href="/method-overriding-java">java cómo anular</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 Todos Los Derechos Reservados |  <a href="//ja.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Descargo De Responsabilidad</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Acerca De Nosotros</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privacidad</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>