Ejemplos de Bucle For Con JavaScript

Inicio » JavaScript » 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.

Contenido del artículo

  1. Existen 3 tipos de bluces for
  2. For clásico
  3. For in
  4. For of

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

Escrito por:
Aziel Pichardo
Ingeniería en Sistemas
Universidad del Estado de Guanajuato
Editado por:
Mauricio del Moral Durán
Master en Comunicación
Universidad Intercontinental
Creado el: 2008-06-05
Última modificación: 2023-04-07

Últimos 10 comentarios

  1. Muy buen ejemplo y explicación, solo por favor dejar las correspondientes sangrías en el script, muchas personas en formación leen estos artículos y tenemos que predicar con el ejemplo.
    Por Dr. CP 2017-09-15 a las 21:14:22
  2. ayudenme necesito dos ejemplos de el bucle for (condicion para),gracias.
    Por silena 2009-07-07 a las 22:03:30

Deja un comentario


Acepto la política de privacidad.