Técnicas para buscar con JavaScript

A la hora de programar, la interacción con los datos es una tarea habitual. El manejo de datos es una parte importante de los proyectos que debemos aprender a dominar. Un aspecto fundamental en este campo es conocer las herramientas y características disponibles en cada lenguaje para lograr mayor eficiencia. En el desarrollo moderno basado en JavaScript, la búsqueda de información resulta una tarea fundamental. A menudo necesitamos encontrar elementos dentro de strings, arrays, objetos JSON, o arrays de objetos JSON. Y también pueden existir otras variantes o combinaciones que deberemos aprender a reconocer y saber resolver.

En este artículo, exploraremos las técnicas más eficientes y modernas para realizar búsquedas en estos formatos, optimizando tanto para rendimiento como para claridad de código.

Búsqueda en strings

JavaScript ofrece varios métodos para buscar dentro de textos (strings). Los métodos más usados son includes(), indexOf(), startsWith() y match(). Cada uno tiene casos de uso específicos.

A continuación veremos cada uno y analizaremos los ejemplos y casos de uso.

includes()

Este método determina si una cadena de texto contiene otra cadena, devolviendo un valor booleano (true o false).

Veamos a continuación un ejemplo de código:

const frase = "JavaScript es increíble";
const resultado = frase.includes("increíble"); // true

En el ejemplo anterior tenemos dos constantes. La primera contiene el texto sobre el cuál se buscará, por ejemplo una frase, y la segunda es el resultado. En esa constante de resultado se aplica el método includes() a la constante frase y se pasa como parámetro el valor a buscar, en este caso el string "increíble".

El resultado puede ser true o false. En este caso, al encontrarse el valor buscado obtenemos true.

indexOf()

Es un método clásico de JavaScript y lleva muchos años formando parte del lenguaje. Devuelve la posición en la que aparece la subcadena dentro de la cadena original. Si no se encuentra, retorna -1.

A continuación lo veremos en acción en un ejemplo:

const frase = "JavaScript es increíble";
const resultado = frase.indexOf("es"); // 11

Nuevamente, tenemos dos constantes. La primera representa el texto sobre el cuál se buscará y la segunda es el resultado. En esa segunda constante se empela el método indexOf() a la constante frase y se pasa como parámetro el valor a buscar, en este caso el string "es".

El resultado, en este caso, es un número que indica la posición de la primera aparición de la subcadena buscada sobre la frase. Para el ejemplo anterior obtenemos 11, porque se comienza a contar desde 0 y se toma como posición el primer caracter que coincida con el substring buscado (en este caso la letra e).

startsWith() y endsWith()

Estos métodos son más modernos que el anterior y se han agregado a partir de ES6 (ECMAScript 2015). Permiten verificar si una cadena empieza o termina con una subcadena específica.

Veamos unos ejemplos en código:

const frase = "JavaScript es increíble";
const empiezaCon = frase.startsWith("JavaScript"); // true
const terminaCon = frase.endsWith("increíble"); // true

Una vez más definimos la constante con el texto inicial y en este caso creamos dos constantes más. Una para verificar un texto al principio, empleando startsWith(), y otra para chequear el texto al final con endsWith().

match()

Este método es un clásico de JavaScript y tiene varias décadas dentro del lenguaje. Su funcionalidad se basa en devolver un array con todas las coincidencias cuando se usa con expresiones regulares.

Veamos un ejemplo aplicado:

const frase = "Los números son 100, 200 y 300";
const coincidencias = frase.match(/\d+/g); // ["100", "200", "300"]

En este ejemplo se buscan las coincidencias numéricas incluídas en el texto, aplicando una expresión regular sobre la constante frase. Para este ejemplo, el resultado es un array con los números encontrados.

Búsqueda en arrays

Los arrays en JavaScript ofrecen varios métodos modernos y eficientes para buscar elementos: find(), filter(), includes(), y some(). Varios de ellos se incorporaron a partir de las novedades de ES6 (ECMAScript 2015).

find()

Este método devuelve el primer elemento del array que cumpla con una condición.

En el siguiente ejemplo comprenderemos la potencia de este método:

const numeros = [10, 20, 30, 40, 50];
const resultado = numeros.find(num => num > 30); // 40

Se define un array con números y mediante find() se establece una búsqueda donde se indica una condición para encontrar el primer valor. En este caso el primero que coincide con ser mayor a 30 es el número 40. Si no se hubieran encontrado coincidencias el resultado sería undefined.

filter()

Este método resulta muy útil para diversas situaciones. Mediante filter() podremos obtener un array con todos los elementos que cumplan con una condición.

Siguiendo la lógica que venimos aplicando veamos un ejemplo:

const numeros = [10, 20, 30, 40, 50];
const resultado = numeros.filter(num => num > 30); // [40, 50]

