Métodos arrays en JavaScript: ¿Qué son y cuáles son? Con ejemplos!

Los métodos de arrays en JavaScript son herramientas esenciales para manipular y transformar datos de forma eficiente. En este artículo, descubrirás qué son, cuáles son y cómo usarlos según el tipo de operación que necesites realizar. Además, exploraremos ejemplos prácticos que te permitirán aprovechar al máximo el potencial de los arrays. ¡Sigue leyendo y lleva tu conocimiento al siguiente nivel!

Un ARRAY en JavaScript es una estructura de datos que permite almacenar múltiples valores en una sola variable. Estos valores se almacenan en un orden específico y son accesibles mediante índices numéricos que comienzan en 0.

1. ¿Que son los métodos arrays en JavaScript?

Los métodos de arrays en JavaScript son funciones predefinidas asociadas al objeto Array, diseñadas específicamente para realizar operaciones comunes en arrays.

Estas operaciones incluyen agregar, eliminar, buscar, modificar, ordenar y transformar elementos en un array.

1.1. Características clave de los métodos de arrays:

1. Optimización de tareas comunes:
   • Los métodos permiten realizar tareas como recorrer, filtrar o transformar arrays con una sintaxis clara y eficiente.
2. Devuelven resultados útiles:
   • Algunos métodos modifican el array original (mutables), mientras que otros devuelven un nuevo array o valor sin cambiar el original (inmutables).
3. Se invocan directamente desde el array:
   • Una de las características más útiles es la capacidad de llamar a métodos directamente sobre ellos. Su sintaxis es: array.metodo().

2. ¿Cuáles son los métodos arrays en JavaScript?

2.1. Métodos arrays para agregar y eliminar elementos

Son métodos básicos de manipulación para agregar y eliminar elementos de arrays:

1. 2.1.1. push()
2. 2.1.2. pop()
3. 2.1.3. unshift()
4. 2.1.4. shift()
5. 2.1.5. Resumen

2.1.1. push()

Este método agrega uno o más elementos al final de un array y devuelve la nueva longitud del array.

Ejemplo:

let frutas = ["manzana", "naranja"];
let nuevaLongitud = frutas.push("plátano", "uva");

console.log(frutas); // ["manzana", "naranja", "plátano", "uva"]
console.log(nuevaLongitud); // 4Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Empezamos con un array frutas que contiene dos elementos: ["manzana", "naranja"].
2. Usamos push() para agregar "plátano" y "uva" al final del array.
3. El array se modifica directamente, y ahora incluye estos dos nuevos elementos al final.
4. push() devuelve la nueva longitud del array, que es 4 en este caso.

2.1.2. pop()

Este método elimina el último elemento de un array y lo devuelve. Si el array está vacío, devuelve undefined.

Ejemplo:

let frutas = ["manzana", "naranja", "plátano"];
let elementoEliminado = frutas.pop();

console.log(frutas); // ["manzana", "naranja"]
console.log(elementoEliminado); // "plátano"Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. El array frutas contiene tres elementos: ["manzana", "naranja", "plátano"].
2. Usamos pop() para eliminar el último elemento, "plátano".
3. El array ahora tiene solo dos elementos, ["manzana", "naranja"].
4. El valor eliminado, "plátano", es devuelto por el método y almacenado en la variable elementoEliminado.

2.1.3. unshift()

Este método agrega uno o más elementos al inicio de un array y devuelve la nueva longitud del array.

Ejemplo:

let frutas = ["manzana", "naranja"];
let nuevaLongitud = frutas.unshift("fresa", "mango");

console.log(frutas); // ["fresa", "mango", "manzana", "naranja"]
console.log(nuevaLongitud); // 4Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. El array frutas inicialmente contiene dos elementos: ["manzana", "naranja"].
2. Usamos unshift() para agregar "fresa" y "mango" al inicio del array.
3. El array se modifica directamente, y ahora esos elementos están en las primeras posiciones.
4. unshift() devuelve la nueva longitud del array, que es 4.

