Chuleta de métodos de arrays en JavaScript (en vivo)
Chuleta de métodos de arrays en JavaScript
Chuleta de métodos de arrays en JavaScript (ejecuta cada uno en vivo) | We.Inc
Escribe tu propia lista y mira cómo map, filter, reduce, find, sort, splice y 30 métodos más se ejecutan sobre ella, con una marca clara en cada método que cambia el array original.
Los métodos de arrays se dividen en dos grupos. Unos cambian el array sobre el que los llamas, como push, pop, splice, sort y reverse. Otros devuelven un array o un valor nuevo y dejan intacto el original, como map, filter, slice, toSorted y reduce. Edita la lista de abajo y cada método se vuelve a ejecutar con tus valores.
Tareas habituales con arrays y el método para cada una
Tarea
Método
¿Cambia el original?
Transformar cada elemento
arr.map(fn)
No
Quedarte con los elementos que pasan una prueba
arr.filter(fn)
No
Combinar en un solo valor
arr.reduce(fn, start)
No
Primer elemento que coincide
arr.find(fn)
No
Añadir al final
arr.push(x)
Sí
Copia ordenada
arr.toSorted(fn)
No
Contar los elementos
Leerlo, no; asignarlo, sí
La mayoría de las chuletas listan los nombres de los métodos con un ejemplo prefabricado. Aquí los ejemplos se ejecutan sobre una lista que controlas tú, así que puedes ver qué pasa con duplicados, con una lista vacía o con un solo elemento. Cada fila lleva una etiqueta para que sepas de un vistazo si un método reescribe tus datos, que es el origen de muchos bugs de estado en React y librerías parecidas.
Escribe una lista separada por comas en el cuadro. Se eliminan los espacios alrededor de cada elemento.
Cada fila se recalcula. Los métodos que cambian el array se ejecutan cada vez sobre una copia nueva, y la fila muestra tanto el valor devuelto como el array resultante.
Filtra por nombre o elige un grupo como Buscar o Transformar para acotar la chuleta.
Baja para ver ejemplos de encadenamiento, la propiedad length y la tabla de equivalencias entre métodos que mutan y métodos que copian.
En el estado de React, usa toSorted, toReversed, toSpliced y with en lugar de sus equivalentes que modifican en el sitio, porque si cambias el array antiguo React puede no detectar la actualización.
Dale a reduce un valor inicial. Sin él, un array vacío lanza un TypeError.
forEach siempre devuelve undefined y no se puede detener con break. Usa for...of, some o find cuando necesites parar antes.
map, filter y slice solo copian un nivel de profundidad. Los objetos dentro del nuevo array son los mismos objetos de antes.
Preguntas frecuentes
¿Cómo obtengo la longitud de un array en JavaScript?
Lee arr.length. Es una propiedad, no un método, así que no lleva paréntesis. Vale uno más que el índice más alto, lo que equivale al número de elementos en los arrays normales. Asignar arr.length = 0 vacía el array, y asignar un número menor corta elementos del final.
¿Qué diferencia hay entre map y forEach?
map crea un array nuevo con lo que tu función devuelve para cada elemento, así que puedes asignarlo o encadenar más métodos. forEach solo invoca tu función y devuelve undefined. Usa map cuando quieras un resultado y forEach solo para efectos secundarios como escribir logs.
¿Qué métodos de arrays mutan el array original?
push, pop, shift, unshift, splice, sort, reverse, fill y copyWithin cambian el array en el sitio. Asignar length o un índice directamente también lo hace. Todo lo demás de esta chuleta lo deja intacto.
¿Cómo elimino un elemento de un array sin modificarlo?
Usa filter para quitarlo por valor, por ejemplo arr.filter((x) => x !== 'kiwi'), o toSpliced(index, 1) para quitarlo por posición. Ambos devuelven un array nuevo y dejan el original como estaba.
¿Por qué map devuelve valores undefined?
Tu callback no devolvió nada. Una función flecha con llaves necesita un return explícito; escribe (x) => x * 2 o (x) => { return x * 2; }. Si falta el return, esa posición queda en undefined.
Leer una cadena de izquierda a derecha
Como los métodos que copian devuelven arrays, puedes llamar a otro método directamente sobre el resultado. Una cadena como orders.filter(isPaid).map(toTotal).reduce(add, 0) se lee como una frase: quédate con los pedidos pagados, convierte cada uno en un número y súmalos.
Las cadenas largas son fáciles de leer, pero recorren la lista una vez por paso. Con unos pocos miles de elementos nunca importa; con datos muy grandes, un único bucle for...of que haga las tres tareas es más rápido.
Los métodos de búsqueda devuelven cosas distintas
includes responde sí o no. indexOf y findIndex dan una posición, y -1 significa que no se encontró. find y findLast dan el propio elemento, o undefined. some y every responden sí o no a una pregunta sobre una función de prueba.
includes e indexOf comparan con igualdad estricta, así que no pueden encontrar un objeto por su contenido. Para eso, usa find o some con una función de prueba.
Métodos que mutan y sus equivalentes que copian
Cuando no debas tocar el original, por ejemplo el estado de React o el argumento de una función, cambia la columna izquierda por la derecha.
En el sitio frente a copia
Cambia el array
Devuelve un array nuevo en su lugar
arr.sort(fn)
arr.toSorted(fn)
arr.reverse()
arr.toReversed()
arr.splice(i, n, ...items)
arr.toSpliced(i, n, ...items)
arr[i] = value
arr.with(i, value)
arr.push(a, b)
[...arr, a, b] o arr.concat([a, b])
arr.unshift(a)
[a, ...arr]
arr.pop()
arr.slice(0, -1)
arr.shift()
arr.slice(1)
Encadenar map, filter y reduce
Total de los pedidos pagados en una sola cadena
Cada paso devuelve un array nuevo, así que el siguiente método se ejecuta sobre él. La lista original de pedidos nunca cambia.
Leer y asignar length
length es una propiedad normal. Reducirla elimina elementos del final, por eso cuenta como un cambio en el array.
Actualizar el estado de React sin mutar
Los métodos que copian le dan a React un array nuevo, así que el componente se vuelve a renderizar. Llamar a sort o push sobre el array del estado no lo haría.
Cuántos elementos hay
Primer elemento
Último elemento, contando desde el final
true si el valor está presente
Primera posición del valor, o -1
Última posición del valor, o -1
Primer elemento que pasa la prueba
Posición del primer elemento que pasa
Último elemento que pasa la prueba
true si algún elemento pasa
true si todos los elementos pasan
Array nuevo con cada resultado del callback
Array nuevo con los elementos que pasan
Reduce la lista a un solo valor
map y luego aplana un nivel
Copia de las posiciones 1 y 2
Array nuevo con elementos extra al final
Un string con un separador
Copia ordenada (orden de texto)
Copia invertida
Copia sin la posición 1
Copia con la posición 0 reemplazada
Ordena en el sitio y devuelve el mismo array
Invierte en el sitio
Añade al final y devuelve la nueva longitud
Quita el último elemento y lo devuelve
Añade al principio y devuelve la nueva longitud
Quita el primer elemento y lo devuelve
Quita desde la posición 1 y devuelve los elementos quitados
Sobrescribe desde la posición 1 hasta el final
Copia una parte del array sobre otra parte
Iterador de posiciones (expandido aquí para mostrarlo)
Iterador de pares [posición, elemento]
Todos
Leer
Buscar
Transformar
Ordenar
Añadir y quitar
Iterar
Chuleta de métodos de arrays en vivo
Escribe una lista separada por comas y cada método de abajo se ejecuta sobre ella mientras editas.