A diferencia de find(), con filter() obtenemos un array con todas las coincidencias. Dependiendo de las necesidades de nuestro código, deberemos elegir uno u otro.

includes()

Este método permite verificar si un array contiene un valor específico.

Un ejemplo simple aplicado podría ser:

const frutas = ["manzana", "banana", "naranja"];
const resultado = frutas.includes("banana"); // true

En este caso buscamos sobre el array establecido en la constante frutas, si se encuentra "banana". Si el término se encuentra obtenemos true, de lo contrario false.

some()

Este método nos devuelve true si al menos un elemento del array cumple con una condición.

El ejemplo con un array de números es el siguiente:

const numeros = [10, 20, 30, 40, 50];
const resultado = numeros.some(num => num > 40); // true

Como el número 40 se encuentra dentro del array numeros, el resultado que obtener es true.

Búsqueda en JSON

Para buscar dentro de un objeto JSON, utilizamos técnicas similares a la búsqueda en objetos. Podemos acceder a las claves y valores directamente usando las estructuras de control o el método Object.keys().

Observemos el siguiente ejemplo:

const persona = {
  nombre: "Rafael",
  edad: 25,
  ciudad: "Madrid"
};

// Buscar una clave
const claveBuscada = "edad";
const existe = Object.keys(persona).includes(claveBuscada); // true

// Buscar un valor
const valorBuscado = "Rafael";
const resultado = Object.values(persona).includes(valorBuscado); // true

En este caso tenemos definida la constante persona. Definimos un key sobre el cual buscar, en este caso la edad. Mediante Object.keys() chequeamos que esté esa clave y obtener true si es así (o de lo contrario false).

Con Object.values() trabajamos sobre los valores del JSON. Para este caso también incorporamos el método includes() en la búsqueda. En el ejemplo anterior buscamos el nombre «Rafael». Y nos devuelve true si lo encuentra.

Podemos leer más sobre el método Object.keys() en la documentación de MDN.

Búsqueda en un array de JSON

Buscar en un array de objetos JSON es una tarea muy común en aplicaciones y sitios web. Podemos usar métodos como find(), filter(), y some() para realizar búsquedas más complejas.

find() en un array de JSON

Encuentra el primer objeto que cumpla con una condición específica.

Veamos un caso de uso:

const usuarios = [
  { nombre: "Rafael", edad: 25 },
  { nombre: "Dami", edad: 47 },
  { nombre: "Carlos", edad: 35 }
];

const usuario = usuarios.find(u => u.nombre === "Dami"); 
// { nombre: "Dami", edad: 47 }

En este caso nos devuelve el registro que cumple con el nombre "Dami".

filter() en un array de JSON

Este método sirve para filtrar. Devuelve todos los objetos que cumplan con una condición.

Siguiendo la línea de ejemplos veamos una adaptado a filter():

const usuarios = [
  { nombre: "Rafael", edad: 25 },
  { nombre: "Dami", edad: 47 },
  { nombre: "Carlos", edad: 35 }
];

const usuario = usuarios.filter(u => u.edad === 35); 
// [{ nombre: "Carlos", edad: 35 }]

En este caso el único registro que cumple es Carlos, que tiene 35 años. El resultado es un array de un elemento JSON con los datos de Carlos.

some() en un array de JSON

Este método nos permite verificar si al menos un objeto cumple con la condición.

Ejemplo:

const usuarios = [
  { nombre: "Rafael", edad: 25 },
  { nombre: "Dami", edad: 47 },
  { nombre: "Carlos", edad: 35 }
];

const usuario = usuarios.some(u => u.edad < 30); 
// true

Este caso devuelve true, ya que Rafael tiene menos de 30 años.

Búsqueda utilizando reduce()

Una técnica avanzada para realizar búsquedas complejas es el uso de reduce(), que permite acumular valores en una búsqueda más personalizada.

Ejemplo de código:

const productos = [
  { nombre: "Laptop", precio: 1000 },
  { nombre: "Mouse", precio: 20 },
  { nombre: "Teclado", precio: 30 }
];

const producto = productos.reduce((prev, curr) => {
  return curr.precio > prev.precio ? curr : prev;
});

console.log(producto); // { nombre: "Laptop", precio: 1000 }

En este caso obtenemos el producto de mayor precio, que es la Laptop.

En conclusión

JavaScript ofrece una amplia variedad de métodos modernos y eficientes para realizar búsquedas, tanto en strings, arrays, como en estructuras más complejas como JSON o arrays de JSON. Usar las técnicas correctas para cada caso garantiza no solo un código más eficiente, sino también más claro y mantenible.

Si te interesa aprender más sobre JavaScript dejame un comentario o escribeme un mensaje.

Más sobre Diseño y desarrollo Web

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.