2.1.4. shift()

Este método elimina el primer elemento de un array y lo devuelve. Si el array está vacío, devuelve undefined.

Ejemplo:

let frutas = ["manzana", "naranja", "plátano"];
let elementoEliminado = frutas.shift();

console.log(frutas); // ["naranja", "plátano"]
console.log(elementoEliminado); // "manzana"Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. El array frutas contiene tres elementos: ["manzana", "naranja", "plátano"].
2. Usamos shift() para eliminar el primer elemento, "manzana".
3. El array ahora tiene dos elementos restantes: ["naranja", "plátano"].
4. El valor eliminado, "manzana", es devuelto por el método y almacenado en la variable elementoEliminado.

2.1.5. Resumen

Método	Acción	Resultado
push()	Agrega al final y devuelve la nueva longitud	Modifica el array directamente.
pop()	Elimina el último elemento y lo devuelve	Modifica el array directamente.
unshift()	Agrega al inicio y devuelve la nueva longitud	Modifica el array directamente.
shift()	Elimina el primer elemento y lo devuelve	Modifica el array directamente.

2.2. Métodos arrays de iteración con bucles:

Los bucles en JavaScript son herramientas esenciales para recorrer y manipular arrays de manera eficiente. Cada tipo de bucle tiene características específicas que lo hacen adecuado para diferentes casos de uso, ya sea iterar sobre elementos, realizar operaciones en cada uno de ellos o comparar eficiencias.

• 2.2.1. Bucle for
• 2.2.2. Bucle for…of
• 2.2.3. Bucle forEach()
• 2.2.4. Comparativa
• 2.2.5. Cuándo usar cada uno:

2.2.1. Bucle for

El bucle for es una estructura básica de control en JavaScript que permite recorrer los elementos de un array utilizando un contador o índice.

Ejemplo:

let frutas = ["manzana", "naranja", "plátano"];

for (let i = 0; i < frutas.length; i++) {
  console.log(`Índice ${i}: ${frutas[i]}`);
}Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Declaramos el array frutas con tres elementos.
2. El bucle for consta de tres partes:
   • Inicialización: let i = 0 (empezamos en el índice 0).
   • Condición: i < frutas.length (mientras i sea menor que la longitud del array).
   • Incremento: i++ (aumentamos i en 1 después de cada iteración).
3. Dentro del bucle, accedemos a los elementos usando frutas[i] y mostramos el índice junto con el valor.
4. Salida:

Índice 0: manzana
Índice 1: naranja
Índice 2: plátano

VENTAJA: Permite un control total sobre el índice y la iteración, útil cuando necesitas acceder tanto al índice como al valor.

2.2.2. Bucle for...of

El bucle for...of es más simple y legible. Recorre directamente los valores de los elementos en el array, sin necesidad de usar índices.

Ejemplo:

let frutas = ["manzana", "naranja", "plátano"];

for (let fruta of frutas) {
  console.log(`Fruta: ${fruta}`);
}Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Declaramos el array frutas con tres elementos.
2. Usamos for...of para iterar directamente sobre los valores del array.
   • En cada iteración, la variable fruta toma el valor del siguiente elemento del array.
3. Mostramos cada fruta con console.log().
4. Salida:

Fruta: manzana
Fruta: naranja
Fruta: plátanoLenguaje del código: HTTP (http)

VENTAJA: Es más limpio y adecuado cuando solo necesitas los valores del array, sin preocuparte por los índices.

2.2.3. Bucle forEach()

El método forEach() es un método de los arrays que ejecuta una función de callback por cada elemento del array. Es ideal para operaciones donde no necesitas modificar el array original.

Ejemplo:

let frutas = ["manzana", "naranja", "plátano"];

frutas.forEach((fruta, indice) => {
  console.log(`Índice ${indice}: ${fruta}`);
});Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Declaramos el array frutas con tres elementos.
2. Usamos forEach() y le pasamos una función de callback con dos parámetros:
   • fruta: El valor del elemento actual.
   • indice: El índice del elemento actual.
