Arrays y objetos, métodos de iteración y ciclos para recorrer datos.
Arrays
- Estructuras para almacenar listas de datos, ordenadas por índice.
Ejemplo:
javascript
1const tareas = ["Estudiar", "Practicar", "Publicar"]; 2console.log(tareas[0]); // "Estudiar" - Métodos esenciales:
push,pop,shift,unshift,slice,splice,includes,indexOf. Ejemplo:javascript1const lista = ["a", "b"]; 2lista.push("c"); // ["a", "b", "c"] 3const ultimo = lista.pop(); // "c" - Ordenar y combinar arrays con
sort,concaty spread. Ejemplo:javascript1const nums = [3, 1, 2]; 2nums.sort((a, b) => a - b); // [1, 2, 3] 3const combinados = nums.concat([4, 5]); 4const copia = [...combinados];
Loops
forpara recorridos controlados por índice. Ejemplo:javascript1for (let i = 0; i < 3; i++) { 2 console.log(i); 3}whileydo...whilepara repeticiones con condición. Ejemplo:javascript1let i = 0; 2while (i < 2) { 3 i++; 4} 5 6let j = 0; 7do { 8 j++; 9} while (j < 2);- Buenas prácticas: evitar bucles infinitos y usar
break/continuecon criterio. Ejemplo:javascript1for (let i = 0; i < 5; i++) { 2 if (i === 2) continue; 3 if (i === 4) break; 4}
Objetos
- Colecciones clave-valor para representar entidades reales.
Ejemplo:
javascript
1const producto = { nombre: "Laptop", precio: 1000 }; - Acceso con punto y corchetes, y actualización de propiedades.
Ejemplo:
javascript
1producto.precio = 900; 2producto["stock"] = 5; - Métodos en objetos y uso de
thisen contexto. Ejemplo:javascript1const usuario = { 2 nombre: "Ana", 3 saludar() { 4 return `Hola, ${this.nombre}`; 5 }, 6};
Métodos de iteración
javascript1const numeros = [1, 2, 3, 4, 5]; 2const dobles = numeros.map((n) => n * 2); 3const mayores = numeros.filter((n) => n > 3); 4const suma = numeros.reduce((acc, n) => acc + n, 0);
- Diferencias entre
forEach,map,filter,findyreduce. Ejemplo:javascript1const items = [1, 2, 3]; 2items.forEach((n) => console.log(n)); 3const encontrado = items.find((n) => n === 2); - Cuándo usar cada uno para transformar, filtrar o resumir datos.
Ejemplo:
javascript
1const precios = [10, 20, 30]; 2const total = precios.reduce((acc, p) => acc + p, 0);
Ejemplos de Código
3 ejemplos
Métodos de arrays
Manipular arrays
1const frutas = ["manzana", "pera", "uvas"];
2frutas.push("naranja");
3console.log(frutas.join(", "));Métodos en objetos
1const usuario = {
2 nombre: "Ana",
3 saludar() {
4 return `Hola, ${this.nombre}`;
5 },
6};Map y transformación
1const productos = [
2 { nombre: "Laptop", precio: 1000 },
3 { nombre: "Mouse", precio: 20 },
4];
5const nombres = productos.map((p) => p.nombre);Recursos
4 recursos disponibles
¡Hora de Practicar!
Práctica guiada - Arrays y loops
Práctica
Crear una lista de tareas y recorrerla con for y forEach mostrando cada elemento en consola.
Desafío de Código
Ejercicios - Objetos y métodos
Ejercicios
(1) Crear 5 objetos (libros) con título, autor y año, (2) filtrar libros posteriores a 2010, (3) calcular promedio de años.
Documentación Oficial
Documentación de apoyo
Explicaciones claras y ejemplos de métodos de arrays.
Reto de Lectura
Reto de Lectura — Tres formas, un problema (y dos bugs)
El mismo problema resuelto con for, forEach y map. Una versión truena, otra miente. Decide cuál usarías y por qué.
Tres compañeros calcularon los precios con IVA de esta lista. Uno truena, otro devuelve algo inútil, y uno está bien. Encuentra los dos bugs SIN ejecutar, y responde cuándo usarías cada estructura.
javascript1const precios = [100, 250, 80, 430]; 2 3// Versión A 4function conIvaA(precios) { 5 const resultado = []; 6 for (let i = 0; i <= precios.length; i++) { 7 resultado.push(precios[i] * 1.16); 8 } 9 return resultado; 10} 11 12// Versión B 13function conIvaB(precios) { 14 const resultado = precios.forEach(function (p) { 15 return p * 1.16; 16 }); 17 return resultado; 18} 19 20// Versión C 21function conIvaC(precios) { 22 return precios.map((p) => p * 1.16); 23}
Preguntas:
- ¿Qué devuelve exactamente cada versión con la lista de arriba? (Sé preciso: valores, largo del array, o qué error.)
- ¿Por qué
forEachconreturnadentro no hace lo que su autor cree? - Regla práctica: ¿cuándo
forclásico, cuándoforEach, cuándomap? - La IA genera mucho la versión B. ¿Por qué crees que este error es tan común en código generado?
La solución no se publica. Se revisa en voz alta en el laboratorio, después de que trabajaste el reto. Trae tu diagnóstico escrito: eso es lo que se entrega.
Clase 8 de 33 en la ruta Desarrollo web