JavaScript Assoziatives Array und Hash-Tabelle

1. JavaScript-Assoziativ-Array mit Objekten erstellen
2. JavaScript Assoziatives Array mit der Funktion Map() erstellen
3. JavaScript-Objekt zur Implementierung einer Hash-Tabelle verwenden

Wir lernen die Implementierung von assoziativen JavaScript-Arrays und Hash-Tabellen mit Objekten und Map().

Obwohl JavaScript keine assoziativen Arrays/Hash-Tabellen außer Objekten hat. Aber es gibt andere Möglichkeiten, dies zu tun.

Bevor Sie in die detaillierte Implementierung eintauchen, müssen Sie den Unterschied zwischen assoziativen Arrays, Karten, Wörterbüchern und Hash-Tabellen kennen. Obwohl alle von ihnen verwendet werden, um Schlüssel-Wert-Paar-Daten zu speichern, gibt es immer noch einen Unterschied.

1. Ein assoziatives Array ist ein Datenstrukturkonzept, das die Daten in Paaren (Schlüssel, Wert) enthält. Es wird auch als abstrakter Datentyp bezeichnet, genau wie Karten und Wörterbücher. Hier sind Indizes Strings, keine Integer. Es gibt verschiedene Möglichkeiten, ein assoziatives Array zu implementieren; Die Hash-Tabelle ist eine davon.
2. Das Dictionary enthält auch Daten in (Schlüssel, Wert)-Paaren, genau wie das assoziative Array. Aber seine Indizes sind ganze Zahlen.
3. Die Karte enthält auch Daten in Schlüssel-Wert-Paaren. Es erinnert sich an die ursprüngliche Einfügereihenfolge des Schlüssels.
4. Bei einer Hash-Tabelle geht es darum, Daten im Speicher mithilfe der Hash-Methode anzuordnen. Dies ist eine der Möglichkeiten, ein assoziatives Array zu simulieren.

JavaScript-Assoziativ-Array mit Objekten erstellen

// first way to create associative array
const person = [];
person['firstname'] = 'Mehvish';
person['lastname'] = 'Ashiq';
person['age'] = 30;
person['city'] = 'Multan';
person['email'] = 'delfstack@example.com';

// second way to create associative array
const person = {
  firstname: 'Mehvish',
  lastname: 'Ashiq',
  age: 30,
  city: 'Multan',
  email: 'delfstack@example.com'
};

Wir haben ein JavaScript-Objekt erstellt, das im obigen Code als assoziatives Array fungiert. Schlüssel (Indizes) sind firstname, lastname, age, city und email. Die Werte sind Mehvish, Ashiq, 30, Multan, delfstack@example.com.

Nehmen Sie einfach an, dass wir ein neues Schlüssel-Wert-Paar als phone:12334567 hinzufügen möchten. Dafür können wir die Funktion Object.assign() verwenden. Es kopiert das zweite Objekt an das Ende des ersten Objekts.

// Here the second object is {phone:12334567}
// Here the first object is person
Object.assign(person, {phone: 12334567});

Wir können auf den Wert jedes Schlüssels zugreifen, indem wir auf die Schlüssel (Indizes) abzielen. Denken Sie daran, dass die Indizes Zeichenketten sind, keine Zahlen. Sie können hier also nicht auf person[0] zugreifen (Sie können person[0] verwenden, wenn Sie Wörterbücher verwenden).

// to print in the browser
document.write(person.firstname);     // OUTPUT: Mehvish
document.write(person['firstname']);  // OUTPUT: Mehvish
document.write(person[0]);            // OUTPUT: undefined
// to print on console
console.log(person.firstname);  // OUTPUT: Mehvish
console.log(person[0]);         // OUTPUT: undefined

Wir können das vollständige assoziative Array mit der for-Schleife drucken.

// print complete associative array using for look
for (var key in person) {
  var value = person[key];
  document.write(value);
  document.write(' ');
}

Ausgabe:

