En JavaScript, hay varias formas de verificar si una matriz incluye un elemento. Siempre puedes usar el bucle for o Array.indexOf() pero ES6 ha agregado muchos métodos más útiles para buscar a través de una matriz y encontrar lo que está buscando con facilidad.
indexOf() Método
La forma más sencilla y rápida de verificar si un elemento está presente en una matriz es usando el Array.indexOf() método. Este método busca en la matriz el elemento dado y devuelve su índice. Si no se encuentra ningún elemento, devuelve -1.
const fruits = ['🍎', '🍋', '🍊', '🍇', '🍍', '🍐'];
fruits.indexOf('🍋'); // 1 (true)
fruits.indexOf('🍍'); // 4 (true)
fruits.indexOf('🍌'); // -1 (false)
Por defecto, el indexOf() El método comienza a buscar desde el principio de la matriz y se detiene al final de la matriz. Pero puede pasar una posición como segundo argumento para omitir los elementos iniciales que se incluirán en la búsqueda:
fruits.indexOf('🍋', 1); // 1 (true)
fruits.indexOf('🍋', 4); // -1 (false)
Tenga en cuenta que si el elemento está presente más de una vez, el indexOf() método devuelve la posición de la primera aparición.
JavaScript nos proporciona un método de matriz alternativo llamado lastIndexOf() . Como sugiere el nombre, devuelve la posición de la última aparición de los elementos en una matriz. El lastIndexOf() comienza a buscar en la matriz desde el final y se detiene al principio de la matriz. También puede especificar un segundo parámetro para excluir elementos al final.
const fruits = ['🍎', '🍋', '🍊', '🍇', '🍍', '🍐'];
fruits.lastIndexOf('🍇'); // 3 (true)
fruits.lastIndexOf('🍉'); // -1 (true)
fruits.lastIndexOf('🍋', 4); // 1 (false)
Ambos indexOf() y lastIndexOf() realice una búsqueda que distinga entre mayúsculas y minúsculas y trabaje en todos los navegadores, incluidos IE9 y versiones posteriores.
includes() Método
El includes El método es parte de ES6 que también se puede usar para determinar si una matriz contiene un elemento específico. Este método devuelve true si el elemento existe en la matriz, y false que no. El includes() El método es perfecto para encontrar si el elemento existe o no como un valor booleano simple.
const fruits = ['🍎', '🍋', '🍊', '🍇', '🍍', '🍐'];
fruits.includes('🍇'); // true
fruits.includes('🍉'); // false
Por defecto, el includes() El método busca en toda la matriz. Pero también puede pasar un índice inicial como segundo parámetro para iniciar la búsqueda desde una posición diferente:
fruits.includes('🍐', 4); // true
fruits.includes('🍊', 4); // false
Además de las cadenas, el includes() El método también funciona muy bien con otros tipos primitivos:
const symbol = Symbol('🌟');
const types = ['Apple', 150, null, undefined, true, 29n, symbol];
// strings
types.includes('Apple'); // true
// numbers
types.includes(150); // true
// null
types.includes(null); // true
// undefined
types.includes(undefined); // true
// boolean
types.includes(true); // true
// BigInt
types.includes(29n); // true
// Symbol
types.includes(symbol); // true
Ambos includes() y indexOf() comportarse de manera diferente con NaN Propiedad ("No es un número"):
const arr = [NaN];
// ✅
arr.includes(NaN) // true
// ❌
arr.indexOf(NaN) // -1
El incudes() El método no funciona en IE y solo está disponible en navegadores modernos.
find() Método
A diferencia de includes() , el find() El método ejecuta la función especificada para cada elemento presente en la matriz. Devuelve el valor del primer elemento de un arreglo que pasa una determinada condición:
const fruits = ['🍎', '🍋', '🍊', '🍇', '🍍', '🍐'];
const value = fruits.find(elem => elem === '🍍');
console.log(value); // 🍍
Si no se encuentra ningún elemento donde la función devuelve true , el find() método devuelve un undefined valor:
const value = fruits.find(elem => elem === '🍉');
console.log(value); // undefined
También puede obtener el índice del elemento actual como segundo parámetro de la función. Esto también es útil cuando desea comparar el índice:
fruits.find((elem, idx) => elem === '🍇' && idx > 2); // 🍇
fruits.find((elem, idx) => elem === '🍋' && idx > 2); // undefined
Otro beneficio del find() método es que también funciona para otros tipos de datos como objetos:
const animals = [{ name: '🐱' }, { name: '🐒' }, { whale: '🐋' }];
const found = animals.find(elem => elem.name === '🐒');
console.log(found); // { name: '🐒' }
El find() El método solo funciona en navegadores modernos.
some() Método
El some() El método funciona bastante similar al find() excepto que devuelve un valor booleano true si el elemento se encuentra en la matriz, de lo contrario false .
const fruits = ['🍎', '🍋', '🍊', '🍇', '🍍', '🍐'];
fruits.some(elem => elem === '🍐'); // true
fruits.some(elem => elem === '🍓'); // false
El some() El método también se puede usar con una matriz y objetos:
const animals = [{ name: '🐱' }, { name: '🐒' }, { whale: '🐋' }];
animals.some(elem => elem.name === '🐒'); // true
animals.some(elem => elem.name === '🍊'); // false
Puedes usar el some() en todos los navegadores modernos y en IE9 y superior.
every() Método
El every() el método es como some() excepto que se asegura de que todos los elementos de la matriz pasen una determinada condición:
const numbers = [10, 99, 75, 45, 33];
// check if all elements are > 15
const result = numbers.every(num => num > 15);
console.log(result); // false
Igual que some() , el every() funciona en todos los navegadores modernos e IE9 y superior.
Búsqueda que no distingue entre mayúsculas y minúsculas
Ambos indexOf() y includes() los métodos distinguen entre mayúsculas y minúsculas. Esto significa que debe especificar la misma cadena de mayúsculas y minúsculas para buscar en la matriz:
const names = ['Ali', 'Atta', 'Alex', 'John'];
names.indexOf('atta'); // -1
names.includes('atta'); // false
Para realizar una búsqueda que no distinga entre mayúsculas y minúsculas, una forma es convertir cada cadena en la matriz a minúsculas usando el método map() y luego realizar la búsqueda:
const names = ['Ali', 'Atta', 'Alex', 'John'];
names.map(elem => elem.toLowerCase()).indexOf('atta'); // 1
names.map(elem => elem.toLowerCase()).includes('atta'); // true
Alternativamente, podría usar el some() método para hacer tanto la cadena en minúsculas como la comparación en un solo paso:
names.some(elem => elem.toLowerCase() === 'atta'); // true
Conclusión
En este artículo, analizamos 5 JavaScript diferentes Array 's para verificar si un elemento existe en una matriz.
Una pregunta legítima que puede hacer, ¿por qué necesitamos todos estos métodos en primer lugar? ¿Por qué no tener un solo método para buscar a través de una matriz?
Una respuesta simple sería que todos estos métodos están destinados a diferentes casos de uso:
- ¿Quiere saber la posición del elemento en la matriz? Utilice el
indexOf()método. - ¿Quiere encontrar la posición de la última aparición de un elemento? Hay un
lastIndexOf()método disponible para este propósito. - ¿Solo quiere saber si el elemento existe o no? Utilice el
includes()método. - ¿Quieres obtener también el elemento correspondiente? Usa el
find()método. - ¿Trabajar con una variedad de objetos? Usa el
some()método para verificar la existencia del elemento coincidente. - ¿Quiere realizar una búsqueda que no distinga entre mayúsculas y minúsculas? Usa
find()osome()método. - ¿Quiere comprobar si todos los elementos de una matriz cumplen una determinada condición? Usa el
every()método. - Y así sucesivamente.
Para obtener más información sobre las matrices de JavaScript y cómo usarlas para almacenar múltiples piezas de información en una sola variable, consulte este artículo.