Comprobar si un elemento está dentro de un Array JavaScript

En artículos anteriores tuvimos la oportunidad de estudiar el manejo de Arrays o Listas en JavaScript, más sin embargo el uso de estos es muy amplio debido a que son estructuras que usamos muy frecuente en el desarrollo de aplicaciones Web.

Es por ello que en este artículo nos centraremos en como podemos comprobar si un elemento existe dentro de un Array de JavaScript.

¿Para que nos puede servir?

Para muchas cosas, todo depende de lo que estés realizando en tu proyecto, lo más común es validar si un elemento existe en un array para no incluirlo nuevamente.

Ejemplo de como comprobar si un elemento existe en un Array haciendo uso de JavaScript Nativo:

<script>
var frutas = ["Pera", "Manzana", "Uva", "Mango"];
 var valor = "Manzana";
 for (var i = 0; i < frutas.length; i++) {
 if(valor==frutas[i]){
 console.log('Si existe');
 break;
 }
 }
</script>

En el código anterior validamos todas las posiciones del array con el valor de nuestra variable y si encontramos una coincidencia entre cualquiera de sus posiciones y nuestra variable informamos con un mensaje y cerramos el ciclo.

Mejorando el código haciendo uso de una función:

<script>

var frutas = ["Pera", "Manzana", "Uva", "Mango"];
 
console.log(Validar_Array('Piña', frutas))
 
function Validar_Array(valor, arr) {
 var b=false;
 for (var i = 0; i < arr.length; i++) {
 if(valor==arr[i]){
 b = true;
 break;
 }
 }
 return b;
}
</script>

En el código anterior hacemos uso de una función que permite pasar el valor a validar y el array devolviendo true o false dependiendo el valor que pasemos, por lo cual sería re utilizable en todo nuestro código JavaScript.

Validar Haciendo uso de JQuery

Todos los que hemos tenido la oportunidad de usar JQuery sabemos las ventajas que esta librería tiene al momento de manipular los elementos de DOM y optimizar nuestro código JavaScript, veamos:

<script>
var frutas = ["Pera", "Manzana", "Uva", "Mango"];
console.log(Validar_Array('Uva', frutas))
function Validar_Array(valor, Arr) {
 var b=false;
 if($.inArray(valor, Arr)==-1){
 b=false;
 }else{
 b=true;
 }
 return b;
}
</script>

Si nos damos cuenta dejamos de usar el cilclo for y tan solo validamos con un condicional y el método $.inArray() de JQuery a nuestra función, sin duda mucho más cómodo y optimizado.

Este método devolverá -1 si no encuentra coincidencia con nuestro valor dentro del Array y en caso de encontrar un valor igual devolverá el index del mismo.