Trabajar con las funciones de matriz integradas de JavaScript

En esta guía para principiantes, veremos las funciones de matriz integradas de JavaScript, cómo trabajar con matrices y algunos consejos y trucos.

Introducción

Cuando trabaje con cualquier lenguaje de programación, probablemente necesitará alguna funcionalidad que no esté integrada en ese lenguaje de forma nativa. Por lo tanto, los implementará usted mismo o utilizará varios módulos o bibliotecas.

Esto afecta directamente la eficiencia de su aplicación (más uso de memoria, más solicitudes HTTP, etc.). Para evitar esto, los desarrolladores que trabajan en lenguajes de programación avanzados tienen funciones integradas dentro de los lenguajes para ayudar a evitar tener que usar bibliotecas externas para tareas comunes.

Familiarizarse con estas funciones integradas se considera conocimiento fundamental de un idioma, y ​​aún puede llegar bastante lejos solo con las funciones integradas. Por supuesto, lo más probable es que termines usando algunos módulos/bibliotecas para ciertas tareas.

En esta guía para principiantes, echaremos un vistazo a las funciones integradas de JavaScript relacionadas con Arrays.

Tipos de datos, estructuras y objetos de JavaScript con funciones integradas

En JavaScript, hay ocho tipos de datos:

  1. Cuerda
  2. Número
  3. Booleano
  4. Nulo
  5. Indefinido
  6. Símbolo
  7. Entrada Grande
  8. Objeto

Sin embargo, no todos los tipos de datos tienen una función integrada. Solo se definen en: Cadena, Número y Booleano.

Cuando se trata de Estructuras de datos en JavaScript, las siete estructuras más utilizadas son:

  1. matriz
  2. Apilar
  3. Cola
  4. Lista enlazada
  5. Árbol
  6. Gráfica
  7. tabla hash

Al igual que los tipos de datos, en las estructuras de datos, las funciones integradas solo se definen en una matriz. Finalmente, Objetos en JavaScript también tienen funciones integradas, como Fecha, RegExp y Math.

En esta guía, nos centraremos específicamente en las matrices.

Funciones de cadena integradas en JavaScript

Un Array en JavaScript es un objeto global similar a una lista. Se utiliza para almacenar datos de varios tipos. Los elementos Array de JavaScript no tienen que ser del mismo tipo, pueden ser arbitrarios. Esta propiedad de las estructuras de datos tipo lista también se conoce como heterogeneidad: las matrices son heterogéneas.

Las matrices están basadas en índices, comenzando en 0, que es una implementación estándar en varios lenguajes de programación:

1
2
3
let myArray1 = [x1, x2, ... , xN];
let myArray2 = new Array(x1, x2, ... , xN);
let myArray3 = Array(x1, x2, ... , xN);

Dada la frecuencia con la que se utilizan las matrices en el trabajo diario, se considera un conocimiento fundamental familiarizarse con las funciones utilizadas para agregar, eliminar y procesar o manipular los elementos dentro de ellas.

If you'd like to read more about JavaScript collections in general, read our Guía para comenzar con las colecciones en JavaScript!

empujar()

La función push(elemento) agrega un nuevo elemento al final de la matriz:

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

Por lo general, la acción push() está asociada con pilas y colas, aunque no con arreglos, en la implementación de JavaScript, esta operación se denomina push().

¿Por qué?

Las matrices están destinadas a ser lo más genéricas posible y, de hecho, puede usar una matriz para implementar una ‘Cola’ o ‘Pila’ en JavaScript, ya que estos no son tipos incorporados, y tendrá que implementarlos usted mismo o usar una biblioteca externa.

Combinación de matrices con push()

Además, al utilizar la función push() junto con el operador de propagación, puede fusionar varios arreglos:

1
2
3
4
5
let array1 = [1, 2, 3, 4];
let array2 = [5, 6, 7, 8]
array1.push(...array2);
   
console.log(array1); // Output: [ 1, 2, 3, 4, 5, 6, 7, 8 ]

estallido()

pop() se puede usar para eliminar el último elemento de una matriz. Junto con push(), pop() es uno de los tres métodos integrales usados ​​para implementar colas y pilas, y también puede usarse fuera de ese contexto:

1
2
3
4
5
let array = [1, 2, 3, 4];
let x = array.pop();

console.log(x); // Output: 4
console.log(array); // Output: [1, 2, 3]

