8 útiles funciones de array en JavaScript (con snippets de código)
Funciones de array — Realmente debería saber esto a estas alturas.
JavaScript ha tenido arrays desde sus inicios. Es un tipo de objeto muy útil que nos permite crear una lista de elementos con cualquier tipo que queramos. Los subarreglos, una lista de la compra o los datos de una tabla pueden ser todos de arreglos.
No entraré en ningún array en detalle aquí, y asumiré que sabe cómo funcionan. Sin embargo, hay bastantes funciones integradas en el tipo de array que pueden ser muy útiles cuando se trabaja con matrices en diferentes escenarios.
Some y Every
A veces, desea verificar si los elementos dentro de una matriz se ajustan a alguna prueba preestablecida. Esta prueba debe tener la forma de una función. Esta puede ser una función de flecha si lo desea. Debe incluir un argumento para la prueba. La función some
busca al menos un único elemento que pasa la prueba, mientras que every
solo devuelve true
si todos los valores pasan la prueba.
let arr [4, 5, 7, 8] let some = arr.some((x) => x > 6); // -> True let every = arr.every((x) => x > 5); // -> false
Concat
La concatenación se puede hacer con cadenas con el operador +, sin embargo, esto no se puede hacer con matrices. Podemos usar el operador de propagación, o podemos usar la función concat
. Podemos dar en un argumento la matriz que queremos agregar a la matriz desde la que llamamos a la función.
const arr1 = ['a', 'b', 'c']; const arr2 = ['d', 'e', 'f']; const arr3 = arr1.concat(arr2); // -> ["a", "b", "c", "d", "e", "f"]
Length
Una de las funciones más importantes (en realidad solo un valor) es el valor de length
. Devuelve el número de elementos dentro de una matriz. Si la matriz tiene valores del índice 0 al 4, devolverá 5 ya que tiene cinco elementos. Esto es muy útil al crear bucles for
tradicionales.
let arr = ['orange', 'apple', 'pear', 'dragonfruit']; let num = arr.length; // -> 4
Includes
Otra tarea muy importante que se debe realizar en las matrices es verificar si se incluye un valor específico en la matriz. Es posible que desee ver si un usuario es vegetariano o si una lista de recetas tiene un determinado ingrediente. La función devolverá un valor booleano dependiendo de si el valor se ha encontrado en la matriz.
let fruits = ['apple', 'banana', 'lemon', 'lime']; let hasCheeseburger = fruits.includes("cheeseburger"); // -> false
Find y FindIndex
Las find
y findIndex
son muy similares. pasamos una prueba a la función, como con some
. La función devolverá el primer valor que pase la prueba y, en el caso de findIndex
, devolverá el índice en el que se encontró el primer elemento que pasó la prueba.
let arr = [1, 2, 3, 4, 5] let found = arr.find((x) => x > 3) // -> 4 let foundIndex = arr.findIndex((x) => x > 3) // -> 3
Map
La función de map
es una función muy conocida que simplemente aplica una función determinada en cada elemento dentro de la matriz. Devolverá una nueva matriz. Esto es muy útil para crear una lista de elementos de React.
const arr = [1, 4, 9, 16]; // pass a function to map that multiplies every item const arr2 = arr.map((item) => { return item * 2 }); console.log(arr2); // expected output: Array [2, 8, 18, 32]
Filtrar
El filtrado de matrices es otra funcionalidad esencial que tiene muchos casos de uso. Tienes que proporcionarle una función. Si un elemento pasa esa prueba, se incluye en la nueva matriz; de lo contrario, no se incluye en la nueva matriz.
function isOldEnough(value) { return value >= 18; } var filtered = [12, 5, 8, 34, 44].filter(isOldEnough); // -> [34, 44]
ForEach
En lugar de usar el bucle for
real, también puede usar la función forEach
que está integrada en las matrices. Ejecutará una función para cada elemento de la matriz. Básicamente, acorta la sintaxis for(i=0;i<arr.length;i++)
en arr.forEach()
. Es una forma muy elegante de recorrer una matriz. Puede ingresar tanto el elemento como los parámetros de índice en la función.
let arr = [1, 2, 3, 4] arr.forEach((item) => { console.log(item) })
Conclusión
Trabajar con array puede ser divertido. También puede ser horrible. Pero solo si no sabe cómo trabajar con ellos. Afortunadamente, son muy fáciles de dominar y, con estas funciones, no tendrá nada de qué preocuparse al manejar matrices en su código.
¡Muchas gracias por leer y que tenga un día maravilloso!