Métodos de Arrays
Los arrays (también llamados arreglos o matrices) cuentan con muchos métodos. Para hacer las cosas más sencillas, en este capítulo se encuentran divididos en dos partes.
Agregar/remover ítems
Ya conocemos algunos métodos que agregan o extraen elementos del inicio o final de un array:
arr.push(...items)
– agrega ítems al final.arr.pop()
– extrae un ítem del final.arr.shift()
– extrae un ítem del inicio.arr.unshift(...items)
– agrega ítems al principio.
Veamos algunos métodos más.
splice
¿Cómo podemos borrar un elemento de un array?
Los arrays son objetos, por lo que podemos intentar con delete
:
let arr = ["voy", "a", "casa"];
delete arr[1]; // remueve "a"
alert( arr[1] ); // undefined
// ahora arr = ["voy", , "casa"];
alert( arr.length ); // 3
El elemento fue borrado, pero el array todavía tiene 3 elementos; podemos ver que arr.length == 3
.
Es natural, porque delete obj.key
borra el valor de key, pero es todo lo que hace. Esto está bien en los objetos, pero en general lo que buscamos en los arrays es que el resto de los elementos se desplace y se ocupe el lugar libre. Lo que esperamos es un array más corto.
Por lo tanto, necesitamos utilizar métodos especiales.
El método arr.splice
funciona como una navaja suiza para arrays. Puede hacer todo: insertar, remover y reemplazar elementos.
La sintaxis es:
arr.splice(start[, deleteCount, elem1, ..., elemN])
Esto modifica arr
comenzando en el índice start
: remueve la cantidad deleteCount
de elementos y luego inserta elem1, ..., elemN
en su lugar. Lo que devuelve es un array de los elementos removidos.
Este método es más fácil de entender con ejemplos.
Empecemos removiendo elementos:
let arr = ["Yo", "estudio", "JavaScript"];
arr.splice(1, 1); // desde el índice 1, remover 1 elemento
alert( arr ); // ["Yo", "JavaScript"]
En el próximo ejemplo removemos 3 elementos y los reemplazamos con otros 2:
let arr = ["Yo", "estudio", "JavaScript", "ahora", "mismo"];
// remueve los primeros 3 elementos y los reemplaza con otros
arr.splice(0, 3, "a", "bailar");
alert( arr ) // ahora ["a", "bailar", "ahora", "mismo"]
Aquí podemos ver que splice
devuelve un array con los elementos removidos:
let arr = ["Yo", "estudio", "JavaScript", "ahora", "mismo"];
// remueve los 2 primeros elementos
let removed = arr.splice(0, 2);
alert( removed ); // "Yo", "estudio" <-- array de los elementos removidos
El método splice
también es capaz de insertar elementos sin remover ningún otro. Para eso necesitamos establecer deleteCount
en 0:
let arr = ["Yo", "estudio", "JavaScript"];
// desde el index 2
// remover 0
// después insertar "el", "complejo" y "language"
arr.splice(2, 0, "el", "complejo", "language");
alert( arr ); // "Yo", "estudio", "el", "complejo", "language", "JavaScript"
Los índices negativos están permitidos
En este y en otros métodos de arrays, los índices negativos están permitidos. Estos índices indican la posición comenzando desde el final del array, de la siguiente manera
let arr = [1, 2, 5];
// desde el index -1 (un lugar desde el final)
// remover 0 elementos,
// después insertar 3 y 4
arr.splice(-1, 0, 3, 4);
alert( arr ); // 1,2,3,4,5
slice
El método arr.slice
es mucho más simple que arr.splice
.
La sintaxis es:
arr.slice([principio], [final])
Devuelve un nuevo array copiando en el mismo todos los elementos desde principio
hasta final
(sin incluir final
). principio
y final
pueden ser negativos, en cuyo caso se asume la posición desde el final del array.
Es similar al método para strings str.slice
, pero en lugar de substrings genera subarrays.
Por ejemplo:
let arr = ["t", "e", "s", "t"];
alert( arr.slice(1, 3) ); // e,s (copia desde 1 hasta 3)
alert( arr.slice(-2) ); // s,t (copia desde -2 hasta el final)
También podemos invocarlo sin argumentos: arr.slice()
crea una copia de arr
. Se utiliza a menudo para obtener una copia que se puede transformar sin afectar el array original.
concat
El método arr.concat
crea un nuevo array que incluye los valores de otros arrays y elementos adicionales.
La sintaxis es:
arr.concat(arg1, arg2...)
Este acepta cualquier número de argumentos, tanto arrays como valores.
El resultado es un nuevo array conteniendo los elementos de arr
, después arg1
, arg2
, etc.
Si un argumento argN
es un array, entonces todos sus elementos son copiados. De otro modo el argumento en sí es copiado.
Por ejemplo:
let arr = [1, 2];
// crea un array a partir de: arr y [3,4]
alert( arr.concat([3, 4]) ); // 1,2,3,4
// crea un array a partir de: arr y [3,4] y [5,6]
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6
// crea un array a partir de: arr y [3,4], luego agrega los valores 5 y 6
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6
Normalmente, solo copia elementos desde arrays. Otros objetos, incluso si parecen arrays, son agregados como un todo:
let arr = [1, 2];
let arrayLike = {
0: "something",
length: 1
};
alert( arr.concat(arrayLike) ); // 1,2,[object Object]
…Pero si un objeto similar a un array tiene la propiedad especial Symbol.isConcatSpreadable
, entonces concat
lo trata como un array y en lugar de añadirlo como un todo, solo añade sus elementos.
let arr = [1, 2];
let arrayLike = {
0: "something",
1: "else",
[Symbol.isConcatSpreadable]: true,
length: 2
};
alert( arr.concat(arrayLike) ); // 1,2,something,else
Iteración: forEach
El método arr.forEach
permite ejecutar una función a cada elemento del array.
La sintaxis:
arr.forEach(function(item, index, array) {
// ... hacer algo con el elemento
});
Transformar un array
map
El método arr.map
es uno de los más útiles y utilizados.
Este llama a la función fn
una vez por cada elemento del array y devuelve un nuevo array con los resultados de la función.
La sintaxis es:
let result = arr.map(function(item, index, array) {
// devuelve el nuevo valor en lugar de item
});
Reverse
El método arr.reverse
revierte el orden de los elementos en el array:
let result = arr.map(function(item, index, array) {
// devuelve el nuevo valor en lugar de item
});
Split y join
Estos métodos son útiles cuando necesitamos convertir un string en un array y viceversa.
El método str.split(delim)
divide un string en un array por el delimitador delim
.
En el siguiente ejemplo, una llamada a split
da un array de palabras:
let names = 'Bilbo, Gandalf, Nazgul';
let arr = names.split(', ');
for (let name of arr) {
alert( `Un mensaje para ${name}.` ); // Un mensaje para Bilbo (y demás)
}
El split
tiene un segundo argumento opcional: un límite en el número de elementos en el array. Si se pasa el límite, no se tendrán más de esos elementos en el array.
Reduce y reduceRight
Cuando necesitamos iterar sobre un array – nosotros tenemos métodos para ello, y cuando necesitamos transformar – tenemos map
.
El método arr.reduce
y arr.reduceRight
son unos de los más complejos en array, pero los más útiles.
La sintaxis:
let value = arr.reduce(function(accumulator, item, index, array) {
// ...
}, [initial]);
La función se aplica a cada elemento del array y reduce
pasa el resultado de cada ejecución a la siguiente llamada, junto con el siguiente elemento del array.
accumulator
es el resultado de la función en la llamada anterior (si es la primera llamada, el valor esinitial
).item
es el elemento del array.index
es su posición.array
es el array mismo.
En otras palabras, estos métodos reducen el array a un solo valor.
Por ejemplo, si queremos sumar los elementos del array:
let arr = [1, 2, 3, 4, 5];
// el resultado inicial es 0
let result = arr.reduce((sum, current) => sum + current, 0);
alert(result); // 15
Array.isArray
Los arrays no forman un tipo separado en JavaScript. Son objetos, por lo que el operador typeof
no puede distinguir arrays de otros objetos. Podemos ejecutar:
alert(typeof []); // object
Este es el resultado de typeof
para arrays, objetos y null
.
El método Array.isArray(value)
devuelve true
si el value
es un array y false
si no lo es.