Tabla de búsqueda de JavaScript

En la publicación de hoy, aprenderemos a crear una tabla de búsqueda de forma sencilla en JavaScript.

Una tabla de búsqueda en JavaScript

Una tabla de búsqueda es una matriz que reemplaza el cálculo del tiempo de ejecución con una operación de indexación de matriz más simple en el procesamiento de datos. El proceso se llama direccionamiento directo. JavaScript usa objetos para funciones de búsqueda.

Este es el famoso algoritmo utilizado para aumentar el rendimiento de las consultas de resultados de búsqueda. Entendámoslo con el siguiente ejemplo.

Supongamos que ejecuta un sitio web de comercio electrónico cuya función principal es enumerar productos. Según los filtros seleccionados por el usuario, muestre el precio de un producto.

Consultar esta salida reduce el rendimiento cada vez que se accede al servidor. Puede indexar los productos en función de los filtros más utilizados para solucionar este problema.

const DBProductArray = [
  {Color: 'Red', Size: 'Small', Price: '$450'},
  {Color: 'Red', Size: 'Medium', Price: '$460'},
  {Color: 'Red', Size: 'Large', Price: '$460'},
  {Color: 'Red', Size: 'Extra-Large', Price: '$470'},
  {Color: 'White', Size: 'Small', Price: '$650'},
  {Color: 'White', Size: 'Medium', Price: '$660'},
  {Color: 'White', Size: 'Large', Price: '$670'},
  {Color: 'White', Size: 'Extra-Large', Price: '$680'}
];

const lookupMap = {};

Tenemos un DBProductArray en el ejemplo anterior debido a la operación List API del servidor. Esta matriz contiene información del producto, como Color, Size y Price del producto.

Dependiendo de los filtros elegidos por el usuario final, necesitamos mostrar la información de Price. Para acelerar la búsqueda, crearemos una tabla de consulta que tenga información de Color y Size como key e información de Price como value.

const arrayLength = DBProductArray.length;
for (i = 0; i < arrayLength; i++) {
  var record = DBProductArray[i];

  if (typeof lookupMap[record.Color] === 'undefined')
    lookupMap[record.Color] = {};

  lookupMap[record.Color][record.Size] = record.Price;
}
console.log(lookupMap);

Producción :

{
  Red: {
    Extra-Large: "$470",
    Large: "$460",
    Medium: "$460",
    Small: "$450"
  },
  White: {
    Extra-Large: "$680",
    Large: "$670",
    Medium: "$660",
    Small: "$650"
  }
}

El código anterior recorre el DBProductArray y verifica si la información de color está allí. Creamos el color como una clave para los objetos anidados si existe.

El objeto anidado contiene size como clave y price como valor. Ahora puede ver la información de precios de productos seleccionados sin consultar la base de datos, lo que ahorra tiempo de respuesta y acelera el rendimiento.

const selectedColor = 'White';
const selectedSize = 'Large';
console.log(lookupMap[selectedColor][selectedSize]);

Intente ejecutar el fragmento de código anterior en cualquier navegador que admita JavaScript; mostrará el siguiente resultado.

Producción :

"$670"

Manifestación