Arrays
Introducción a los arreglos en JavaScript: qué son, cómo se declaran y cómo manipular sus elementos.
Temario, ejercicios y tareas
Aquí encontrarás los temas de clase, ejercicios y tareas. Por ahora ya está disponible el primer tema: Arrays.
Haz clic en una tarjeta para ver el contenido
Introducción a los arreglos en JavaScript: qué son, cómo se declaran y cómo manipular sus elementos.
Objetos, propiedades, métodos, clases y herencia, explicado para principiantes con ejemplos de vida real y videojuegos.
Un arreglo (array) en JavaScript es una estructura de datos (un objeto nativo del lenguaje) diseñada para guardar una colección ordenada de valores en una sola variable, donde cada valor se identifica por una posición numérica llamada índice (que empieza en 0).
Además, los arreglos en JavaScript son dinámicos: pueden crecer o reducirse durante
la ejecución del programa, y traen propiedades y métodos integrados
(como length, push(), pop(), etc.) para administrar y manipular sus elementos.
Cuando ves algo así:
a.push(5)
a.pop()
a.length
a.slice(1,3)
No son objetos por sí solos. Son miembros que pertenecen al objeto a
(que es un Array).
length).push(), pop()).
Regla para no fallar:
Si tiene () → es un método.
Si no tiene () → es una propiedad.
Qué es: Es la forma de crear un array y guardar varios valores en una sola variable.
Cómo se usa: Se puede crear vacío o con elementos iniciales.
let a = [];
let nums = [10, 20, 30];
let nombres = ["Ana", "Luis"];
lengthQué es: length es una propiedad nativa de los arreglos.
Para qué sirve: Para saber cuántos elementos tiene el arreglo.
Cómo se usa: Se escribe sin paréntesis: a.length.
let a = [10, 20, 30];
console.log(a.length); // 3
console.log(a[a.length - 1]); // 30
push()Qué es: Es un método nativo del Array.
Para qué sirve: Para agregar uno o más elementos al final.
Cómo se usa: a.push(elemento).
let a = [1, 2];
a.push(3);
console.log(a); // [1,2,3]
pop()Qué es: Es un método nativo del Array.
Para qué sirve: Para eliminar el último elemento.
Cómo se usa: a.pop().
let a = [1,2,3];
let x = a.pop();
console.log(x); // 3
console.log(a); // [1,2]
unshift()Qué es: Es un método nativo del Array.
Para qué sirve: Para agregar elementos al inicio.
Cómo se usa: a.unshift(elemento).
let a = [1,2];
a.unshift(0);
console.log(a); // [0,1,2]
shift()Qué es: Es un método nativo del Array.
Para qué sirve: Para eliminar el primer elemento.
Cómo se usa: a.shift().
let a = [1,2,3];
let x = a.shift();
console.log(x); // 1
console.log(a); // [2,3]
a[i]Qué es: Es la notación de corchetes para acceder a una posición del arreglo.
Para qué sirve: Para leer o modificar un valor específico.
Cómo se usa: Leer: a[0]. Escribir: a[0] = "nuevo".
let a = ["Ana", "Luis"];
console.log(a[0]); // "Ana"
a[1] = "Davo";
console.log(a); // ["Ana","Davo"]
slice()Qué es: Es un método nativo del Array.
Para qué sirve: Para copiar una parte del arreglo y devolver un nuevo arreglo.
Cómo se usa: a.slice(inicio, fin).
let a = [10,20,30,40];
let b = a.slice(1,3);
console.log(b); // [20,30]
console.log(a); // [10,20,30,40]
splice()Qué es: Es un método nativo del Array.
Para qué sirve: Para editar el arreglo original: quitar, insertar o reemplazar elementos.
Cómo se usa: a.splice(inicio, cantidadAEliminar, ...elementosAInsertar).
let a = [10,20,30,40];
a.splice(2,1,99);
console.log(a); // [10,20,99,40]
includes()Qué es: Es un método nativo del Array.
Para qué sirve: Para verificar si un valor existe dentro del arreglo.
Cómo se usa: a.includes(valor).
let a = ["a","b","c"];
console.log(a.includes("b")); // true
indexOf()Qué es: Es un método nativo del Array.
Para qué sirve: Para obtener el índice donde aparece un valor.
Cómo se usa: a.indexOf(valor).
let a = ["a","b","c"];
console.log(a.indexOf("c")); // 2
console.log(a.indexOf("x")); // -1
find() y findIndex()Qué son: Son métodos nativos del Array que usan una función de condición.
Para qué sirven: find() devuelve el primer elemento que cumple; findIndex() devuelve su posición.
Cómo se usan: a.find(condicion) y a.findIndex(condicion).
let a = [3, 8, 12, 5];
console.log(a.find(n => n > 10)); // 12
console.log(a.findIndex(n => n > 10)); // 2
forQué es: Una estructura de control del lenguaje.
Para qué sirve: Para recorrer el arreglo usando índices.
let a = [10,20,30];
for (let i = 0; i < a.length; i++) {
console.log(a[i]);
}
for...ofQué es: Una estructura de control para iterables.
Para qué sirve: Para recorrer directamente los valores.
let a = [10,20,30];
for (const v of a) {
console.log(v);
}
forEach()Qué es: Un método nativo del Array.
Para qué sirve: Para ejecutar una función por cada elemento.
let a = [10,20,30];
a.forEach(v => console.log(v));
map()Qué es: Un método nativo del Array.
Para qué sirve: Para transformar cada elemento y crear un nuevo array.
let a = [1,2,3];
console.log(a.map(n => n * 2)); // [2,4,6]
filter()Qué es: Un método nativo del Array.
Para qué sirve: Para crear un nuevo array solo con los elementos que cumplen una condición.
let a = [1,2,3,4,5,6];
console.log(a.filter(n => n % 2 === 0)); // [2,4,6]
reduce()Qué es: Un método nativo del Array.
Para qué sirve: Para combinar todos los elementos en un solo valor.
let a = [10,20,30];
console.log(a.reduce((acc, n) => acc + n, 0)); // 60
sort()Qué es: Un método nativo del Array.
Para qué sirve: Para ordenar el arreglo.
Importante: Modifica el arreglo original.
let a = [10,2,30];
a.sort((x, y) => x - y);
console.log(a); // [2,10,30]
reverse()Qué es: Un método nativo del Array.
Para qué sirve: Para invertir el orden del arreglo.
Importante: Modifica el original.
let a = [1,2,3];
a.reverse();
console.log(a); // [3,2,1]
join()Qué es: Un método nativo del Array.
Para qué sirve: Para convertir el arreglo en texto usando un separador.
let a = ["A","B","C"];
console.log(a.join("-")); // "A-B-C"
concat()Qué es: Un método nativo del Array.
Para qué sirve: Para unir arreglos y crear uno nuevo.
Importante: No modifica el original.
let a = [1,2], b = [3,4];
console.log(a.concat(b)); // [1,2,3,4]
Tip para explicar rápido:
length es una propiedad.
Todo lo que tiene () es un método.