3. Dentro del callback, mostramos el índice y el valor.
4. Salida:

Índice 0: manzana
Índice 1: naranja
Índice 2: plátano

VENTAJA: Es más declarativo y se usa para realizar operaciones en cada elemento. Es más legible que un bucle for tradicional.

2.2.4. Comparativa

Método	Uso principal	Ventajas	Limitaciones
for	Control total sobre el índice y bucle.	Muy flexible, permite acceso al índice.	Verboso y puede ser propenso a errores.
for...of	Iterar directamente sobre valores.	Sencillo y legible para recorrer valores.	No permite acceder directamente al índice.
forEach()	Ejecutar una función para cada elemento.	Más declarativo y limpio para operaciones repetitivas.	No se puede usar break ni continue.

2.2.5. Cuándo usar cada uno:

• Usa for cuando necesites control total sobre la iteración, como saltarte elementos o trabajar con índices.
• Usa for...of para recorrer los valores de un array de forma simple y legible.
• Usa forEach() para ejecutar una función sobre cada elemento del array, especialmente cuando trabajas con callbacks o quieres evitar el manejo manual de índices.

2.3. Métodos arrays de iteración avanzados:

Los métodos iterativos avanzados en JavaScript permiten recorrer arrays y transformarlos, filtrarlos o combinarlos de maneras poderosas y concisas.

• 2.3.1. map()
• 2.3.2. filter()
• 2.3.3. reduce()
• 2.3.4. reduceRight()
• 2.3.5. Comparativa
• 2.3.6. Cuándo usar cada uno:

2.3.1. map()

El método map() crea un nuevo array aplicando una transformación a cada elemento del array original, sin modificar el array original.

Ejemplo:

let numeros = [1, 2, 3, 4];
let cuadrados = numeros.map(num => num ** 2);

console.log(cuadrados); // [1, 4, 9, 16]
console.log(numeros);   // [1, 2, 3, 4] (sin cambios)Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Declaramos el array numeros con valores [1, 2, 3, 4].
2. Usamos map() para crear un nuevo array cuadrados aplicando la operación num ** 2 (elevar al cuadrado) a cada elemento.
3. map() no modifica el array original; crea un nuevo array con los valores transformados.
4. Salida:
   • cuadrados: [1, 4, 9, 16]
   • numeros: [1, 2, 3, 4] (sin cambios).

¿Cuándo usarlo?:
Cuando quieras transformar todos los elementos de un array y crear uno nuevo con los resultados.

2.3.2. filter()

El método filter() crea un nuevo array con los elementos que cumplen una condición específica.

Ejemplo:

let numeros = [1, 2, 3, 4, 5, 6];
let numerosPares = numeros.filter(num => num % 2 === 0);

console.log(numerosPares); // [2, 4, 6]
console.log(numeros);      // [1, 2, 3, 4, 5, 6] (sin cambios)Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Declaramos el array numeros con valores [1, 2, 3, 4, 5, 6].
2. Usamos filter() para crear un nuevo array numerosPares que contiene solo los elementos pares (num % 2 === 0).
3. filter() no modifica el array original; solo devuelve un nuevo array con los elementos que pasan la condición.
4. Salida:
   • numerosPares: [2, 4, 6]
   • numeros: [1, 2, 3, 4, 5, 6] (sin cambios).

¿Cuándo usarlo?:
Cuando necesites extraer un subconjunto de elementos que cumplen una condición.

2.3.3. reduce()

El método reduce() aplica una función a un acumulador y a cada elemento del array para reducirlo a un único valor. La iteración ocurre de izquierda a derecha.

Ejemplo:

let numeros = [1, 2, 3, 4];
let suma = numeros.reduce((acumulador, num) => acumulador + num, 0);

console.log(suma); // 10Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Declaramos el array numeros con valores [1, 2, 3, 4].
2. Usamos reduce() para sumar todos los números del array.
   • acumulador: Mantiene el resultado acumulado. Comienza en 0 (valor inicial).
   • num: Representa el elemento actual del array.
   • Proceso de iteración:
     • Paso 1: 0 + 1 = 1
     • Paso 2: 1 + 2 = 3
     • Paso 3: 3 + 3 = 6
     • Paso 4: 6 + 4 = 10
