Manipulación de matrices: comprensión de los métodos de matriz de JavaScript

¿Qué son las matrices en JavaScript? Las matrices de JavaScript son tipos de datos que pueden contener una colección de elementos. Estos elementos pueden ser de cualquier tipo de datos, incluidos números, cadenas y objetos. Las matrices en JavaScript son dinámicas, lo que significa que puede agregarles o quitarles elementos después de crearlos.

En este tutorial, veremos todos los métodos de matriz de JavaScript y cómo se usan en la práctica.

Tipos de métodos de matriz

Hay varias formas de manipular las matrices de JavaScript. Algunos de estos métodos son:

1. concat()

Este método se utiliza para concatenar dos o más matrices. No modifica las matrices originales, sino que devuelve una nueva matriz que contiene los elementos de las matrices originales.

Un ejemplo de cómo se puede usar `concat()` en JavaScript:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];

const mergedArray = array1.concat(array2, array3);
// mergedArray is [1, 2, 3, 4, 5, 6, 7, 8, 9]

En el ejemplo anterior, matriz1, matriz2 y matriz3 se combinan en una sola matriz llamada ‘mergedArray’. `concat()` toma cualquier número de matrices como argumentos y devuelve una nueva matriz que contiene todos los elementos de las matrices originales.

También puede usar `concat()` para concatenar arreglos con sus valores que no son arreglos. Por ejemplo:

const array1 = [1, 2, 3];
const mergedArray = array1.concat(4, 5, 6);
// mergedArray is [1, 2, 3, 4, 5, 6]

En este caso, los valores 4, 5 y 6 se agregan al final de array1 para crear un `combinedArray`.

Tenga en cuenta que `concat()` no modifica las matrices originales. En su lugar, crea una nueva matriz que contiene los elementos de las matrices originales. Si desea modificar la matriz en su lugar, puede usar el método `push()` en su lugar.

2. unir()

Este método se utiliza para concatenar todos los elementos de una matriz en una cadena. Toma un parámetro delimitador opcional que especifica el carácter que se usará para separar los elementos de la matriz en la cadena resultante. Si no se proporciona ningún separador, los elementos se separan con comas.

Un ejemplo de cómo se puede usar `join()` en JavaScript:

const array = ['apple', 'banana', 'orange'];
const fruitString = array.join();
// fruitString is 'apple,banana,orange'

const array = [1, 2, 3];
const numberString = array.join('-');
// numberString is '1-2-3'

En el primer ejemplo, los elementos de la matriz se concatenan en una sola línea con una coma como separador. En el segundo ejemplo, los elementos de la matriz se concatenan en una sola línea con un guión como separador.

También puede crear una cadena de matrices anidadas utilizando la función ‘join()’ en un rango de matrices:

const array = [[1, 2], [3, 4], [5, 6]];
const nestedArrayString = array.join('-');
// nestedArrayString is '1,2-3,4-5,6'

Tenga en cuenta que `join()` no modifica la matriz original. Crea una nueva cadena que contiene los elementos de la matriz. Si desea modificar la matriz en su lugar, puede usar el método `splice()` en su lugar.

3. hacer estallar()

Este método se utiliza para eliminar el último elemento de una matriz y devolverlo. Modifica la matriz original.

Un ejemplo de cómo se puede usar `pop()` en JavaScript:

const array = [1, 2, 3, 4, 5];
const lastElement = array.pop();
// lastElement is 5
// array is [1, 2, 3, 4]

En este ejemplo, el método `pop()` elimina el último elemento (5) de la matriz y lo asigna a la variable `lastElement`. Luego, la matriz se modifica para eliminar el último elemento y su longitud es 4.

También puedes usar `pop()` junto con otros métodos de matriz como `push()` para agregar elementos al final de la matriz:

const array = [1, 2, 3];
array.push(4);
array.pop();
// array is [1, 2, 3]

En este ejemplo, el método `push()` agrega el cuarto elemento al final de la matriz, y luego el método `pop()` lo elimina nuevamente, dejando la matriz sin cambios.

Tenga en cuenta que `pop()` devuelve nulo si la matriz está vacía.

const array = []; 
const element = array.pop(); 
// element is undefined

4. empujar()

Este método se utiliza para agregar uno o más elementos al final de una matriz. Modifica la matriz original y devuelve la nueva longitud de la matriz.

Un ejemplo de cómo se puede usar la función push() en JavaScript:

const array = [1, 2, 3];
const newLength = array.push(4, 5, 6);
// array is [1, 2, 3, 4, 5, 6]
// newLength is 6

En este ejemplo, el método push() agrega los elementos 4, 5 y 6 al final de la matriz y devuelve la nueva longitud de la matriz (6). Luego, la matriz se modifica para incluir estos elementos.

También puede usar la función push() para agregar una matriz de elementos al final de otra matriz:

