Compruebe si el array contiene valor en JavaScript
-
Uso de la función
.indexOf()para verificar si el array contiene valor en JavaScript -
Uso de la función
.includes()para verificar si el array contiene valor en JavaScript -
Uso de la función
.find()para encontrar elementos en un array en JavaScript -
Uso de la función
.filter()para buscar elementos en un array en JavaScript -
Uso de bucle simple
forpara buscar un elemento - Nota
A menudo nos encontramos en una situación para comprobar si el array contiene valor en JavaScript. Aunque la funcionalidad de búsqueda se puede codificar con sintaxis básica de JavaScript usando bucles, es bueno conocer las funcionalidades incorporadas disponibles para la búsqueda de matrices en JavaScript, su uso, tipos de retorno y el comportamiento. Hace que nuestra tarea sea mucho más fácil, ya que necesitamos codificar menos. La funcionalidad será eficiente y menos propensa a errores con funciones integradas. Veamos formas de buscar un elemento en un array.
Uso de la función .indexOf() para verificar si el array contiene valor en JavaScript
La función .indexOf() es una función de uso común en javascript. Funciona bien mientras busca un elemento en un array o incluso una cadena.
Sintaxis
indexOf(element, index)
Parámetro
Toma el elemento, buscar, como parámetro. Y un parámetro opcional que le dice a la función, el índice desde donde se debe iniciar la búsqueda (empezando por 0). Si proporcionamos un valor negativo, significará buscar comenzando desde el final del array en la posición especificada.
Valor de retorno
La función devuelve el índice del elemento de búsqueda a partir de 0 en el array si puede encontrar el elemento. De lo contrario, devolverá -1, lo que indica que no pudo encontrar el elemento. Si hay más de una coincidencia en un array, la función .indexOf() devolverá el índice de la primera coincidencia.
Soporte del navegador
La función .indexOf() es compatible con todas las versiones principales del navegador.
Uso
El uso de la función indexOf() en un array es el siguiente.
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
console.log(fruits.indexOf('Pear'));
console.log(fruits.indexOf('Tomato'))
Producción :
2
-1
Para la función de búsqueda, verificamos si el tipo de retorno de .indexOf(searchText) es mayor que -1. Si es así, el resultado de la búsqueda debe ser true en caso contrario, false. Veamos el mismo ejemplo discutido anteriormente para verificar si existe un elemento en el array.
function isFruit(fruitName) {
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
if (fruits.indexOf(fruitName) > -1) {
return true;
} else {
return false;
}
}
isFruit('Pear');
isFruit('Cat');
Producción :
true
false
Uso de la función .includes() para verificar si el array contiene valor en JavaScript
La función incluye() de JavaScript comprueba si un elemento dado está presente en un array. Devuelve un valor booleano. Por tanto, es más adecuado en comprobaciones de condiciones if.
Sintaxis
includes(keyword)
includes(keyword, index)
Parámetro
La función toma dos parámetros. Por lo general, usamos esta función en la forma .includes(searchString). El parámetro searchString es el elemento que deseamos buscar, y el parámetro index se refiere al índice del array a partir del cual buscar. El parámetro índice es opcional.
Valor devuelto
.includes() devuelve true si el searchString se encuentra como un elemento del array. Si no se encuentra, la función devuelve falso.
Soporte del navegador
La función .includes() funciona en casi todos los navegadores web excepto Internet Explorer. Por lo tanto, si su proyecto es compatible con IE, es posible que deba optar por la función indexOf().
Uso
Echemos un vistazo a la aplicación de incluye() en un array.
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
console.log(fruits.includes('Pear'));
console.log(fruits.includes('Tomato'))
Producción :
true
false
La función incluye() se puede utilizar directamente en condiciones if ya que devuelve un valor booleano como salida. El ejemplo anterior se puede utilizar en condicional if de la siguiente manera. Solo tenga en cuenta que este código puede no funcionar en IE ya que includes() no es compatible con él.
function isFruit(fruitName) {
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
if (fruits.includes(fruitName)) {
return true;
} else {
return false;
}
}
isFruit('Pear');
isFruit('Cat');
Producción :
true
false
Uso de la función .find() para encontrar elementos en un array en JavaScript
Otra forma de comprobar si un elemento está presente en un array es utilizando la función .find(). En comparación con las funciones .indexOf() y .includes(), .find() toma una función como parámetro y la ejecuta en cada elemento del array. Devolverá el primer valor que satisface la condición mencionada en la función de parámetro.
Sintaxis
.find((keyword) => {/* Some condition checks */})
.find((keyword, index) => {/* Some condition checks */})
Parámetro
La función Array.find() toma una función como parámetro de entrada. Por lo general, usamos funciones de flecha como parámetros. Y estas funciones de flecha pueden contener verificaciones de condición como item => item > 21. Otro parámetro opcional es el index que representa el índice de iteración actual. El .find() ejecuta la función de flecha en cada elemento del array. Por lo tanto, proporciona el iterador como argumento de la función de flecha para ayudar con más verificaciones condicionales.
Valor devuelto
.find() es un poco diferente de las funciones indexOf(), includes() de javascript. Devuelve el valor del elemento si se encuentra, de lo contrario, la función devuelve indefinido.
Soporte del navegador
Al igual que la función .includes(), .find() funciona en casi todos los navegadores web excepto en Internet Explorer. Por lo tanto, debemos asegurarnos de que nuestro proyecto no sea compatible con IE antes de planificar el uso de dichas funciones para las operaciones de Array.
Uso
Consulte el siguiente uso en un array.
let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.find(i => i > 20));
console.log(age.find(i => i > 21))
Producción :
21
43
Puede que nos sorprenda un poco la salida de age.find(i => i > 21), ya que devuelve 43 en lugar de 23, que era el siguiente número más alto a 21 en la age formación. Tenga en cuenta que la función .find() devuelve el siguiente elemento que satisface la condición mencionada en la función de array en orden cronológico. Para buscar un elemento con un bloque if, podemos utilizar el siguiente código.
function findPeerAge(myAge) {
let age = [21, 43, 23, 1, 34, 12, 8];
if (age.find(i => (i === myAge))) {
return true;
} else {
return false;
}
}
findPeerAge(23);
findPeerAge(40);
true
false
Uso de la función .filter() para buscar elementos en un array en JavaScript
La función .filter() se utiliza principalmente en operaciones de procesamiento de matrices. Especialmente cuando se trata de filtrar elementos, que satisfacen un criterio, fuera de un array. Devuelve un array de elementos que satisfacen los criterios definidos en la función pasada como argumento.
Sintaxis
Sigue la misma sintaxis que Array.find().
.filter((keyword) => {/* Some condition checks */})
.filter((keyword, index) => {/* Some condition checks */})
Parámetro
La función Array.filter() acepta una función en línea o una función de flecha como parámetro. La función de flecha mantendrá los criterios de filtrado. La función .filter() ejecuta la función de flecha en cada elemento del array y devuelve los elementos que satisfacen las condiciones mencionadas en la función de flecha. La función de flecha tendrá la keyword como entrada y la iteración actual como index.
Valor devuelto
A diferencia de las funciones de búsqueda de matrices que hemos visto hasta ahora, .filter() devuelve un array que contiene los elementos que cumplen las condiciones mencionadas en la función de flecha. Si se encuentra el elemento, el array devuelta contendrá los elementos necesarios; de lo contrario, la función devolverá un array vacía.
Soporte del navegador
La función .filter() es compatible con todos los navegadores, incluido Internet Explorer. Por lo tanto, puede utilizar la función .filter() sin preocuparse por el soporte esperado del navegador.
Uso: el uso de esta función es el siguiente
let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.filter(i => i > 20));
console.log(age.filter(i => i > 21));
Producción :
[21, 43, 23, 34]
[43, 23, 34]
Como vemos en el resultado, la función filter() devuelve un array. Si tenemos que buscar un elemento en un array, podemos usar la función filter() como se muestra en el siguiente ejemplo de código. Usamos el atributo .length del array devuelto por la función filter() para determinar si puede encontrar el elemento o no. Si la función devuelve un array vacía, significa que no pudo encontrar la palabra clave de búsqueda.
function findAge(myAge) {
let age = [21, 43, 23, 1, 34, 12, 8];
if (age.filter(i => (i === myAge)).length) {
return true;
} else {
return false;
}
}
findAge(23);
findAge(40);
Producción :
true
false
Uso de bucle simple for para buscar un elemento
Podemos encontrar un elemento en un array con los métodos básicos de javascript, la condición if y el bucle for. El siguiente código devolverá verdadero si se encuentra el elemento; de lo contrario, devolverá falso. Si hay más de una ocurrencia del mismo elemento, la función devuelve solo la primera coincidencia.
function findAge(myAge, ageAry) {
let elementFound = false;
for (let i = 0; i < ageAry.length; i++) {
if (ageAry[i] === myAge) {
return true;
}
}
return elementFound;
}
let srcArray = [21, 43, 23, 1, 34, 12, 8];
findAge(23, srcArray);
findAge(40, srcArray);
findAge(8, srcArray);
findAge(23, srcArray);
Producción :
true
false
true
true
Nota
- Las funciones
.indexOf(),.includes()buscan una coincidencia exacta de elementos. No podemos usarlo para buscar cadenas parciales. Significa proporcionar parte de un elemento ya que el parámetro de búsqueda no funcionará. - Podemos implementar la búsqueda de elementos parciales con las funciones
Array.filter()yArray.find()ya que nos permiten definir de forma personalizada los criterios de búsqueda.