logo

Búsqueda de matrices JavaScript con el método Array.find() [Ejemplos]

Este tutorial le mostrará cómo buscar matrices en JavaScript utilizando Array.find() y mostrar algunos ejemplos de código.

Matrices de JavaScript

Una matriz es un tipo de variable que contiene una lista ordenada de valores (o referencias a otras variables), denominadas elementos de matriz. Cada elemento tiene una posición en la matriz, llamada índice, y se puede acceder a él usando ese índice.

Tenemos un montón de cosas que puede hacer con las matrices de JavaScript.

Acceder a los elementos de la matriz por su índice es conveniente, pero no sirve de nada si no conoce el índice de un elemento, o incluso qué valores pueden estar en la matriz.

Métodos de matriz

Cuando una variable de matriz se declara en JavaScript, se le asigna el tipo de matriz . El tipo de una variable determina qué tipo de valor puede contener y qué se puede hacer con él.

Los métodos son funciones que están disponibles para el tipo de esa matriz y, cuando se les llama, hacen algo para o con la variable desde la que se llamaron.

Búsqueda de matrices con el método Array.find()

El Array.find() El método buscará la matriz que lo llamó, devolviendo valores que coincidan con una función de búsqueda dada ejecutando esa función para cada elemento de la matriz. Aquí está la sintaxis:

array.find(function(element, index, array){
    // Code to test each element in the array for a search match goes here
    // It should return TRUE for a match or FALSE otherwise
}, thisArg)

Tenga en cuenta que:

  • matriz puede ser cualquier variable de matriz que contenga cualquier valor
  • función(elemento, índice, matriz){} es una función que debe devolver un valor booleano que determina si un elemento de la matriz se considera una coincidencia para la búsqueda
    • elemento , índice y matriz son variables que están disponibles dentro de la función de búsqueda que hacen referencia al elemento actual que se está inspeccionando, el índice del elemento actual y la matriz misma
  • este argumento determina a qué variable apunta esto dentro de la función de búsqueda
  • buscar() devolverá el primero elemento al que la función de búsqueda devuelve un valor de VERDADERO y se detendrá allí

Ejemplos

Puede buscar matrices que contengan cualquier tipo de valor, en función de cualquier criterio que pueda expresar como una función de JavaScript que devuelve un valor booleano.

Buscando una matriz de cadenas

Los siguientes ejemplos muestran cómo se busca en una matriz de cadenas el primer elemento que tiene la primera letra f :

var pets = ['cat', 'dog', 'fish', 'parrot', 'frog'];

var found = pets.find(function(element, index, array){
    if(element[0] == 'f') return true;
    else return false;
});

console.log(found);

Como solo se devuelve la primera coincidencia, se enviará lo siguiente a la consola:

fish

Buscar una matriz de números

No es necesario proporcionar todos los parámetros si no se utilizan. Además, se pueden usar funciones de flecha de JavaScript para simplificar el código:

var numbers = [1, 5, 7, 3, 19, 6];

var found = numbers.find(element => element > 15);

console.log(found);

Arriba, se usa una función de flecha para encontrar el primer valor en la matriz con un valor mayor que 15 .

Buscar una matriz de objetos y usar varias condiciones

La función de búsqueda se puede declarar fuera de la llamada a find() método para que pueda usarse varias veces en diferentes búsquedas sin repetirlo.

También se pueden definir múltiples condiciones de búsqueda. Su función de búsqueda puede ser tan compleja como desee, siempre que devuelva un booleano valor.

const cakes = [
    {name: 'black forest', quantity: 2},
    {name: 'chocolate', quantity: 0},
    {name: 'banana', quantity: 5},
    {name: 'baklava', quantity: 6},
    {name: 'vanilla', quantity: 1}
];

function searchCakes(cake) {
    return cake.name[0] == 'b' && cake.quantity > 3;
}

console.log(cakes.find(searchCakes));

Esto devolverá el primer resultado que coincida con las dos condiciones de búsqueda en searchCakes() función:

{ "name": "banana", "quantity": 5 }