Principiantejavascript
Arrays y Metodos de Array
Domina los arrays y sus metodos mas potentes: map, filter, reduce, find y mucho mas.
Que es un Array
Un Array es una estructura de datos que almacena una coleccion ordenada de elementos. Los elementos pueden ser de cualquier tipo. Los arrays en JavaScript son dinamicos, su tamano crece o se reduce automaticamente.
Crear y acceder a Arrays
La forma mas comun de crear un array es usando la notacion literal con corchetes
[]. Los elementos se acceden por su indice, empezando en 0.javascript
1const frutas = ["Manzana", "Banana", "Cereza"];
2console.log(frutas[0]); // "Manzana"
3console.log(frutas.length); // 3
4
5frutas.push("Durazno");
6frutas.pop();
7frutas.unshift("Fresa");
8console.log(frutas);map(): Transformar cada elemento
El metodo
map() crea un nuevo array con los resultados de aplicar una funcion a cada elemento.javascript
1const numeros = [1, 2, 3, 4, 5];
2const dobles = numeros.map(n => n * 2);
3console.log(dobles); // [2, 4, 6, 8, 10]
4
5const usuarios = [
6 { nombre: "Ana", edad: 25 },
7 { nombre: "Luis", edad: 30 }
8];
9const nombres = usuarios.map(u => u.nombre);
10console.log(nombres); // ["Ana", "Luis"]filter(): Filtrar elementos
El metodo
filter() crea un nuevo array con los elementos que pasen una condicion.javascript
1const edades = [12, 18, 25, 8, 42, 16];
2const mayores = edades.filter(edad => edad >= 18);
3console.log(mayores); // [18, 25, 42]
4
5const resultado = edades
6 .filter(edad => edad >= 18)
7 .map(edad => `Edad: ${edad} (aprobado)`);
8console.log(resultado);reduce(): Acumular valores
El metodo
reduce() ejecuta una funcion "reductora" sobre cada elemento, devolviendo un unico valor como resultado.javascript
1const numeros = [10, 20, 30, 40];
2const suma = numeros.reduce((acum, num) => acum + num, 0);
3console.log(suma); // 100
4
5const frutas = ["manzana", "banana", "manzana", "cereza", "banana", "manzana"];
6const conteo = frutas.reduce((acc, fruta) => {
7 acc[fruta] = (acc[fruta] || 0) + 1;
8 return acc;
9}, {});
10console.log(conteo);Prueba lo aprendido
Escribe código JavaScript y ejecútalo directamente en el navegador.
Editor de Códigojavascript
1const frutas = ["Manzana", "Banana", "Cereza"];
2console.log(frutas[0]); // "Manzana"
3console.log(frutas.length); // 3
4
5frutas.push("Durazno");
6frutas.pop();
7frutas.unshift("Fresa");
8console.log(frutas);