Javascript Arrays: A Cheat Sheet for Developer

Vladimir Oscanoa C — Sun, 29 Dec 2024 13:00:22 +0000

1. Crear un Array

Forma Literal:

let array = [1, 2, 3];

Con new Array():

let array = new Array(1, 2, 3);

2. Propiedades Básicas

length: Devuelve el número de elementos.

  let array = [1, 2, 3];
  console.log(array.length); // 3

3. Acceso y Modificación

Acceso:

  let array = [1, 2, 3];
  console.log(array[0]); // 1

Modificación:

  array[1] = 42;
  console.log(array); // [1, 42, 3]

4. Métodos para Agregar y Eliminar Elementos

push(): Agrega al final.

  array.push(4); // [1, 2, 3, 4]

pop(): Elimina del final.

  array.pop(); // [1, 2, 3]

unshift(): Agrega al inicio.

  array.unshift(0); // [0, 1, 2, 3]

shift(): Elimina del inicio.

  array.shift(); // [1, 2, 3]

splice(): Agrega, elimina o reemplaza elementos en un array.

  // Eliminar elementos
  let array = [1, 2, 3, 4];
  array.splice(1, 2); // Elimina 2 elementos desde el índice 1
  console.log(array); // [1, 4]

  // Agregar elementos
  array.splice(1, 0, 2, 3); // Agrega 2 y 3 en el índice 1
  console.log(array); // [1, 2, 3, 4]

  // Reemplazar elementos
  array.splice(1, 2, 5, 6); // Reemplaza 2 y 3 por 5 y 6
  console.log(array); // [1, 5, 6, 4]

5. Métodos para Buscar Elementos

indexOf(): Retorna el índice de un elemento.

  console.log(array.indexOf(2)); // 1

includes(): Verifica si un elemento existe.

  console.log(array.includes(2)); // true

find(): Encuentra el primer elemento que cumple una condición.

  console.log(array.find(x => x > 2)); // 3

filter(): Crea un nuevo array con los elementos que cumplen una condición.

  console.log(array.filter(x => x > 1)); // [2, 3]

6. Iterar sobre Arrays

Bucle for:

  for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
  }

Método forEach():

  array.forEach(element => console.log(element));

Método map():

  let newArray = array.map(x => x * 2);
  console.log(newArray); // [2, 4, 6]

7. Ordenar y Transformar

sort(): Ordena los elementos.

  array.sort((a, b) => a - b); // Ascendente

reverse(): Invierte el orden.

  array.reverse();

reduce(): Reduce el array a un solo valor.

  let sum = array.reduce((acc, val) => acc + val, 0);
  console.log(sum); // Suma total

8. Clonar y Combinar Arrays

Clonar con Spread Operator:

  let clonedArray = [...array];

Combinar Arrays:

  let combinedArray = [...array, ...anotherArray];

9. Arrays Multidimensionales

Crear un array de arrays:

  let matrix = [[1, 2], [3, 4]];
  console.log(matrix[0][1]); // 2

10. Métodos para Copiar y Extraer Elementos

slice(): Crea una copia superficial de una parte del array.

  let array = [1, 2, 3, 4, 5];

  // Copiar desde el índice 1 al 3 (sin incluir el 3)
  let subArray = array.slice(1, 3);
  console.log(subArray); // [2, 3]

  // Copiar todo el array
  let fullCopy = array.slice();
  console.log(fullCopy); // [1, 2, 3, 4, 5]

11. Buenas Prácticas

Evita Mutaciones No Deseadas: Usa métodos inmutables como map(), filter().
Valida Arrays Vacíos:

   if (array.length === 0) console.log("Array vacío");

Clonación Profunda:

   let deepClone = JSON.parse(JSON.stringify(array));

DEV Community: Vladimir Oscanoa C

Javascript Arrays: A Cheat Sheet for Developer

1. Crear un Array

2. Propiedades Básicas

3. Acceso y Modificación

4. Métodos para Agregar y Eliminar Elementos

5. Métodos para Buscar Elementos

6. Iterar sobre Arrays

7. Ordenar y Transformar

8. Clonar y Combinar Arrays

9. Arrays Multidimensionales

10. Métodos para Copiar y Extraer Elementos

11. Buenas Prácticas