3. El resultado es 10, que se almacena en la variable suma.

Cuándo usarlo:
Cuando necesites combinar todos los elementos de un array en un solo valor, como la suma, promedio, concatenación, etc.

2.3.4. reduceRight()

El método reduceRight() funciona igual que reduce(), pero la iteración ocurre de derecha a izquierda.

Ejemplo:

let palabras = ["mundo", " ", "Hola"];
let frase = palabras.reduceRight((acumulador, palabra) => acumulador + palabra, "");

console.log(frase); // "Hola mundo"Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Declaramos el array palabras con valores ["mundo", " ", "Hola"].
2. Usamos reduceRight() para concatenar las palabras en orden inverso:
   • Proceso de iteración:
     • Paso 1: "" + "Hola" = "Hola"
     • Paso 2: "Hola" + " " = "Hola "
     • Paso 3: "Hola " + "mundo" = "Hola mundo"
3. El resultado es "Hola mundo", almacenado en la variable frase.

Cuándo usarlo:
Cuando necesites combinar elementos de un array en orden inverso, como en el caso de construir frases o realizar cálculos acumulativos desde el final.

2.3.5. Comparativa

Método	Uso principal	Salida
map()	Transformar elementos y crear un nuevo array.	Nuevo array transformado.
filter()	Seleccionar elementos que cumplen una condición.	Nuevo array filtrado.
reduce()	Reducir todos los elementos a un valor único (de izquierda a derecha).	Valor único.
reduceRight()	Igual que reduce(), pero de derecha a izquierda.	Valor único.

2.3.6. Cuándo usar cada uno:

1. map(): Para transformar datos (e.g., convertir precios de dólares a euros).
2. filter(): Para extraer elementos que cumplen una condición (e.g., filtrar usuarios activos).
3. reduce(): Para sumar, multiplicar o combinar datos (e.g., calcular el total de ventas).
4. reduceRight(): Similar a reduce() pero útil cuando el orden importa, como construir cadenas inversas o combinaciones jerárquicas.

2.4. Métodos arrays de acceso y búsqueda:

Los métodos de acceso y búsqueda en arrays permiten localizar elementos de manera eficiente según su valor o posición. Cada uno tiene un propósito específico, desde encontrar el primer o último índice de un valor, hasta buscar elementos que cumplan una condición lógica.

• 2.4.1. indexOf()
• 2.4.2. lastIndexOf()
• 2.4.3. find()
• 2.4.4. findIndex()
• 2.4.5. includes()
• 2.4.6. Comparativa

2.4.1. indexOf()

Devuelve el índice de la primera aparición de un elemento en el array. Si el elemento no se encuentra, devuelve -1.

Ejemplo:

let frutas = ["manzana", "banana", "cereza", "manzana"];
let indiceManzana = frutas.indexOf("manzana");
let indiceUva = frutas.indexOf("uva");

console.log(indiceManzana); // 0
console.log(indiceUva);     // -1Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Declaramos un array frutas con valores ["manzana", "banana", "cereza", "manzana"].
2. Usamos indexOf("manzana") para encontrar la primera aparición de "manzana", que está en el índice 0.
3. Usamos indexOf("uva") para buscar "uva", que no está en el array, por lo que devuelve -1.

Cuándo usarlo:
Cuando necesites encontrar el índice de la primera aparición de un elemento.

2.4.2. lastIndexOf()

Devuelve el índice de la última aparición de un elemento en el array. Si el elemento no se encuentra, devuelve -1.

Ejemplo:

let frutas = ["manzana", "banana", "cereza", "manzana"];
let ultimoIndiceManzana = frutas.lastIndexOf("manzana");