La función pop() devuelve el elemento extraído, por lo que puede reutilizarlo para cualquier otro propósito. Por ejemplo, puede “pop()” elementos directamente en una nueva matriz u otra estructura de datos, o guardarlos en la base de datos.

cambio()

shift() elimina el primer elemento de una matriz y lo devuelve, esencialmente lo opuesto a pop(). Con estos tres, puede implementar estructuras FIFO (First-In-First-Out) y LIFO (Last-In-First-Out):

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

clasificar()

La función sort() ordena los elementos de una matriz, según su orden natural ascendente.

¿Cuál es el orden natural?

Dependiendo del tipo de datos, el orden natural implica diferentes significados. Para las instancias de Número, se pueden comparar a través de <, > y operadores de comparación similares. Las cadenas se comparan alfabéticamente.

Las matrices heterogéneas se ordenan en lotes: los elementos de tipo Número se ordenan, seguidos de elementos de tipo Cadena, seguidos de objetos personalizados.

Vale la pena señalar que sort() ordena la matriz en el lugar, cambiando la matriz original, por lo que si desea conservar el original también, debe realizar una **copia profunda **, y no solo mantener una referencia, ya que la referencia también apuntará a la matriz modificada:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
let array1 = [1, 3, 2, 0];
let array2 = ["JavaScript", "Java", "Python"];
let array3 = ["b", 3, 1, "c", "a"];

let originalArray1 = [...array1];
   
console.log('Sorted array1:', array1.sort());
console.log('Sorted array2:', array2.sort());
console.log('Sorted array3:', array3.sort());

console.log('Original array1:', originalArray1);

Esto resulta en:

1
2
3
4
Sorted array1: [ 0, 1, 2, 3 ]
Sorted array2: [ 'Java', 'JavaScript', 'Python' ]
Sorted array3: [ 1, 3, 'a', 'b', 'c' ]
Original array1: [ 1, 3, 2, 0 ]

También puede proporcionar una función de clasificación con su propia implementación a la función sort(), anulando el comportamiento predeterminado. La función debe aceptar dos argumentos y devolver 1, 0 o -1 en función de su comparación.

Si el primer valor es menor que el segundo, se devuelve 1. Si el primer valor es mayor que el segundo, se devuelve -1. Si son euqal, se devuelve 0.

Basado en esto L

  • Si la función devuelve un valor mayor a 0 - el segundo elemento se ordena antes del primero.
  • Si la función devuelve un valor menor que 0, el primer elemento se ordena antes del segundo.
  • Si la función devuelve 0 - estos son iguales y mantienen su orden relativo.

Implementemos una función personalizada que ordene las cadenas en orden inverso, en lugar de alfabéticamente. Para lograr esto, cambiaremos los valores devueltos para que se devuelva 1 si el primer valor es mayor que el segundo, en lugar de al revés:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
let array = ["JavaScript", "Java", "Python"];

console.log('Custom sort:', array.sort(customSort));
console.log('Default sort:', array.sort());

function customSort(a, b) {
    if (a < b) {
        return 1;
    }
    if (a > b) {
        return -1;
    }
    return 0;
}

Esto resulta en:

1
2
Custom sort: [ 'Python', 'JavaScript', 'Java' ]
Default sort: [ 'Java', 'JavaScript', 'Python' ]

rodaja()

La función slice(start, end) devuelve una parte de la matriz entre el valor de índice start y el valor de índice end-1. Por todos los medios corta una matriz y devuelve una nueva, que consta de los elementos.

La matriz original permanece intacta:

1
2
3
4
5
let array = [10, 20, 30, 40, 50];
let subarray = array.slice(2, 4);
   
console.log(array);    // Output: [ 10, 20, 30, 40, 50 ]
console.log(subarray); // Output: [30, 40]

slice() para matrices es lo que substring() es para cadenas, y es una función muy utilizada para truncar o subarregir ciertas secuencias.

empalme()

La función splice(start, deleteCount, item) se usa para reemplazar y eliminar elementos en una matriz, así como para insertarlos. Sus límites comienzan en start y eliminan los elementos deleteCount, reemplazándolos opcionalmente con item o varios elementos si se proporcionan.

Además, devuelve los elementos eliminados, que luego puede guardar si desea:

1
2
3
4
5
6
let array = [10, 20, 30, 40, 50];
let splicedArray = array.splice(3, 2, 'newElement');


