Métodos de array en JavaScript

❮ Anterior Siguiente ❯

En JavaScript, existen una amplia gama de métodos de array. Para proporcionarte información más detallada y completa, vamos a dividirlos en grupos.

Métodos de agregar/eliminar

En el capítulo Arrays, ya hemos hablado sobre este grupo de métodos. Entre ellos se incluyen:

arr.push(...items)- ayuda a añadir elementos al final;
arr.pop()- extrae un elemento desde el final;
arr.shift()- extrae un elemento desde el inicio;
arr.unshift(...items)- añade elementos al inicio.

En este capítulo, hablaremos sobre varios otros métodos.

Splice

El primer método es el arr.splice. Se utiliza para añadir o eliminar elementos a/desde el array, así como para devolver los elementos ya eliminados. Por lo tanto, con este método, puedes hacer cualquier cosa: insertar, eliminar, reemplazar elementos.

La sintaxis se ve así:

arr.splice(index[, deleteCount, elem1, ..., elemN])

Es más fácil de entender con un ejemplo.

En el primer ejemplo, se demuestra la eliminación de la siguiente manera:

javascript array splice

let arr = ["Welcome", "to", "W3Docs"]; arr.splice(1, 1); // from index 1 remove 1 element console.log(arr); // ["Welcome", "W3docs"]

En el siguiente ejemplo, eliminaremos tres elementos y los reemplazaremos por otros dos:

javascript array splice javascript array splice

let arr = ["Welcome", "to", "W3Docs", "Javascript", "book"]; // remove 3 first elements and replace them with another arr.splice(0, 3, "Starts", "read"); console.log(arr) // now ["Starts", "read", "Javascript", "book"]

Ahora, puedes notar que splice devuelve el array de los elementos eliminados, de la siguiente forma:

javascript array splice

let arr = ["Welcome", "to", "W3Docs", "Javascript", "book"]; // remove 2 first elements let removed = arr.splice(0, 2); console.log(removed); // "Welcome", "to" <-- array of removed elements

Es esencial saber que con este método, también puedes insertar elementos sin ninguna eliminación. Para hacerlo, es necesario establecer deleteCount a 0 , de esta manera:

javascript array splice

let arr = ["Welcome", "to", "W3Docs"]; // from index 2, delete 0 // then insert "Javascript" and "book" arr.splice(4, 0, "Javascript", "book"); console.log(arr); // "Welcome", "to", " W3Docs", "Javascript", "book"

Slice

arr.slice es un método sencillo, mucho más simple que arr.splice.

Su sintaxis es la siguiente:

arr.slice([start], [end])

Este método devuelve un nuevo array copiando todos los elementos desde el índice start hasta end (pero no incluye el final). Si tanto el start como el end son posición negativa desde el array, se asumirá el final.

Es muy similar al método end, pero hace subarrays en lugar de subcadenas.

Aquí hay un ejemplo:

Javascript slice method, make subarray javascript

let arr = ["W", "3", "D", "o", "c", "s"]; console.log(arr.slice(1, 3)); // 3,D (copy from 1 to 3) console.log(arr.slice(-2)); // c,s (copy from -2 till the end)

Puedes llamarlo sin argumentos: str.slice creará una copia de arr.

Concat

El método arr.concat se utiliza para crear un nuevo array, incluyendo valores de otros arrays, así como elementos adicionales. La sintaxis será la siguiente:

arr.concat(arg1, arg2...)

Aceptará argumentos de cualquier cantidad (arrays o valores).

El resultado será un nuevo array con los elementos de arr, luego arg1, arg2, y más.

En caso de que un argumento argN represente un array, todos sus elementos serán copiados. En otros casos, se copiará el argumento.

Por ejemplo:

Javascript concat method, create a new array javascript

let arr = ["a", "b"]; // create an array from: arr and ["c", "d"] console.log(arr.concat(["c", "d"])); // a,b,c,d // create an array from: arr and ["c", "d"] and [e,f] console.log(arr.concat(["c", "d"], ["e", "f"])); // a,b,c,d,e,f // create an array from: arr and ["c", "d"], then add values e and f console.log(arr.concat(["c", "d"], "e", "f")); // a,b,c,d,e,f

Iterar: forEach

El método arr.forEach permite ejecutar una función para cada elemento del array.

Aquí está la sintaxis:

arr.forEach(function (item, index, array) {
  // ... do something with item
});

En el siguiente ejemplo, se muestra cada elemento del array:

// for each element call alert
["dog", "cat", "mouse"].forEach(alert);

Buscando en el array

En esta parte, cubriremos los métodos para buscar en un array.

javascript array splice

indexOf/lastIndexOf e includes

Estos métodos tienen la misma sintaxis haciendo lo mismo que sus contrapartes de cadena. La diferencia es que operan en elementos, no en caracteres.

Lo que hacen:

arr.indexOf(item, from) busca un item comenzando desde el índice from y lo devuelve donde se encontró, de lo contrario -1.
arr.lastIndexOf(item, from) es similar, pero busca de derecha a izquierda.
arr.includes(item, from) busca un item, comenzando desde el índice from, y devuelve true, si se encontró.

Veamos el siguiente ejemplo:

Javascript indexOf, includes, last index arrays

let arr = [1, 0, false]; console.log(arr.indexOf(0)); // 1 console.log(arr.indexOf(false)); // 2 console.log(arr.indexOf(null)); // -1 console.log(arr.includes(1)); // true

Ten en cuenta que estos métodos usan la comparación ===. Por lo tanto, cuando buscas false, encontrarás false y no cero.

Find y FindIndex