"[firstname: Mehvish]"
"[lastname: Ashiq]"
"[age: 30]"
"[city: Multan]"
"[email: delfstack@example.com]"
"[phone: 12334567]"

Die optimiertere Art, das gesamte assoziative Array zu drucken, ist die Methode Object.entries(), die einen Parameter des Objektdatentyps akzeptiert. Sie können dies für weitere Objektfunktionen lesen.

// print complete associative array using for look
let completeAssociateArray = Object.entries(person);
console.log(completeAssociateArray);

Ausgabe:

[["firstname", "Mehvish"], ["lastname", "Ashiq"], ["age", 30], ["city", "Multan"], ["email", "delfstack@example.com"], ["phone", 12334567]]

JavaScript Assoziatives Array mit der Funktion Map() erstellen

// first way to create associative array using Map function
const person = new Map();
person.set('firstname', 'Mehvish');
person.set('lastname', 'Ashiq');
person.set('age', 30);
person.set('city', 'Multan');
person.set('email', 'delfstack@example.com');

// second way to create associative array using Map function
const person = new Map([
  ['firstname', 'Mehvish'], ['lastname', 'Ashiq'], ['age', 30],
  ['city', 'Multan'], ['email', 'delfstack@example.com']
]);

Mit der Methode get(key) können wir einen bestimmten Wert erhalten.

person.get('city');  // output is "Multan"

Zeigen Sie ganze assoziative Array-Schlüssel-Wert-Paare an.

for (const [key, value] of person.entries()) {
  console.log(key + ' = ' + value)
}

Ausgabe:

"firstname = Mehvish"
"lastname = Ashiq"
"age = 30"
"city = Multan"
"email = delfstack@example.com"

Drucken Sie nur Schlüssel mit der Funktion keys().

for (const key of person.keys()) {
  console.log(key)
}

Ausgabe:

"firstname"
"lastname"
"age"
"city"
"email"

Werte nur mit der Funktion values() abrufen.

for (const value of person.values()) {
  console.log(value)
}

Ausgabe:

"Mehvish"
"Ashiq"
30
"Multan"
"delfstack@example.com"

Wir können die delete(key) verwenden, um ein Element zu entfernen; es gibt true zurück, wenn es erfolgreich gelöscht wurde. has(key) gibt true zurück, wenn ein Element mit dem angegebenen Schlüssel verknüpft ist, während clear() alle Schlüssel-Wert-Paare entfernt.

Für ein detailliertes Verständnis können Sie diese Seite besuchen. Wenn Sie nach einer Hashtabellenimplementierung suchen, können Sie die Funktion Map() verwenden, aber wir verwenden ein JavaScript-Objekt, um die Hashtabelle zu implementieren.

JavaScript-Objekt zur Implementierung einer Hash-Tabelle verwenden

var ht = new HashTable({firstname: 'Mehvish', lastname: 'Ashiq', age: 30});

function HashTable(person) {
  this.size = 0;
  this.item = {};
  for (var p in person) {
    if (person.hasOwnProperty(p)) {
      this.item[p] = person[p];
      this.size++;
    }
  }

  this.set =
      function(key, value) {
    var previousItem = undefined;
    if (this.has(key)) {
      previousItem = this.item[key];
    } else {
      this.size++;
    }
    this.item[key] = value;
    return previousItem;
  }

      this.get =
          function(key) {
    return this.has(key) ? this.item[key] : undefined;
  }

          this.has = function(key) {
    return this.item.hasOwnProperty(key);
  }
}

Testen wir es mit dem folgenden Code.

console.log(ht.size);
console.log(ht.get('firstname'));

Es liefert die folgenden Ergebnisse.

3
"Mehvish"

Mit der hasOwnProperty wird überprüft, ob ein Schlüssel zum item-Objekt gehört. Mit anderen Worten, es gibt true zurück, wenn die angegebene Eigenschaft direkt zum item-Objekt gehört.

set, get und has sind nur eine nachgeahmte Form der Funktionen von Object.