ETZADEV
Métodos de manipulación de arrays
JavascriptJohan García Trejo21 dic 2024Comentarios (0)
Compartir

Métodos de manipulación de arrays

Estos son métodos permiten modificar el contenido del array, ya sea agregando, eliminando o reordenando elementos, y se dividen en:

Concatenación y copia

Array.prototype.concat()

El método concat() se utiliza para unir dos o más arrays. Este método no cambia los arrays existentes, sino que devuelve un nuevo array.

Sintaxis

snippet.js
1var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

Parámetros que recibe

  • valueN: Arrays o valores a concatenar al array.

Valor que retorna

Un nuevo array con los elementos concatenados.

Ejemplo

snippet.js
1let array1 = ["a", "b", "c"];
2let array2 = ["d", "e", "f"];
3let array3 = array1.concat(array2);
4console.log(array3); // Salida: ['a', 'b', 'c', 'd', 'e', 'f']

En este ejemplo:

  • El array1 es
    snippet.txt
    1['a', 'b', 'c']
    .
  • El array2 es
    snippet.txt
    1['d', 'e', 'f']
    .
  • array1.concat(array2) devuelve un nuevo array con los elementos de ambos arrays combinados.

Notas Adicionales

  • El método concat() es útil para crear un nuevo array sin modificar los arrays originales.

Array.prototype.copyWithin()

El método copyWithin() copia una parte del array a otra ubicación en el mismo array y devuelve el array, sin modificar su longitud.

Sintaxis

arr.copyWithin(target, start[, end])

Parámetros que recibe

  • target: Índice en el que se copiará la secuencia de elementos.
  • start: Índice donde empieza la secuencia a copiar.
  • end: Índice donde termina la secuencia a copiar (opcional).

Valor que retorna

El array modificado.

Ejemplo

snippet.js
1let array = ["a", "b", "c", "d", "e"];
2console.log(array.copyWithin(0, 3, 4)); // Salida: ['d', 'b', 'c', 'd', 'e']

En este ejemplo:

  • El array es
    snippet.txt
    1['a', 'b', 'c', 'd', 'e']
    .
  • array.copyWithin(0, 3, 4) copia el elemento en la posición 3 (
    snippet.txt
    1'd'
    ) a la posición 0.

Notas Adicionales

  • El método copyWithin() es útil para mover elementos dentro del mismo array sin cambiar su longitud.

Array.prototype.fill()

El método fill() cambia todos los elementos en un array por un valor estático desde el índice de inicio hasta el de final.

Sintaxis

arr.fill(value[, start[, end]])

Parámetros que recibe

  • value: Valor a llenar el array.
  • start: Índice de inicio (opcional).
  • end: Índice de fin (opcional).

Valor que retorna

El array modificado.

Ejemplo

snippet.js
1let array = [1, 2, 3, 4];
2console.log(array.fill(0, 2, 4)); // Salida: [1, 2, 0, 0]

En este ejemplo:

  • El array es [1, 2, 3, 4].
  • array.fill(0, 2, 4) cambia los elementos desde la posición 2 a la 4 por 0.

Notas Adicionales

  • El método fill() es útil para inicializar o resetear todos los elementos de un array a un valor específico.

Adición y eliminación de elementos

Array.prototype.push()

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

Sintaxis

arr.push(element1, ..., elementN);

Parámetros que recibe

  • snippet.txt
    1element1, ..., elementN
    : Los elementos a agregar al final del array.

Valor que retorna

La nueva longitud del array.

Ejemplo

snippet.js
1let array = [1, 2, 3];
2console.log(array.push(4, 5)); // Salida: 5
3console.log(array); // Salida: [1, 2, 3, 4, 5]

En este ejemplo:

  • El array original es [1, 2, 3].
  • array.push(4, 5) agrega 4 y 5 al final del array y devuelve la nueva longitud, que es 5.
  • El array modificado es [1, 2, 3, 4, 5].

Notas Adicionales

  • El método push() es útil para agregar múltiples elementos al final de un array de una sola vez.

Array.prototype.pop()

El método pop() elimina el último elemento de un array y lo devuelve. Este método cambia la longitud del array.

Sintaxis

arr.pop();

Parámetros que recibe

No recibe parámetros.

Valor que retorna

El último elemento del array.

Ejemplo

snippet.js
1let array = [1, 2, 3, 4, 5];
2console.log(array.pop()); // Salida: 5
3console.log(array); // Salida: [1, 2, 3, 4]