const array = [1, 2, 3];
const newLength = array.push([4, 5, 6]);
// array is [1, 2, 3, [4, 5, 6]]
// newLength is 4

En este ejemplo, el método push() agrega una matriz [4, 5, 6] accede al final de la matriz como un solo elemento y devuelve la nueva longitud de la matriz (4).

Tenga en cuenta que push() modifica la matriz original. Si desea crear una nueva matriz que contenga los elementos de la matriz original, puede usar el método concat() en su lugar.

5. cambio ()

Este método se utiliza para eliminar el primer elemento de una matriz y devolverlo. Modifica la matriz original.

Un ejemplo de cómo se puede usar la función shift() en JavaScript:

const array = [1, 2, 3, 4, 5];
const firstElement = array.shift();
// firstElement is 1
// array is [2, 3, 4, 5]

En este ejemplo, el método shift() elimina el primer elemento (1) de la matriz y lo asigna a la variable firstElement. Luego, la matriz se modifica para eliminar el primer elemento, dejándolo en la longitud 4.

También puede usar shift() junto con otros métodos de matriz como unshift() para agregar elementos al comienzo de una matriz:

const array = [1, 2, 3];
array.unshift(0);
array.shift();
// array is [1, 2, 3]

En este ejemplo, el método unshift() agrega el elemento 0 al comienzo de la matriz y luego el método shift() lo elimina nuevamente, dejando la matriz sin cambios.

Tenga en cuenta que shift() devuelve indefinido si la matriz está vacía.

const array = []; 

const element = array.shift(); 

// element is undefined

6. anular desplazamiento()

Este método se utiliza para agregar uno o más elementos al comienzo de una matriz. Modifica la matriz original y devuelve la nueva longitud de la matriz.

Un ejemplo de cómo se puede usar la función unshift() en JavaScript:

const array = [1, 2, 3];
const newLength = array.unshift(4, 5, 6);
// array is [4, 5, 6, 1, 2, 3]
// newLength is 6

En este ejemplo, el método unshift() agrega los elementos 4, 5 y 6 al comienzo de la matriz y devuelve la nueva longitud de la matriz (6). Luego, la matriz se modifica para incluir estos elementos al principio.

También puede usar la función unshift() para agregar una matriz de elementos al comienzo de otra matriz:

const array = [1, 2, 3];
const newLength = array.unshift([4, 5, 6]);
// array is [[4, 5, 6], 1, 2, 3]
// newLength is 4

En este ejemplo, el método unshift() agrega una matriz [4, 5, 6] accede al comienzo de la matriz como un solo elemento y devuelve la nueva longitud de la matriz (4).

Tenga en cuenta que unshift() cambia la matriz original. Si desea crear una nueva matriz que contenga los elementos de la matriz original, puede usar el método concat() en su lugar.

7. rebanada()

Este método se usa para eliminar parte de una matriz y devolver una nueva matriz. No modifica la matriz original. El método de división toma dos parámetros opcionales: un índice de inicio y un índice de finalización.

Si no se especifica el índice de inicio, el valor predeterminado es el comienzo de la matriz. Si no se especifica el índice final, el valor predeterminado es el final de la matriz.

Un ejemplo de cómo se puede usar la función slice() en JavaScript:

const array = [1, 2, 3, 4, 5];
const slice = array.slice(1, 3);
// slice is [2, 3]
// array is [1, 2, 3, 4, 5] (unchanged)

En este ejemplo, el método slice() elimina los elementos de los índices 1 y 2 (2 y 3) de la matriz y los devuelve en una nueva matriz denominada slice. La matriz original no ha sido modificada.

También puede usar slice() con un único argumento que especifica el índice de inicio:

const array = [1, 2, 3, 4, 5];
const slice = array.slice(2);
// slice is [3, 4, 5]
// array is [1, 2, 3, 4, 5] (unchanged)

En este caso, el método slice() extrae todos los elementos de la matriz desde el índice 2 (inclusive) hasta el final de la matriz.

También puedes usar índices negativos con slice() , que indican la posición del elemento en relación con el final de la matriz:

const array = [1, 2, 3, 4, 5];
const slice = array.slice(-2);
// slice is [4, 5]
// array is [1, 2, 3, 4, 5] (unchanged)

En este caso, el método slice() elimina los dos últimos elementos de la matriz.

Tenga en cuenta que slice() devuelve una matriz vacía si el índice inicial es mayor que el índice final.

8. empalme()

En JavaScript, el método splice() se usa para agregar o eliminar elementos de una matriz y devolver los elementos eliminados como una nueva matriz. Modifica la matriz original.

El método splice() toma al menos dos argumentos: el índice inicial y el número de eliminaciones. El índice de inicio es el índice en el que comienza la combinación y el recuento de eliminación es la cantidad de elementos que se eliminarán.

Un ejemplo de cómo se puede usar splice() para eliminar elementos de una matriz:

const array = [1, 2, 3, 4, 5];
const removedElements = array.splice(1, 2);
// removedElements is [2, 3]
// array is [1, 4, 5]