console.log('Spliced elements: ', splicedArray);
console.log('Changed array: ', array);

Aquí, la función splice() comienza en el tercer elemento (indexación basada en 0) y elimina los siguientes dos elementos, reemplazándolos con un solo newElement. Los elementos eliminados se guardan en la matriz splicedArray:

1
2
Spliced elements:  [ 40, 50 ]
Changed array:  [ 10, 20, 30, 'newElement' ]

Sin el ’elemento’ opcional o múltiples elementos, en realidad puede usar ‘splice()’ de manera algo similar a ‘slice()’, pero al mismo tiempo, eliminando los elementos de la matriz:

1
2
3
4
5
let array = [10, 20, 30, 40, 50];
let splicedArray = array.splice(3, 2);

console.log('Spliced elements: ', splicedArray);
console.log('Changed array: ', array);

Esto resulta en:

1
2
Spliced elements:  [ 40, 50 ]
Changed array:  [ 10, 20, 30 ]

reverso()

reverse(), como sugiere el nombre, invierte el orden de los elementos en la matriz:

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

{.icon aria-hidden=“true”}

Nota: El método reverse() invierte la matriz en el lugar. Esto significa que el num_array original y el string_array se invierten y la secuencia original se pierde.

Aunque se hace en el lugar, todavía es común "asignar" el resultado de la operación a una nueva variable, para al menos indicar una matriz invertida:

1
2
3
4
let array = [1, 2, 3];
let arrayReversed = array.reverse();
   
console.log(arrayReversed ) // Output: [3, 2, 1]

mapa()

La función map(f) aplica la función f a una copia de cada elemento de la matriz. Esta función es realmente útil cuando desea asignar elementos a una colección diferente, como usuarios a sus ID o elementos a una categoría:

1
2
3
4
5
6
7
let array = ["Java", "Python", "JavaScript"];

let langLengths = array.map(function(x){
    return x.length;
});

console.log(langLengths);

En este fragmento de código, mapeamos la longitud de cada cadena en la lista, produciendo:

1
[ 4, 6, 10 ]

Si desea incluir los nombres de los idiomas junto a sus longitudes, querrá almacenar los resultados en un diccionario, que puede contener pares clave-valor:

1
2
3
4
let array = ["Java", "Python", "JavaScript"];
let mapping = Object.assign({}, ...array.map((x) => ({[x]: x.length})));

console.log(mapping);

Esto resulta en:

1
{ Java: 4, Python: 6, JavaScript: 10 }

para cada()

forEach(f) aplica la función f para cada elemento de la matriz. La diferencia entre map y forEach es que map crea una nueva matriz y no cambia la original, mientras que forEach cambia la original.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
let languageArray = ["Java", "JavaScript", "Python"];

console.log("Printing each element: \n______");
// Print each element
languageArray.forEach(element => console.log(element));

console.log("\nPrinting each element in uppercase: \n______");
// Print uppercase version of each element, while keeping original strings intact
languageArray.forEach(element => console.log(element.toUpperCase()));

// Change the original array, changing all elements to lowercase
languageArray.forEach(function(element, index, array){
    array[index] = array[index].toLowerCase();
});
console.log("\nEach element converted to lowercase: \n______");
console.log(languageArray);

El ’elemento’ debe definirse incluso si no lo está utilizando, como en el último ejemplo. Estos dan como resultado:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
Printing each element: 
______
Java
JavaScript
Python

Printing each element in uppercase: 
______
JAVA
JAVASCRIPT
PYTHON

Each element converted to lowercase: 
______
[ 'java', 'javascript', 'python' ]

unirse()

El método join() une todos los elementos de una matriz en una cadena, convirtiendo los elementos en representaciones de cadena según su tipo. Los números son fáciles de convertir en cadenas, pero para los objetos personalizados, se llama al método toString() para devolver la representación de la cadena.

Además, al unirse, el separador predeterminado es una coma, que produce un formato similar a CSV. Sin embargo, puede definir cualquier carácter para que sea el separador simplemente pasándolo a la función.

Comencemos con tipos más simples:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
let array = [1, 2, "hello"];
let str1 = array.join();
let str2 = array.join('');
let str3 = array.join('_');


console.log('Result: ', str1);
console.log('Result: ', str2);
console.log('Result: ', str3);
console.log('Type of result: ', typeof(str1));