console.log(ultimoIndiceManzana); // 3Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Declaramos un array frutas con valores ["manzana", "banana", "cereza", "manzana"].
2. Usamos lastIndexOf("manzana") para encontrar la última aparición de "manzana", que está en el índice 3.

Cuándo usarlo:
Cuando necesites encontrar el índice de la última aparición de un elemento.

2.4.3. find()

Devuelve el primer elemento que cumple con una condición especificada en una función de prueba. Si no encuentra ningún elemento, devuelve undefined.

Ejemplo:

let numeros = [5, 12, 8, 130, 44];
let mayorQue10 = numeros.find(num => num > 10);

console.log(mayorQue10); // 12Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Declaramos un array numeros con valores [5, 12, 8, 130, 44].
2. Usamos find() con la condición num > 10 para encontrar el primer número mayor a 10.
3. find() devuelve 12, que es el primer número que cumple con la condición.

Cuándo usarlo:
Cuando necesites el valor del primer elemento que cumpla con una condición.

2.4.4. findIndex()

Devuelve el índice del primer elemento que cumple con una condición especificada en una función de prueba. Si no encuentra ningún elemento, devuelve -1.

Ejemplo:

let numeros = [5, 12, 8, 130, 44];
let indiceMayorQue10 = numeros.findIndex(num => num > 10);

console.log(indiceMayorQue10); // 1Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Declaramos un array numeros con valores [5, 12, 8, 130, 44].
2. Usamos findIndex() con la condición num > 10 para encontrar el índice del primer número mayor a 10.
3. findIndex() devuelve 1, el índice del número 12.

Cuándo usarlo:
Cuando necesites el índice del primer elemento que cumpla con una condición.

2.4.5. includes()

Devuelve true si el array contiene un elemento específico y false en caso contrario.

Ejemplo:

let frutas = ["manzana", "banana", "cereza"];
let tieneBanana = frutas.includes("banana");
let tieneUva = frutas.includes("uva");

console.log(tieneBanana); // true
console.log(tieneUva);    // falseLenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Declaramos un array frutas con valores ["manzana", "banana", "cereza"].
2. Usamos includes("banana") para verificar si "banana" está en el array. Devuelve true.
3. Usamos includes("uva") para verificar si "uva" está en el array. Devuelve false.

Cuándo usarlo:
Cuando necesites verificar rápidamente si un elemento está presente en un array.

2.4.6. Comparativa

Método	Devuelve	Ejemplo de Uso
indexOf()	Índice de la primera aparición.	Encontrar el primer índice de un valor.
lastIndexOf()	Índice de la última aparición.	Encontrar el último índice de un valor.
find()	Primer elemento que cumple una condición.	Buscar el primer elemento que sea válido.
findIndex()	Índice del primer elemento que cumple.	Buscar el índice del primer válido.
includes()	true o false según si el elemento existe.	Verificar si un elemento está presente.

2.5. Métodos arrays para reordenar o modificar elementos.

Manipular el orden y la estructura de los elementos en un array es una tarea común en JavaScript. Los métodos de esta categoría permiten reorganizar, extraer o modificar partes de un array de manera flexible.

• 2.5.1. sort()
• 2.5.2. reverse()
• 2.5.3. splice()
• 2.5.4. slice()
• 2.5.5. Comparativa

2.5.1. sort()

Ordena los elementos de un array en su lugar (modifica el array original) en orden ascendente según la conversión a cadena UTF-16 por defecto. Se puede personalizar el criterio de ordenamiento usando una función de comparación.

Ejemplo 1: Ordenamiento básico (alfabético por defecto)

let frutas = ["manzana", "banana", "cereza"];
frutas.sort();

console.log(frutas); // ["banana", "cereza", "manzana"]Lenguaje del código: JavaScript (javascript)

Ejemplo 2: Ordenamiento numérico con función de comparación

let numeros = [40, 1, 5, 200];
numeros.sort((a, b) => a - b); // Orden ascendente

console.log(numeros); // [1, 5, 40, 200]Lenguaje del código: JavaScript (javascript)

Explicación de los ejemplos:

