En este articulo veremos como realizar búsquedas en un array o arreglo usando JavaScript, para esto usaremos los métodos find y filter
Creando un arreglo (Array)
Primero voy a escribir un poco de código para preparar un array en donde podas practicar. Crea un archivo llamado mascota.js y coloca este código:
// Clase
class Mascota {
constructor(nombre, especie) {
this.nombre = nombre;
this.especie = especie
}
}
function CrearArray()
{
const hank = new Mascota("Hank", "Perro");
const tom = new Mascota("Tom", "Gato");
const ginger = new Mascota("Ginger", "Gato");
return [hank, tom, ginger];
}
En el código anterior definimos una clase y luego una función que regresa un array con objetos de la clase Mascota.
Como buscar elementos en un Array de JS
En el código anterior creamos un array que tiene 3 mascotas, en las cuales una es un perro. Entonces vamos a crear una función que busque al perro dentro del arreglo:
function BuscarPerro( )
{
//Crear un array|
let mascotas = CrearArray();
//Buscar al perro
const perro = mascotas.find((m) => m.especie === "Perro");
console.log("El perro es: " + perro.nombre );
}¿Como funciona?, los arreglos en JS tienen una función llamada find, la cual puede ejecutar función anónima que recibe como parámetro un elemento de arreglo y se ejecuta para todos los elementos del arreglo, cuando esta función anónima regresa True por primera vez, entonces el ciclo se interrumpe y ese elemento se regresa como el elemento encontrado.
En el código anterior, el parámetro es m y reviso su especie para encontrar al perro. Si la sintaxis te parece un poco extraña o difícil de entender, entonces debes leer este articulo sobre las funciones flecha de JS.
Como filtrar elementos en un Array de JS
Ahora vamos a usar el mismo arreglo que definimos al inicio, pero ahora vamos a filtrarlo y obtener otro arreglo que contenga solo gatos:
function BuscarGatos()
{
let mascotas = CrearArray();
const gatos = mascotas.filter((m) => m.especie === "Gato");
console.log("Los gatos son:")
gatos.forEach(function (item) {
console.log(item.nombre);
});
}Ahora usamos la función filter, que está disponible en todas las variables Array de JS, y se usa de la misma forma que find, pero con la diferencia que esta no regresa un único valor, sino que regresa otro arreglo con todos los elementos que regresaron True al ejecutar la función anónima.
Como regresó un arreglo, entonces use la función forEach del arreglo para recorrerlo e imprimir todos sus valores en la consola.