Los números se convierten fácilmente en cadenas y se unen según el separador que hemos definido:

1
2
3
4
Result: 1,2,hello
Result: 12hello
Result: 1_2_hello
Type of result: string

Sin embargo, cuando se trata de objetos personalizados, la conversión a una cadena dará como resultado una referencia de objeto, a menos que se defina un método toString() válido, que devuelve una representación de cadena. En este caso, definamos una clase Usuario, con un toString() que devuelva el nombre del usuario:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
class User {
    /** @access private */
   #name;
    
    constructor(name){
        this.#name = name;
    }
    
    getName() {
        return this.#name;
    }
    
    setName(name) {
        this.#name = name;
    }

    toString() {
      return this.#name;
    }
}


let john = new User("John");
let maria = new User("Maria");

let array = [john, maria, "hello"];
let str = array.join();

console.log('Result: ', str);
console.log(typeof('Type of result: ', str));

Esto resulta en:

1
2
Result: John,Maria,hello
Type of result: string

If you'd like to read more about classes and OOP in JavaScript, read our Guía para comprender las clases en JavaScript.

cada()

every(p) ​​devuelve true si every elemento de la matriz satisface el predicado pasado p.

Un predicado no es más que una función que acepta una variable y devuelve verdadero o falso.

Con ese fin, puede crear fácilmente funciones anónimas (o incluso explícitas) que devuelvan un valor booleano basado en la variable que proporcione. Por ejemplo, puede verificar si el elemento cada () en una lista es mayor que 0 o contiene algún valor:

1
2
3
4
5
let simpleArray = [1, 2, 3];
console.log(simpleArray.every(x => x > 0)); // Output: true

let objectArray = [new User('John'), new User('Maria')];
console.log(objectArray.every(x => x.age > 21));

alguno()

some(p) devuelve verdadero si cualquier elemento satisface el predicado pasado p:

1
2
3
let a = [1, 2, 3];
    
console.log(a.some(x => x == 2)); // Output: true

filtro()

filter(p) devuelve una nueva matriz compuesta por los elementos que satisfacen el predicado pasado p. Los elementos que no lo pasan (la función devuelve falso) no se incluyen después del filtrado:

1
2
3
let a = [1, 2, 3];
    
console.log(a.every(x => x > 1)); // Output: [2, 3]

indexOf() y lastIndexOf()

Las funciones indexOf() y lastIndexOf() aceptan un elemento y, si está presente en la matriz, devuelven su índice en la secuencia. Si no está presente, se devuelve -1.

Si existen varios elementos que coinciden con el proporcionado, solo se devuelve el índice del primero:

1
2
3
4
let simpleArray = [1, 4, 5, 4, 5, 6, 5, 8];

console.log(simpleArray.indexOf(5));
console.log(simpleArray.indexOf(10));

Esto resulta en:

1
2
2
-1

De manera similar, el método lastIndexOf() itera hacia atrás y devuelve la última aparición, en lugar de la primera aparición de un elemento coincidente:

1
2
3
4
let simpleArray = [1, 4, 5, 4, 5, 6, 5, 8];

console.log(simpleArray.lastIndexOf(5));
console.log(simpleArray.lastIndexOf(10));

Esto resulta en:

1
2
6
-1

Además, puede proporcionar un punto de partida opcional para las funciones lastIndexOf() y indexOf(), ambas basadas en 0:

1
2
3
4
let simpleArray = [1, 4, 5, 4, 5, 6, 5, 8];

console.log(simpleArray.lastIndexOf(5, 3));
console.log(simpleArray.indexOf(5, 5));

El lastIndexOf() no comienza al final de la matriz, en el elemento 8. Comienza en el elemento con el índice de 3, que es el segundo elemento 4 en esta matriz. El indexOf() no comienza al principio de la matriz, sino en el elemento en el índice de 5:

1
2
3
//                          ↓ lastIndexOf() start
let simpleArray = [1, 4, 5, 4, 5, 6, 5, 8];
//                                ↑ indexOf() start

Dados los puntos de partida de los cambios, esto da como resultado:

1
2
2
6

Conclusión

En esta guía, hemos echado un vistazo a algunas de las funciones integradas más utilizadas relacionadas con Arrays en JavaScript. Dada la prevalencia de los arreglos en el trabajo diario, familiarizarse con estas funciones es un deber para cualquier nuevo desarrollador. dor.