1. En el primer caso, sort() ordena las cadenas alfabéticamente por defecto.
2. En el segundo caso, usamos una función de comparación (a, b) => a - b para ordenar los números correctamente. Sin esta función, sort() ordenaría los números como si fueran cadenas.

Cuándo usarlo:
Cuando necesites ordenar un array, ya sea alfabéticamente o bajo un criterio personalizado.

2.5.2. reverse()

Invierte el orden de los elementos del array en su lugar (modifica el array original).

Ejemplo:

let numeros = [1, 2, 3, 4, 5];
numeros.reverse();

console.log(numeros); // [5, 4, 3, 2, 1]Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Declaramos un array numeros con los valores [1, 2, 3, 4, 5].
2. Aplicamos reverse(), que invierte el orden de los elementos.
3. El array resultante es [5, 4, 3, 2, 1].

Cuándo usarlo:
Cuando necesites invertir el orden de los elementos en un array.

2.5.3. splice()

Permite agregar, eliminar o reemplazar elementos en un array en una posición específica. Modifica el array original.

Sintaxis:

array.splice(inicio, cantidadEliminar, elemento1, elemento2, ...)

Explicación sintaxis:

• inicio:
  • Índice donde comenzará la modificación del array.
  • Es obligatorio.
  • Si es negativo, cuenta desde el final del array.
• cantidadEliminar:
  • Número de elementos a eliminar desde la posición inicio.
  • Opcional.
  • Si se omite, se eliminarán todos los elementos desde inicio hasta el final.
  • Si es 0, no elimina elementos.
• elemento1, elemento2, ...:
  • Si no se proporcionan, splice() solo eliminará elementos.
  • Elementos opcionales que serán agregados en la posición inicio.

Ejemplo 1: Eliminar elementos

let numeros = [1, 2, 3, 4, 5];
let eliminados = numeros.splice(2, 2);

console.log(numeros);    // [1, 2, 5]
console.log(eliminados); // [3, 4]Lenguaje del código: JavaScript (javascript)

Ejemplo 2: Agregar elementos

let numeros = [1, 2, 5];
numeros.splice(2, 0, 3, 4);

console.log(numeros); // [1, 2, 3, 4, 5]Lenguaje del código: JavaScript (javascript)

Ejemplo 3: Reemplazar elementos

let numeros = [1, 2, 3, 4, 5];
numeros.splice(2, 2, 6, 7);

console.log(numeros); // [1, 2, 6, 7, 5]Lenguaje del código: JavaScript (javascript)

Explicación de los ejemplos:

1. En el primer caso, eliminamos 2 elementos desde el índice 2 ([3, 4]).
2. En el segundo caso, agregamos 3 y 4 en el índice 2 sin eliminar elementos.
3. En el tercer caso, reemplazamos 2 elementos (3, 4) por 6 y 7.

Cuándo usarlo:
Cuando necesites agregar, eliminar o reemplazar elementos en un array de manera flexible.

2.5.4. slice()

Devuelve una nueva copia de una porción del array desde el índice inicial (incluido) hasta el índice final (excluido). No modifica el array original.

Sintaxis:

array.slice(inicio, fin)

Explicación sintaxis:

• inicio:
  • Índice desde donde comienza la extracción del nuevo array.
  • Es opcional.
  • Si se omite, comienza desde el índice 0.
  • Si es negativo, cuenta desde el final del array.
• fin:
  • Índice donde termina la extracción (pero no incluye este índice).
  • Es opcional.
  • Si se omite, extrae hasta el final del array.

Ejemplo:

let numeros = [1, 2, 3, 4, 5];
let subArray = numeros.slice(1, 4);

console.log(subArray);   // [2, 3, 4]
console.log(numeros);    // [1, 2, 3, 4, 5] (sin cambios)Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Declaramos un array numeros con valores [1, 2, 3, 4, 5].
2. Aplicamos slice(1, 4), que selecciona los elementos desde el índice 1 (2) hasta el índice 4 (5, excluido).
3. El resultado es un nuevo array [2, 3, 4].