En este ejemplo:

  • El array original es [1, 2, 3, 4, 5].
  • array.pop() elimina el último elemento del array y lo devuelve, que es 5.
  • El array modificado es [1, 2, 3, 4].

Notas Adicionales

  • El método pop() es útil para eliminar y obtener el último elemento de un array de manera eficiente.

Array.prototype.shift()

El método shift() elimina el primer elemento de un array y lo devuelve. Este método cambia la longitud del array.

Sintaxis

arr.shift();

Parámetros que recibe

No recibe parámetros.

Valor que retorna

El primer elemento del array.

Ejemplo

snippet.js
1let array = [1, 2, 3, 4, 5];
2console.log(array.shift()); // Salida: 1
3console.log(array); // Salida: [2, 3, 4, 5]

En este ejemplo:

  • El array original es [1, 2, 3, 4, 5].
  • array.shift() elimina el primer elemento del array y lo devuelve, que es 1.
  • El array modificado es [2, 3, 4, 5].

Notas Adicionales

  • El método shift() es útil para eliminar y obtener el primer elemento de un array de manera eficiente.

Array.prototype.unshift()

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

Sintaxis

arr.unshift(element1, ..., elementN);

Parámetros que recibe

  • snippet.txt
    1element1, ..., elementN
    : Los elementos a agregar al inicio del array.

Valor que retorna

La nueva longitud del array.

Ejemplo

snippet.js
1let array = [2, 3, 4];
2console.log(array.unshift(0, 1)); // Salida: 5
3console.log(array); // Salida: [0, 1, 2, 3, 4]

En este ejemplo:

  • El array original es [2, 3, 4].
  • array.unshift(0, 1) agrega 0 y 1 al inicio del array y devuelve la nueva longitud, que es 5.
  • El array modificado es [0, 1, 2, 3, 4].

Notas Adicionales

  • El método unshift() es útil para agregar múltiples elementos al inicio de un array de una sola vez.

Array.prototype.splice()

El método splice() cambia el contenido de un array eliminando elementos existentes y/o agregando nuevos elementos.

Sintaxis

snippet.js
1arr.splice(start, deleteCount[, item1[, item2[, ...]]]);

Parámetros que recibe

  • start: Índice de inicio.
  • deleteCount: Número de elementos a eliminar.
  • snippet.txt
    1item1, item2, ...
    : Elementos a agregar (opcional).

Valor que retorna

Un array que contiene los elementos eliminados.

Ejemplo

snippet.js
1let array = [1, 2, 3, 4, 5];
2console.log(array.splice(2, 1, "a", "b")); // Salida: [3]
3console.log(array); // Salida: [1, 2, 'a', 'b', 4, 5]

En este ejemplo:

  • El array original es [1, 2, 3, 4, 5].
  • array.splice(2, 1, 'a', 'b') elimina el tercer elemento (3) y agrega
    snippet.txt
    1'a'
    y
    snippet.txt
    1'b'
    en su lugar.
  • El array modificado es
    snippet.txt
    1[1, 2, 'a', 'b', 4, 5]
    .

Notas Adicionales

  • El método splice() es muy versátil para agregar y eliminar elementos en un array.

Array.prototype.slice()

El método slice() devuelve una copia superficial de una porción de un array en un nuevo array. El array original no se modifica.

Sintaxis

arr.slice([begin[, end]]);

Parámetros que recibe

  • begin: Índice donde empieza la extracción.
  • end: Índice donde termina la extracción (opcional).

Valor que retorna

Un nuevo array con los elementos extraídos.

Ejemplo

snippet.js
1let array = [1, 2, 3, 4, 5];
2console.log(array.slice(1, 3)); // Salida: [2, 3]

En este ejemplo:

  • El array original es [1, 2, 3, 4, 5].
  • array.slice(1, 3) extrae los elementos desde el índice 1 hasta el índice 3 (sin incluirlo), que son [2, 3].

Notas Adicionales

  • El método slice() es útil para copiar y extraer una porción de un array sin modificar el array original.

Reordenamiento de elementos

Array.prototype.reverse()

El método reverse() invierte el orden de los elementos de un array, modificando el array original y devolviendo el array invertido.

Sintaxis

arr.reverse();

Parámetros que recibe

No recibe parámetros.

Valor que retorna

El array invertido.

Ejemplo

