JavaScript Nachschlagetabelle

Im heutigen Beitrag lernen wir, wie man auf einfache Weise in JavaScript eine Nachschlagetabelle erstellt.

Eine Nachschlagetabelle in JavaScript

Eine Nachschlagetabelle ist ein Array, das die Laufzeitberechnung durch eine einfachere Array-Indizierungsoperation in der Datenverarbeitung ersetzt. Der Vorgang wird direkte Adressierung genannt. JavaScript verwendet Objekte für Suchfunktionen.

Dies ist der berühmte Algorithmus, der verwendet wird, um die Leistung von Suchergebnisabfragen zu erhöhen. Lassen Sie es uns anhand des folgenden Beispiels verstehen.

Angenommen, Sie betreiben eine E-Commerce-Website, deren Hauptfunktion darin besteht, Produkte aufzulisten. Zeigen Sie basierend auf vom Benutzer ausgewählten Filtern den Preis eines Produkts an.

Das Abfragen dieser Ausgabe verringert die Leistung bei jedem Zugriff auf den Server. Sie können die Produkte basierend auf den am häufigsten verwendeten Filtern indizieren, um dieses Problem zu lösen.

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

Wir haben im obigen Beispiel ein DBProductArray aufgrund der List-API-Operation des Servers. Dieses Array enthält Produktinformationen wie Produkt Color, Size und Price.

Abhängig von den vom Endbenutzer gewählten Filtern müssen wir die Price-Informationen anzeigen. Um die Suche zu beschleunigen, erstellen wir eine Nachschlagetabelle mit Informationen zu Color und Size als key und Informationen zu Price als 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);

Ausgabe:

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

Der obige Code durchläuft das DBProductArray und prüft, ob die Farbinformationen vorhanden sind. Wir erstellen die Farbe als Schlüssel für die verschachtelten Objekte, falls vorhanden.

Das verschachtelte Objekt enthält als Schlüssel size und als Wert price. Sie können jetzt Preisinformationen für ausgewählte Produkte anzeigen, ohne die Datenbank abzufragen, was die Reaktionszeit verkürzt und die Leistung beschleunigt.

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

Versuchen Sie, das obige Code-Snippet in jedem Browser auszuführen, der JavaScript unterstützt. es wird das folgende Ergebnis zeigen.

Ausgabe:

"$670"

Demo