[vc_row el_class=”blog-info”][vc_column][vc_single_image source=”featured_image” img_size=”full” style=”vc_box_rounded”][vc_empty_space height=”40px”][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text el_class=”font-weight-bold”]

8 útiles funciones de array en JavaScript (con snippets de código)

Funciones de array — Realmente debería saber esto a estas alturas.

[/vc_column_text][vc_empty_space height=”40px”][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

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!

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_class=”social-info”][vc_column width=”1/6″][/vc_column][vc_column width=”2/3″][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text][social_share_button themes=’theme1′][/vc_column_text][/vc_column_inner][vc_column_inner el_class=”youtube-inner-col” width=”1/2″][vc_column_text][likebtn theme=”youtube” lang=”auto” show_like_label=”0″ white_label=”1″ alignment=”right”][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner el_class=”social-info-inner”][vc_column_inner width=”1/4″][vc_single_image image=”921″][/vc_column_inner][vc_column_inner width=”3/4″][vc_column_text]

Diego Pacheco

Ingeniero en Sitemas, MBA (Babson College). Desarrollador PHP/Java/JavaScript. Fundador & CEO de EpicStudio. Entusiasta de las tecnologías web (JavaScript, Vue, Laravel, AWS, Docker) Viajes, Negocios, Surf y Growth.[/vc_column_text][asvc_list_item icon_fontawesome=”fa fa-calendar-o” icon_size=”14px”]Programar una reunión[/asvc_list_item][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Funciones de array en JavaScript