snippet.js
1let array = [1, 2, 3, 4, 5];
2console.log(array.reverse()); // Salida: [5, 4, 3, 2, 1]

En este ejemplo:

  • El array original es [1, 2, 3, 4, 5].
  • array.reverse() invierte el orden de los elementos, devolviendo [5, 4, 3, 2, 1].

Notas Adicionales

  • El método reverse() modifica el array original y es útil para cambiar el orden de los elementos de manera rápida.

Array.prototype.sort()

El método sort() ordena los elementos de un array y devuelve el array ordenado. El orden predeterminado es ascendente y basado en la conversión de los elementos a strings.

Sintaxis

arr.sort([compareFunction]);

Parámetros que recibe

  • compareFunction: (Opcional) Una función que define el criterio de ordenación. Si no se proporciona, los elementos se ordenan como strings.

Valor que retorna

El array ordenado.

Ejemplo

snippet.js
1let array = [3, 1, 4, 1, 5, 9];
2console.log(array.sort()); // Salida: [1, 1, 3, 4, 5, 9]
3
4let array2 = [3, 1, 4, 1, 5, 9];
5console.log(array2.sort((a, b) => b - a)); // Salida: [9, 5, 4, 3, 1, 1]

En este ejemplo:

  • El array original es [3, 1, 4, 1, 5, 9].
  • array.sort() ordena los elementos en orden ascendente predeterminado, devolviendo [1, 1, 3, 4, 5, 9].
  • array2.sort((a, b) => b - a) ordena los elementos en orden descendente usando una función de comparación, devolviendo [9, 5, 4, 3, 1, 1].

Notas Adicionales

  • El método sort() es útil para organizar los elementos de un array según distintos criterios de ordenación.

Aplanamiento y mapeo de arrays

Array.prototype.flat()

El método flat() crea un nuevo array con todos los elementos de sub-arrays concatenados de manera recursiva hasta la profundidad especificada.

Sintaxis

arr.flat([depth]);

Parámetros que recibe

  • depth: El nivel de profundidad hasta el cual aplanar el array (opcional, por defecto es 1).

Valor que retorna

Un nuevo array con los elementos aplanados.

Ejemplo

snippet.js
1let array = [1, [2, [3, [4, 5]]]];
2console.log(array.flat(2)); // Salida: [1, 2, 3, [4, 5]]

En este ejemplo:

  • El array original es [1, [2, [3, [4, 5]]]].
  • array.flat(2) aplanará el array hasta una profundidad de 2, devolviendo [1, 2, 3, [4, 5]].

Notas Adicionales

  • El método flat() es útil para reducir la profundidad de arrays anidados a un nivel más manejable.

Array.prototype.flatMap()

El método flatMap() primero mapea cada elemento usando una función de mapeo y luego aplana el resultado en un nuevo array. Es idéntico a ejecutar map() seguido de flat() con profundidad 1.

Sintaxis

snippet.js
1arr.flatMap(callback(element[, index[, array]])[, thisArg]);

Parámetros que recibe

  • callback: Función que produce un elemento del nuevo array, recibiendo tres argumentos:
    • element: El elemento actual del array.
    • index: El índice del elemento actual.
    • array: El array sobre el cual se itera.
  • thisArg: Valor a utilizar como this cuando se ejecuta el callback (opcional).

Valor que retorna

Un nuevo array con los elementos mapeados y aplanados.

Ejemplo

snippet.js
1let array = [1, 2, 3, 4];
2console.log(array.flatMap((x) => [x, x * 2])); // Salida: [1, 2, 2, 4, 3, 6, 4, 8]

En este ejemplo:

  • El array original es [1, 2, 3, 4].
  • array.flatMap(x => [x, x * 2]) mapea cada elemento a un nuevo array
    snippet.txt
    1[x, x * 2]
    y luego aplana el resultado, devolviendo [1, 2, 2, 4, 3, 6, 4, 8].

Notas Adicionales

  • El método flatMap() es útil para combinar mapeo y aplanamiento en una sola operación.

Espero que esta guía te haya sido útil para mejorar tus habilidades con arrays en JavaScript. ¡Sigue practicando y feliz codificación!

No te pierdas mi próximo blog sobre los Métodos de iteración en JavaScript. ¡Descúbrelo aquí!

Tags:Javascript
Comentarios
Deja tu comentario
comentario.formNuevo

* Tu correo electrónico permanecerá privado. Los campos requeridos están señalados con *