En este ejemplo, el método splice() elimina los elementos de los índices 1 y 2 (2 y 3) de la matriz y los devuelve en una nueva matriz denominada RemoveElements. La matriz original se modifica para eliminar estos elementos.

También puede usar la función splice() para agregar elementos a una matriz:

const array = [1, 2, 3];
const removedElements = array.splice(1, 0, 4, 5, 6);
// removedElements is []
// array is [1, 4, 5, 6, 2, 3]

En este caso, el método splice() agrega los elementos 4, 5 y 6 a la matriz en el índice 1 y el recuento de eliminación es 0, por lo que no se elimina ningún elemento. La matriz original se modifica para incluir estos elementos.

También puede usar la función splice() para agregar y eliminar elementos al mismo tiempo:

const array = [1, 2, 3, 4, 5];
const removedElements = array.splice(1, 2, 6, 7);
// removedElements is [2, 3]
// array is [1, 6, 7, 4, 5]

En este ejemplo, el método splice() elimina los elementos en los índices 1 y 2 (2 y 3) de la matriz y agrega los elementos 6 y 7 en los mismos índices. La matriz original se modifica para incluir elementos agregados y eliminar elementos eliminados.

Tenga en cuenta que si el índice inicial es mayor que la longitud de la matriz, splice() no agrega ni elimina ningún elemento, sino que simplemente devuelve una matriz vacía.

9. reversa()

Este método se utiliza para cambiar el orden de los elementos en una matriz. Modifica la matriz original.

Un ejemplo de cómo se puede usar la función reverse() en JavaScript:

const array = [1, 2, 3, 4, 5];
array.reverse();
// array is [5, 4, 3, 2, 1]

En este ejemplo, el método reverse() invierte el orden de los elementos en la matriz para que el primer elemento sea el último y el último el primero.

También puedes usar reverse() en una matriz de objetos:

const array = [{id: 1}, {id: 2}, {id: 3}];
array.reverse(); // array is [{id: 3}, {id: 2}, {id: 1}]

En este caso, el método reverse() invierte el orden de los objetos en la matriz.

Tenga en cuenta que reverse() invierte la matriz original. Si desea crear una nueva matriz que sea el reverso de la matriz original, puede usar los métodos slice() y reverse() juntos:

const array = [1, 2, 3, 4, 5];
const reversedArray = array.slice().reverse();
// reversedArray is [5, 4, 3, 2, 1]
// array is [1, 2, 3, 4, 5] (unchanged)

En este ejemplo, el método slice() crea una copia superficial de la matriz y el método reverse() invierte los elementos de la copia, dejando la matriz original sin cambios.

10. ordenar()

Este método se utiliza para ordenar los elementos de una matriz en su lugar. Puede tomar una función de comparación opcional como parámetro, lo que le permite especificar un algoritmo de clasificación personalizado. Si no se proporciona la función de comparación, los elementos se clasifican en orden ascendente según sus puntos de código Unicode.

Un ejemplo de cómo se puede usar la función sort() en JavaScript:

const array = [5, 2, 4, 1, 3];
array.sort();
// array is [1, 2, 3, 4, 5]

En este ejemplo, el método sort() ordena los elementos de la matriz en orden ascendente.

También puede usar la función sort() con una función de comparación como argumento para especificar un orden de clasificación personalizado:

const array = [{name: 'John'}, {name: 'Jane'}, {name: 'Bob'}];
array.sort((a, b) => a.name.localeCompare(b.name));
// array is [{name: 'Bob'}, {name: 'Jane'}, {name: 'John'}]

En este caso, el método sort() ordena los objetos de la matriz en función de la propiedad del nombre mediante el método localeCompare(). Tenga en cuenta que sort() modifica la matriz original.

También de forma predeterminada, sort() convierte los elementos de una matriz en cadenas y los ordena en función de los valores de punto Unicode. Esto puede causar resultados inesperados para valores que no son cadenas. Por ejemplo:

const array = [10, 5, 8, 1, 7];
array.sort();
// array is [1, 10, 5, 7, 8]

En este caso, el método sort() convierte los números en cadenas antes de ordenarlos, por lo que la matriz resultante no está en orden numérico. Para ordenar una matriz en orden numérico, puede usar la función de comparación como argumento para ordenar ():

const array = [10, 5, 8, 1, 7];
array.sort((a, b) => a - b);
// array is [1, 5, 7, 8, 10]

Si desea ordenar los elementos de una matriz en orden descendente, puede usar la siguiente función de comparación como argumento para sort():

const array = [5, 2, 4, 1, 3];
array.sort((a, b) => b - a);
// array is [5, 4, 3, 2, 1]

El resultado

Estos son solo algunos de los muchos métodos disponibles para trabajar con arreglos en JavaScript. ¡Espero que esto ayude! Avíseme si tiene alguna otra pregunta.