Cuándo usarlo:
Cuando necesites extraer una porción del array sin modificar el original.

2.5.5. Comparativa

Método	Acción Realizada	Modifica el Array Original	Ejemplo de Uso
sort()	Ordena los elementos del array.	Sí	Ordenar alfabéticamente o numéricamente.
reverse()	Invierte el orden de los elementos.	Sí	Invertir el array para reordenarlo.
splice()	Agrega, elimina o reemplaza elementos.	Sí	Modificar elementos en posiciones específicas.
slice()	Crea un nuevo array con una porción.	No	Extraer una parte del array.

2.6. Métodos arrays de concatenación y conversión de elementos.

Los métodos de concatenación y conversión permiten combinar arrays y transformar sus elementos en representaciones diferentes, como cadenas de texto. Son herramientas esenciales para trabajar con datos de manera más versátil y para facilitar la interacción entre arrays y otros formatos.

• 2.6.1. concat()
• 2.6.2. join()
• 2.6.3. toString()
• 2.6.4. Comparativa entre métodos

2.6.1. concat()

Crea un nuevo array uniendo dos o más arrays o valores. No modifica los arrays originales.

Ejemplo:

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let combinado = array1.concat(array2, 7, 8);

console.log(combinado); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(array1);    // [1, 2, 3] (sin cambios)
console.log(array2);    // [4, 5, 6] (sin cambios)Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Declaramos dos arrays, array1 y array2.
2. Usamos concat() para unirlos, añadiendo además los valores 7 y 8.
3. El método devuelve un nuevo array [1, 2, 3, 4, 5, 6, 7, 8] sin modificar los originales.

Cuándo usarlo:
Cuando necesites combinar arrays o agregar elementos adicionales a un nuevo array.

2.6.2. join()

Devuelve una cadena creada al unir todos los elementos de un array, usando el separador especificado. Si no se proporciona un separador, el predeterminado es ,.

Ejemplo 1: Usando el separador predeterminado

let frutas = ["manzana", "banana", "cereza"];
let resultado = frutas.join();

console.log(resultado); // "manzana,banana,cereza"Lenguaje del código: JavaScript (javascript)

Ejemplo 2: Usando un separador personalizado

let frutas = ["manzana", "banana", "cereza"];
let resultado = frutas.join(" - ");

console.log(resultado); // "manzana - banana - cereza"Lenguaje del código: JavaScript (javascript)

Explicación de los ejemplos:

1. En el primer caso, join() convierte el array en una cadena separada por comas.
2. En el segundo caso, usamos " - " como separador personalizado.

Cuándo usarlo:
Cuando necesites convertir un array en una cadena para mostrarlo, por ejemplo, en un texto o una URL.

2.6.3. toString()

Convierte un array en una cadena donde los elementos están separados por comas. Es similar a join() sin especificar un separador.

Ejemplo:

let numeros = [10, 20, 30, 40];
let cadena = numeros.toString();

console.log(cadena); // "10,20,30,40"Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Declaramos un array numeros con valores [10, 20, 30, 40].
2. Usamos toString() para convertir el array en la cadena "10,20,30,40".
3. No se puede personalizar el separador; siempre será una coma.

Diferencia entre join() y toString():

• join() permite especificar un separador personalizado.
• toString() utiliza una coma por defecto y no se puede cambiar.

2.6.4. Comparativa entre métodos

Método	Acción Realizada	Devuelve	Modifica el Array Original	Ejemplo de Uso
concat()	Combina dos o más arrays/valores.	Nuevo array	No	Combinar arrays o agregar elementos.
join()	Une elementos en una cadena con un separador.	Cadena	No	Crear cadenas personalizadas.
toString()	Convierte el array en una cadena.	Cadena	No	Mostrar un array como texto.

2.7. Métodos arrays para aplanar, rellenar y copiar elementos.

