Table de recherche JavaScript

Dans l’article d’aujourd’hui, nous allons apprendre à créer une table de recherche en utilisant une méthode simple en JavaScript.

Une table de recherche en JavaScript

Une table de recherche est un tableau remplaçant le calcul d’exécution par une opération d’indexation de tableau plus simple dans le traitement des données. Le processus est appelé adressage direct. JavaScript utilise des objets pour les fonctions de recherche.

Il s’agit du célèbre algorithme utilisé pour augmenter les performances des requêtes de résultats de recherche. Comprenons-le avec l’exemple suivant.

Supposons que vous gérez un site Web de commerce électronique dont la fonction principale est de répertorier les produits. En fonction des filtres sélectionnés par l’utilisateur, affichez le prix d’un produit.

L’interrogation de cette sortie diminue les performances à chaque accès au serveur. Vous pouvez indexer les produits en fonction des filtres les plus utilisés pour résoudre ce problème.

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 = {};

Nous avons un DBProductArray dans l’exemple ci-dessus en raison de l’opération List API du serveur. Ce tableau contient des informations sur le produit telles que la Color, la Size et le Price.

En fonction des filtres choisis par l’utilisateur final, nous devons afficher l’information Price. Pour accélérer la recherche, nous allons créer une table de correspondance contenant les informations Color et Size comme key et les informations Price comme 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);

Production:

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

Le code ci-dessus parcourt le DBProductArray et vérifie si les informations de couleur sont là. Nous créons la couleur comme clé pour les objets imbriqués si elle existe.

L’objet imbriqué contient size comme clé et price comme valeur. Vous pouvez désormais afficher les informations de tarification des produits sélectionnés sans interroger la base de données, ce qui permet de gagner du temps de réponse et d’accélérer les performances.

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

Essayez d’exécuter l’extrait de code ci-dessus dans n’importe quel navigateur prenant en charge JavaScript. il affichera le résultat ci-dessous.

Production:

"$670"

Démo