Ejemplos de Bucle For Con JavaScript
Un bucle en JavaScript es una estructura de control que permite repetir un conjunto de instrucciones un número determinado de veces o mientras se cumpla una condición específica. En este artículo exploramos el Bucle For en JavaScript, explicamos de manera simple y damos ejemplos prácticos.
Comencemos por entender bien los bucles. Un bucle es una instrucción que sirve para realizar un comando varias veces en pocas líneas de código. Por ejemplo, si quieres mostrar los números del 1 al 100, en lugar de escribir 100 líneas de código, puedes usar un bucle para decirle "muestra los números del 1 al 10".
Los bucles son útiles cuando necesitas hacer algo muchas veces, como trabajar con listas de cosas o hacer cálculos con varios números.
- Sigue con: Bucle While en JavaScript
Contenido del artículo
Existen 3 tipos de bluces for
For clásico
Es la forma más común y básica de un bucle for. Se compone de tres partes: la inicialización del contador, la condición de continuación y la actualización del contador. Por ejemplo:
Escribir una los números del 1 al 100 con un bucle for.
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bucle for clásico en una página web</title></head><body><ul id="listaNumeros"></ul><script type="text/javascript"> const listaNumeros = document.getElementById("listaNumeros");for (let i = 100; i <= 5; i++) { const listItem = document.createElement("li"); listItem.textContent = i; listaNumeros.appendChild(listItem); } </script></body></html>
For in
Este tipo de bucle se utiliza para iterar sobre las propiedades enumerables de un objeto. Es útil cuando se desea realizar una operación en cada propiedad de un objeto, pero no se conoce el número de propiedades que tiene. Por ejemplo:
Mostrar en una tabla las propiedades y valores de un objeto con un bucle for in.
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bucle for...in en una página web</title></head><body><table id="tablaObjeto" border="1"> <tr> <th>Propiedad</th> <th>Valor</th> </tr> </table><script type="text/javascript"> const objeto = { nombre: "Juan", edad: 30, ciudad: "Madrid" }; const tablaObjeto = document.getElementById("tablaObjeto");for (const propiedad in objeto) { const fila = document.createElement("tr"); const celdaPropiedad = document.createElement("td"); const celdaValor = document.createElement("td");celdaPropiedad.textContent = propiedad; celdaValor.textContent = objeto[propiedad];fila.appendChild(celdaPropiedad); fila.appendChild(celdaValor); tablaObjeto.appendChild(fila); } </script></body></html>
For of
Este tipo de bucle se utiliza para iterar sobre elementos de objetos iterables, como arreglos, conjuntos, mapas y strings. Es especialmente útil cuando se desea realizar una operación en cada elemento de una colección sin la necesidad de conocer su tamaño. Por ejemplo:
Crear una lista desordenada con los elementos de un arreglo con bucle for of.
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bucle for...of en una página web</title></head><body><ul id="listaElementos"></ul><script type="text/javascript"> const elementos = ["Manzana", "Plátano", "Naranja", "Pera"]; const listaElementos = document.getElementById("listaElementos");for (const elemento of elementos) { const listItem = document.createElement("li"); listItem.textContent = elemento; listaElementos.appendChild(listItem); } </script></body></html>
¿Cómo citar? Pichardo, A. & Del Moral, M. (s.f.). Ejemplos de Bucle For Con JavaScript.Ejemplo de. Recuperado el 13 de Junio de 2024 de https://www.ejemplode.com/24-javascript/120-ejemplo_de_bucle_for_con_javascript.html
Últimos 10 comentarios