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 almacenar 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 agregar o eliminar elementos de ellas después de que se hayan creado.

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

Tipos de métodos de matriz

Existen varios métodos para manipular matrices de JavaScript. Algunos de estos métodos son:

1. concat()

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

Aquí hay 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 fusionan 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 fusionar arreglos con 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 `mergedArray`.

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 una matriz en su lugar, puede usar el método `push()` en su lugar.

2. unir()

Este método se utiliza para unir todos los elementos de una matriz en una cadena. Toma un parámetro de separador 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 una coma.

Aquí hay 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 unen en una sola cadena con una coma como separador. En el segundo ejemplo, los elementos de la matriz se unen en una sola cadena con un guión como separador.

También puedes usar `join()` en una matriz de matrices para crear una cadena de matrices anidadas:

 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.

Aquí hay 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, dejándolo con una longitud de 4.

También puedes usar `pop()` en combinación 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 elemento 4 al final de la matriz, y luego el método `pop()` lo elimina nuevamente, dejando la matriz sin cambios.

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

 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.

Aquí hay un ejemplo de cómo se puede usar 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 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 la matriz [4, 5, 6] como un solo elemento al final de la matriz 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 incluya 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.

Aquí hay un ejemplo de cómo se puede usar 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 con una longitud de 4.

También puede usar shift() en combinación con otros métodos de matriz, como unshift() para agregar elementos al comienzo de la 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 si la matriz está vacía, shift() devuelve indefinido.

 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.

Aquí hay un ejemplo de cómo se puede usar 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 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 la matriz [4, 5, 6] como un solo elemento al comienzo de la matriz y devuelve la nueva longitud de la matriz (4).

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

7. rebanada()

Este método se usa para extraer una sección 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 inicio de la matriz. Si no se especifica el índice final, el valor predeterminado es el final de la matriz.

Aquí hay un ejemplo de cómo se puede usar 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() extrae los elementos de los índices 1 y 2 (2 y 3) de la matriz y los devuelve en una nueva matriz llamada slice. La matriz original no se modifica.

También puede usar slice() con un solo argumento, que indica 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 indica 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() extrae los dos últimos elementos de la matriz.

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

8. empalme()

El método splice() en JavaScript 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: un índice de inicio y un recuento de eliminación. El índice de inicio es el índice en el que comienza el empalme y el recuento de eliminación es el número de elementos que se eliminarán.

Aquí hay 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 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 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 los elementos agregados y eliminar los elementos eliminados.

Tenga en cuenta que si el índice de inicio 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 invertir el orden de los elementos de una matriz. Modifica la matriz original.

Aquí hay un ejemplo de cómo se puede usar 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, de modo que el primer elemento se convierte en el último y el último elemento se convierte en 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() modifica 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 una función de comparación, los elementos se clasifican en orden ascendente según sus puntos de código Unicode.

Aquí hay un ejemplo de cómo se puede usar 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 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 las propiedades de su 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 la matriz en cadenas y los ordena en función de sus valores de puntos Unicode. Esto puede generar 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 la matriz en orden numérico, puede usar una 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]

Conclusión

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.