Supongamos que tienes un array con objetos y quieres encontrar un objeto con una condición específica. Entonces necesitas usar el método arr.find(fn) utilizando esta sintaxis:

let result = arr.find(function (item, index, array) {
  // if true is returned,the item is returned, and iteration is stopped
  // for falsy scenario returns undefined
});

La función se llamará para los elementos del array, uno tras otro, de esta manera:

Un item es un elemento.
El index será su índice.
El array será el array en sí mismo.

En caso de retornar true, la búsqueda se detendrá, y se devolverá el item-.

Por ejemplo:

Javascript find index in array

let animals = [{ id: 1, name: "dog" }, { id: 2, name: "cat" }, { id: 3, name: "mouse" } ]; let animal = animals.find(item => item.id == 1); console.log(animal.name); // dog

Filter

Este método busca el primer elemento que hace que la función devuelva true.

En caso de que haya muchos elementos, puedes usar el método arr.filter(fn). Su sintaxis se ve como find, pero el filter devolverá un array con todos los elementos coincidentes:

let results = arr.filter(function (item, index, array) {
  // if true item is pushed to results and the iteration continues
  // returns empty array if nothing found
});

Aquí tienes un ejemplo:

Javascript filter method

Transformando un array

En esta parte, abordaremos los métodos destinados a transformar y reordenar un array.

map

Este método es uno de los más útiles y frecuentemente utilizados. Aquí está la sintaxis:

let result = arr.map(function (item, index, array) {
  // returns the new value instead of item
});

En este ejemplo, cada elemento se transforma en su longitud:

Javascript map method

let lengths = ["dog", "cat", "mouse"].map(item => item.length); console.log(lengths); // 3,3,5

sort(fn)

Este método se utiliza para ordenar el array en su lugar, cambiando el orden de los elementos.

Vamos a ver el siguiente ejemplo:

Javascript sort method

let arr = [1, 3, 25]; // the method reorders the content of arr arr.sort(); console.log(arr); // 1, 25, 3

Encontrarás algo bastante extraño en el resultado. El orden parecía 1, 25, 3

La razón es que los elementos se ordenan como cadenas.

Todos los elementos se convierten en cadenas para las comparaciones. Se utiliza el orden lexicográfico para las cadenas ( "3" > "25").

Para usar tu orden de clasificación, necesitas proporcionar una función como argumento de arr.sort().

Aquí tienes un ejemplo:

Javascript sort method

function compareNumeric(a, b) { if (a > b) return 1; if (a == b) return 0; if (a < b) return -1; } let arr = [1, 3, 25]; arr.sort(compareNumeric); console.log(arr); // 1, 3, 25

reverse

Este método tiene como objetivo revertir el orden de los elementos en arr.

Por ejemplo:

Javascript reverse method

let arr = ["a", "b", "c", "d", "e"]; arr.reverse(); console.log(arr); // e,d,c,b,a

También puede devolver el array arr después de invertirlo.

split y join

El método str.split(delim) se utiliza para dividir la cadena en un array por un delimitador específico delim.

En el siguiente ejemplo, se divide por una coma seguida de un espacio:

Javascript split method

let animals = 'dog, cat, mouse'; let arr = animals.split(', '); for (let animal of arr) { console.log(`A message to ${animal}.`); // A message to dog (and other names) }

Por cierto, este método tiene un argumento numérico alternativo que es un límite de la longitud de un array. En caso de que se proporcione, los elementos extra serán ignorados. De todas formas, los desarrolladores no lo usan a menudo.

El ejemplo se verá así:

Javascript split method

let arr = 'dog, cat, mouse, lion'.split(', ', 2); console.log(arr); // dog, cat

Si quieres revertir el split, llama a arr.join(glue). Creará una cadena de los elementos de arr junto con glue entre ellos. Aquí tienes un ejemplo:

Javascript join method

let animalsArr = ['dog', 'cat', 'mouse']; let str = animalsArr.join(';'); // glue the array into a string using ; console.log(str); // dog;cat;mouse

reduce/reduceRight

Para iterar sobre un array, puedes aplicar forEach, for, o for..of.

En caso de que desees iterar y devolver los datos para cada elemento, puedes usar map.

Los métodos arr.reduce y arr.reduceRight hacen acciones similares pero son un poco más complejos. Puedes usarlo para calcular un valor basado en el array.

La sintaxis es la siguiente:

let value = arr.reduce(function (accumulator, item, index, array) {
  // ...
}, [initial]);

Los argumentos son:

el accumulator representa el resultado de la llamada a la función anterior equivalente a initial la primera vez;
el item puede ser descrito como el elemento actual del array.
el index es su posición.
el array es el array.

En este ejemplo, puedes encontrar una suma de un array en una sola línea:

Javascript reduce method

let sumArr = [1, 2, 3, 4, 5]; let result = sumArr.reduce((sum, current) => sum + current, 0); console.log(result); // 15

Array.isArray

Los arrays están basados en objetos.

Por lo tanto, el typeof no te permitirá distinguir un objeto simple de un array:

Javascript typeof method

console.log(typeof {}); // object console.log(typeof []); // same

Pero los desarrolladores usan los arrays tan a menudo que existe un método especial para hacerlo: Array.isArray(value). Devuelve true siempre que el valor sea un array y false si no lo es.

El ejemplo es el siguiente:

Javascript isArray method

console.log(Array.isArray({})); // false console.log(Array.isArray([])); // true

Hora del Cuestionario: ¡Pon a Prueba Tus Habilidades!

¿Listo para desafiar lo que has aprendido? Sumérgete en nuestros cuestionarios interactivos para una comprensión más profunda y una forma divertida de reforzar tu conocimiento.