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];>
ovar 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="/java-long-class/">Clase Larga De Java</a> </li><li> <a href="/24-7-innovation-labs/">Laboratorios De Innovación 24 Horas Al Día, 7 Días A La Semana</a> </li><li> <a href="/linux/">Linux</a> </li><li> <a href="/commerce-11th/">Comercio - 11</a> </li><li> <a href="/java-class-object/">Clase Y Objeto Java</a> </li><li> <a href="/python-string/">Cadena De Pitón</a> </li><li> <a href="/project/">Proyecto</a> </li><li> <a href="/product-management-qna/">Preguntas Y Respuestas Sobre Gestión De Productos</a> </li><li> <a href="/automata-tutorial/">Tutorial Automático</a> </li><li> <a href="/jquery-tutorial/">Tutorial De Jquery</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">Método Csharp</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Método Csharp</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/csharp-method/"> <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="/ms-dos-commands-comprehensive-list">Comandos de MS-Dos: una lista completa</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/money-banking/">Dinero Y Banca</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/std-string-compare-c">std::string::compare() en C++</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/hashset-java">HashSet en Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/250-funny-cool-professional-work-team-names-consider">Más de 250 nombres de equipos de trabajo divertidos, geniales y profesionales para considerar</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="/how-read-csv-file-java">leyendo desde un archivo csv en java</a>
</li><li><a href="/java-instanceof">java es instancia de</a>
</li><li><a href="/how-sort-arraylist-java">ordenar la lista de matrices en java</a>
</li><li><a href="/what-is-listening-port">puerto de escucha</a>
</li><li><a href="/java-break-statement">final de java para bucle</a>
</li><li><a href="/how-add-matrix-c">matriz en lenguaje c</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="//bg.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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>