Cuatro métodos para buscar en matrices en JavaScript

Introducción

En JavaScript, trabajará a menudo con datos almacenados en matrices. Una tarea habitual será buscar en la matriz si contiene un valor (o valores) que satisfaga determinados criterios de búsqueda. Según la tarea en cuestión, puede que le interese un valor booleano para la confirmación, un índice para la posición del valor en la matriz o una matriz independiente que contenga todos los resultados de la búsqueda.

Antes de ECMAScript 6, probablemente habrías usado un forbucle para recorrer todos los elementos de la matriz y realizar operaciones en cada elemento. Ahora hay varios métodos de utilidad integrados que resuelven algunas de las tareas comunes para buscar valores en una matriz.

En este artículo, aprenderá sobre Array.includes(), Array.indexOf, Array.find()y Array.filter.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Familiaridad con matrices de JavaScript .

Usandoincludes()

El includes()método devuelve a trueo a falsesi un valor existe en una matriz o no.

Esta es la sintaxis básica:

arr.includes(valueToFind[, fromIndex]);

El primer parámetro, valueToFind, es el valor que se buscará en la matriz. El segundo parámetro, fromIndex, es opcional y establece el índice desde el que se iniciarán las comparaciones. El valor predeterminado es 0, por lo que se busca en toda la matriz.

A continuación se muestra una muestra de datos sobre los caimanes:

const alligatorFacts = ["thick scales", 80, "4 foot tail", "rounded snout", 80];

Luego use includes()para verificar si la cadena "thick scales"existe en la matriz:

alligatorFacts.includes("thick scales");

Este código devolvería true, porque la cadena existe en la matriz.

Si agregara un fromIndexparámetro para que la comparación se produzca después de "thick scales", devolvería false:

alligatorFacts.includes("thick scales", 1);

Ahora bien, hay algunas cosas importantes que tener en cuenta. Este .includes()método utiliza una comparación estricta.

alligatorFacts.includes(80);

Este código regresará trueporque el valor numérico 80está en la matriz.

alligatorFacts.includes('80');

Este código regresará falseporque el valor de la cadena '80'no está en la matriz.

includes()es útil para casos de uso en los que solo necesita saber si existe un valor en una matriz.

UsandoindexOf()

El indexOf()método devuelve el primer índice de un valor en una matriz. Si no hay ninguna coincidencia, el método devuelve -1.

Esta es la sintaxis básica:

arr.indexOf(searchElement[, fromIndex])

Repasemos el ejemplo de conjunto de datos sobre los caimanes:

const alligatorFacts = ["thick scales", 80, "4 foot tail", "rounded snout", 80];

Luego use indexOf()para devolver el primer índice de la cadena "rounded snout":

alligatorFacts.indexOf("rounded snout");

Se devolverá el índice de la cadena "rounded snout"– -.3

alligatorFacts.indexOf("soft and fluffy");

Este ejemplo retorna -1porque esta cadena no existe en la matriz.

alligatorFacts.indexOf(80)

Este ejemplo devuelve 1.

alligatorFacts.indexOf(80, 2);

Este ejemplo retorna -1porque el valor no existe más allá del índice de 2.

Nota: Si no busca el primer resultado, puede utilizar lastIndexOf(). Este método es similar a indexOf, pero buscará la primera coincidencia comenzando en el último índice de la matriz y trabajando hacia atrás.

indexOfes útil para casos de uso donde se necesita un índice único de un resultado de búsqueda relevante.

Usandofind()

El find()método devuelve el primer valor de una matriz que coincide con las condiciones de una función. Si no hay ninguna coincidencia, el método devuelve undefined.

Esta es la sintaxis básica:

arr.find(callback(element[, index[, array]])[, thisArg])

Repasemos el ejemplo de conjunto de datos sobre los caimanes:

const alligatorFacts = ["thick scales", 80, "4 foot tail", "rounded snout"];

Luego use find()para devolver el primer valor que tenga una longitud menor a 13caracteres:

alligatorFacts.find(el = el.length  13);

Este ejemplo solo utiliza el callbackparámetro.

80es un valor numérico. "rounded snout"tiene 13 caracteres de longitud. "thick scales"tiene 12 caracteres de longitud y "4 foot tail"tiene 11 caracteres de longitud: ambos satisfacen las condiciones de la función. Sin embargo, find()solo devolverá el primer valor, por lo que "thick scales"se devolverá.

A continuación se muestra un ejemplo que también utiliza el indexparámetro opcional:

alligatorFacts.find((el, idx) = typeof el === "string"  idx === 2);

"thick scales", "4 foot tail", y "rounded snout"cumple la primera condición ( typeof el === 'string'). Si esta fuera la única condición, devolvería la primera, "thick scales". Pero la segunda condición ( idx === 2) hará que este código devuelva "4 foot tall".

Nota: Si busca el índice en lugar del valor, puede utilizar findIndex(). Este método también recibe una función, pero devuelve el índice del elemento coincidente en lugar del elemento en sí.

find()es útil para casos de uso en los que desea un único valor de resultado de búsqueda.

Usandofilter()

El filter()método devuelve una nueva matriz de todos los valores de una matriz que coinciden con las condiciones de una función. Si no hay ninguna coincidencia, el método devuelve una matriz vacía.

Esta es la sintaxis básica:

let newArray = arr.filter(callback(currentValue[, index[, array]]) {  // return element for newArray, if true}[, thisArg]);

Repasemos el ejemplo de conjunto de datos sobre los caimanes:

const alligatorFacts = ["thick scales", 80, "4 foot tail", "rounded snout", 80];

Luego use filter()para devolver todos los valores iguales a 80:

alligatorFacts.filter(el = el === 80);

Los dos 80valores de la matriz cumplen esta condición. Este código devolvería una nueva matriz: [80, 80].

filter()es útil para casos de uso en los que desea múltiples valores de resultados de búsqueda.

Conclusión

En este artículo, aprendiste sobre Array.includes(), Array.indexOf, Array.find()y Array.filter. Cada uno puede brindar una solución a las necesidades de tu caso de uso.

• ¿Necesitas saber sólo si existe?
  • Usar includes().
• ¿Necesitas obtener el elemento en sí?
  • Úselo find()para un solo artículo o filter()para varios artículos.
• ¿Necesitas encontrar el índice del elemento?
  • Úselo indexOf()para buscar un primitivo o findIndex()para buscar con una función.

Continúe su aprendizaje de JavaScript con métodos de iteración , métodos de acceso y métodos de mutación .