Estos métodos permiten modificar la estructura y los valores de los arrays, haciendo más fácil trabajar con datos complejos o manipular el contenido de forma eficiente. Desde aplanar arrays anidados hasta rellenar o copiar partes de un array, estas herramientas son fundamentales en el manejo avanzado de datos.

• 2.7.1. flat()
• 2.7.2. flatMap()
• 2.7.3. fill()
• 2.7.4. copyWithin()
• 2.7.5. Comparativa entre Métodos

2.7.1. flat()

Este método devuelve un nuevo array aplanado, reduciendo su nivel de anidación hasta el nivel especificado. Por defecto, aplana un nivel.

Ejemplo 1: Aplanar un nivel (por defecto)

let arrayAnidado = [1, [2, 3], [4, [5, 6]]];
let aplanado = arrayAnidado.flat();

console.log(aplanado); // [1, 2, 3, 4, [5, 6]]Lenguaje del código: JavaScript (javascript)

Ejemplo 2: Aplanar múltiples niveles

let arrayAnidado = [1, [2, 3], [4, [5, 6]]];
let completamenteAplanado = arrayAnidado.flat(2);

console.log(completamenteAplanado); // [1, 2, 3, 4, 5, 6]Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. En el primer caso, flat() aplana solo un nivel de anidación.
2. En el segundo caso, pasamos 2 como argumento para aplanar hasta dos niveles.

Cuándo usarlo:
Cuando trabajas con arrays multidimensionales y necesitas reducir su complejidad.

2.7.2. flatMap()

Combina el uso de map() y flat() en un solo paso. Aplica una transformación a cada elemento y luego aplana el resultado un nivel.

Ejemplo:

let numeros = [1, 2, 3];
let resultado = numeros.flatMap(num => [num, num * 2]);

console.log(resultado); // [1, 2, 2, 4, 3, 6]Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Para cada número en el array, creamos un subarray con el número original y su doble.
2. flatMap() aplica el mapeo y aplana el resultado en un solo paso.

Cuándo usarlo:
Cuando necesitas transformar elementos y aplanar resultados, optimizando operaciones combinadas.

2.7.3. fill()

Rellena el array con un valor especificado, desde un índice inicial hasta un índice final (sin incluir este último).

Ejemplo:

let array = [1, 2, 3, 4, 5];
array.fill(0, 1, 4);

console.log(array); // [1, 0, 0, 0, 5]Lenguaje del código: PHP (php)

Explicación del ejemplo:

1. Reemplazamos los elementos del índice 1 al 4 (sin incluir 4) con 0.
2. Los índices fuera del rango especificado permanecen sin cambios.

Cuándo usarlo:
Cuando necesitas inicializar o sobreescribir partes de un array con un valor específico.

2.7.4. copyWithin()

Copia una porción del array dentro del mismo array, sobrescribiendo elementos existentes. Especificas el índice de destino, el índice de inicio, y opcionalmente el índice final.

Ejemplo:

let array = [1, 2, 3, 4, 5];
array.copyWithin(0, 3, 5);

console.log(array); // [4, 5, 3, 4, 5]Lenguaje del código: PHP (php)

Explicación del ejemplo:

1. Copiamos los elementos del rango 3 a 5 ([4, 5]) al inicio del array (índice 0).
2. El array se sobrescribe directamente, y su longitud no cambia.

Cuándo usarlo:
Cuando necesitas reorganizar un array, sobrescribiendo parte de sus elementos con otros elementos del mismo array.

2.7.5. Comparativa entre Métodos

Método	Acción Realizada	Modifica el Array Original	Devuelve	Ejemplo de Uso
flat()	Aplana un array anidado.	No	Nuevo array	Reducir niveles de anidación.
flatMap()	Combina map y flat (un nivel).	No	Nuevo array	Transformar y aplanar resultados.
fill()	Rellena elementos con un valor.	Sí	Mismo array	Inicializar arrays o sobrescribir datos.
copyWithin()	Copia y sobrescribe dentro del array.	Sí	Mismo array	Reorganizar partes del array.

3. Preguntas frecuentes y resumen sobre los métodos de arrays en JS.