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

¿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>
                     </div>

                     <!-- Article Footer with Prominent Share Buttons -->
                     <div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
                          <div class="flex flex-col sm:flex-row items-center justify-between gap-6">
                              <h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
                                 <i class="fa fa-share-alt text-tech-500"> </i>
                                Compartir                              </h4>
                             
                              <div class="flex flex-wrap justify-center gap-3">
                                 <!-- Twitter -->
                                 <a href="https://twitter.com/intent/tweet?text=¿Cómo crear un diccionario y agregar pares clave-valor de forma dinámica?&url=https://www.techcodeview.com/es/how-create-dictionary" 
                                   target="_blank" rel="noopener noreferrer" 
                                   class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
                                     <i class="fa fa-twitter text-lg"> </i>
                                     <span class="hidden sm:inline">Twitter </span>
                                 </a>

                                 <!-- Facebook -->
                                 <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/es/how-create-dictionary" 
                                   target="_blank" rel="noopener noreferrer"
                                   class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
                                     <i class="fa fa-facebook text-lg"> </i>
                                     <span class="hidden sm:inline">Facebook </span>
                                 </a>
                                
                                 <!-- LinkedIn -->
                                 <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/es/how-create-dictionary&title=¿Cómo crear un diccionario y agregar pares clave-valor de forma dinámica?" 
                                   target="_blank" rel="noopener noreferrer"
                                   class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
                                     <i class="fa fa-linkedin text-lg"> </i>
                                     <span class="hidden sm:inline">LinkedIn </span>
                                 </a>
                              </div>
                          </div>
                     </div>
                </article>

                <!-- Comments Placeholder / Random Articles -->
                <div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
                     <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
                        Te Puede Gustar                     </h3>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <div class="group">
                              <a href="/es/what-is-full-form-t" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
                                 <img loading="lazy" src="https://techcodeview.com/img/category/23/what-is-full-form-t.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Cuál es la forma completa de AT&T?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                              </a>
                              <h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
                                 <a href="/es/what-is-full-form-t">¿Cuál es la forma completa de AT&T? </a>
                              </h4>
                         </div> <div class="group">
                              <a href="/es/log4j-logging-levels" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
                                 <img loading="lazy" src="https://techcodeview.com/img/log4j-tutorial/51/log4j-logging-levels.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Niveles de registro de Log4J" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                              </a>
                              <h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
                                 <a href="/es/log4j-logging-levels">Niveles de registro de Log4J </a>
                              </h4>
                         </div>
                     </div>
                </div>
             </div>

             <!-- SECONDARY COLUMN (SIDEBAR) -->
             <!-- Aside Column -->
 <div class="lg:col-span-4 space-y-8">
	
	 <!-- Best Articles Widget -->
	 <div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
		 <div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
			 <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
                 <span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
                Artículos Más Populares             </h2>
		 </div>
		
		 <!-- Owl Carousel Preserved Container -->
		 <div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
			 <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/es/geometry-symbols">
						 <img src="https://techcodeview.com/img/geeks-premier-league-2023/04/geometry-symbols.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Símbolos de geometría" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/es/geometry-symbols" class="hover:text-tech-500 transition-colors line-clamp-3">Símbolos de geometría </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/es/advantages-disadvantages-speakers">
						 <img src="https://techcodeview.com/img/blog/04/advantages-disadvantages-speakers.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ventajas y desventajas de los oradores" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/es/advantages-disadvantages-speakers" class="hover:text-tech-500 transition-colors line-clamp-3">Ventajas y desventajas de los oradores </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/es/what-is-completablefuture">
						 <img src="https://techcodeview.com/img/java-misc/86/what-is-completablefuture.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Qué es CompletableFuture?" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/es/what-is-completablefuture" class="hover:text-tech-500 transition-colors line-clamp-3">¿Qué es CompletableFuture? </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/es/chromatic-number-graphs-graph-coloring-graph-theory">
						 <img src="https://techcodeview.com/img/discrete-mathematics/70/chromatic-number-graphs-graph-coloring-graph-theory.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cromático Número de gráficos | Coloración de gráficos en teoría de grafos" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/es/chromatic-number-graphs-graph-coloring-graph-theory" class="hover:text-tech-500 transition-colors line-clamp-3">Cromático Número de gráficos | Coloración de gráficos en teoría de grafos </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/es/unix-operating-system">
						 <img src="https://techcodeview.com/img/linux-tutorial/18/unix-operating-system.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="sistema operativo unix" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/es/unix-operating-system" class="hover:text-tech-500 transition-colors line-clamp-3">sistema operativo unix </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/es/decomposition-reaction">
						 <img src="https://techcodeview.com/img/chemical-bonding/22/decomposition-reaction.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Reaccion de descomposicion" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/es/decomposition-reaction" class="hover:text-tech-500 transition-colors line-clamp-3">Reaccion de descomposicion </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/es/how-use-sohcahtoa-131382">
						 <img src="https://techcodeview.com/img/blog/99/how-use-sohcahtoa.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cómo utilizar SOHCAHTOA: consejos y ejemplos" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/es/how-use-sohcahtoa-131382" class="hover:text-tech-500 transition-colors line-clamp-3">Cómo utilizar SOHCAHTOA: consejos y ejemplos </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/es/how-align-image-html">
						 <img src="https://techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cómo alinear una imagen en HTML" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/es/how-align-image-html" class="hover:text-tech-500 transition-colors line-clamp-3">Cómo alinear una imagen en HTML </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/es/9-best-film-schools-us-131816">
						 <img src="https://techcodeview.com/img/blog/19/9-best-film-schools-us.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Las 9 mejores escuelas de cine de EE. UU." class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/es/9-best-film-schools-us-131816" class="hover:text-tech-500 transition-colors line-clamp-3">Las 9 mejores escuelas de cine de EE. UU. </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/es/turtle-heading-function-python">
						 <img src="https://techcodeview.com/img/python-turtle/70/turtle-heading-function-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="función tortuga.heading() en Python" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/es/turtle-heading-function-python" class="hover:text-tech-500 transition-colors line-clamp-3">función tortuga.heading() en Python </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE -->
		 </div>
		

         <!-- Categories -->
		 <div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
			 <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Categoría </h2>
		 </div>
		 <div class="flex flex-wrap gap-2">
             <a href="/es/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Blog
             </a> <a href="/es/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Conversión De Java
             </a> <a href="/es/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Matemáticas
             </a> <a href="/es/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Colecciones Java
             </a> <a href="/es/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Diferencias
             </a> <a href="/es/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Cadena De Java
             </a>
         </div>

         <!-- Interesting Articles Widget -->
		 <div class="mt-8">
			 <div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
				 <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Artículos De Interés </h2>
			 </div>
			
			 <div id="owl-carousel-4" class="owl-carousel owl-theme">
				 <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/mathematical/56/stepping-numbers.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Números escalonados" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/mathematical/">Matemático </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/stepping-numbers">Números escalonados </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/blog/17/complete-guide-act-grammar-rules.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="La guía completa de las reglas gramaticales de ACT" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/blog/">Blog </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/complete-guide-act-grammar-rules-131650">La guía completa de las reglas gramaticales de ACT </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/git-tutorial/32/git-rebase.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Git Rebase" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/git-tutorial/">Tutorial De Git </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/git-rebase">Git Rebase </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/health-lifestyle/88/5-elements-life-meaning.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="5 elementos de la vida: significado, símbolo y características" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/health-lifestyle/">Salud Y Estilo De Vida </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/5-elements-life-meaning">5 elementos de la vida: significado, símbolo y características </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/binary-search/26/binary-search-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Búsqueda binaria en Java" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/binary-search/">Búsqueda Binaria </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/binary-search-java">Búsqueda binaria en Java </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/java-collections/61/java-linkedlist-class.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Clase Java LinkedList" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/java-collections/">Colecciones Java </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/java-linkedlist-class">Clase Java LinkedList </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE -->
			 </div>
		 </div>
	 </div>
 </div>
 <!-- /Aside Column -->         </div>
        </div>
     </div>

 <footer class="site-footer">
         <div class="container">
             <span class="footer-links">
                Copyright ©2026 Todos Los Derechos Reservados | 
                 <a href="//www.techcodeview.com/ar/">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: #0ea5e9; 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: #0284c7; }
    `,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>