Tableau associatif et table de hachage JavaScript

1. Créer un tableau associatif JavaScript à l’aide d’objets
2. Créer un tableau associatif JavaScript à l’aide de la fonction Map()
3. Utiliser l’objet JavaScript pour implémenter la table de hachage

Nous apprendrons à implémenter un tableau associatif JavaScript et une table de hachage à l’aide d’objets et de Map().

Bien que JavaScript n’ait pas de tableaux/tables de hachage associatifs, à l’exception des objets. Mais il existe d’autres façons de le faire.

Avant de plonger dans l’implémentation détaillée, il est nécessaire de connaître la différence entre tableau associatif, carte, dictionnaire et table de hachage. Bien que tous ces éléments soient utilisés pour contenir des données de paires clé-valeur, il existe toujours une différence.

1. Un tableau associatif est un concept de structure de données qui contient les données dans des paires (clé, valeur). Il est également connu sous le nom de type de données abstrait, tout comme les cartes et les dictionnaires. Ici, les indices sont des chaînes, pas des entiers. Il existe différentes manières d’implémenter un tableau associatif ; la table de hachage en fait partie.
2. Le dictionnaire contient également des données dans la paire (clé, valeur) identique au tableau associatif. Mais, ses indices sont des entiers.
3. La carte contient également des données dans des paires clé-valeur. Il se souvient de l’ordre d’insertion d’origine de la clé.
4. Une table de hachage consiste à organiser les données en mémoire à l’aide de la méthode de hachage. C’est l’un des moyens de simuler un tableau associatif.

Créer un tableau associatif JavaScript à l’aide d’objets

// 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'
};

Nous avons créé un objet JavaScript qui fonctionne comme un tableau associatif dans le code ci-dessus. Le firstname, name, age, city et email sont des clés (indices). Les valeurs sont Mehvish, Ashiq, 30, Multan, delfstack@example.com.

Supposons simplement que nous voulions ajouter une nouvelle paire clé-valeur en tant que phone:12334567. Pour cela, nous pouvons utiliser la fonction Object.assign(). Il copie le deuxième objet à la fin du premier objet.

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

Nous pouvons accéder à la valeur de chaque clé en ciblant les clés (indices). N’oubliez pas que les indices sont des chaînes, pas des nombres. Donc, vous ne pouvez pas accéder comme person[0] ici (vous pouvez utiliser person[0] si vous utilisez des dictionnaires).

// 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

On peut imprimer le tableau associatif complet en utilisant la boucle for.

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

Production :

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

La manière la plus optimisée d’imprimer l’ensemble du tableau associatif est la méthode Object.entries() qui prend un paramètre de type de données d’objet. Vous pouvez lire ceci pour plus de fonctions d’objet.

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

Production :

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

Créer un tableau associatif JavaScript à l’aide de la fonction Map()

// 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']
]);

En utilisant la méthode get(key), nous pouvons obtenir une valeur particulière.

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

Afficher les paires clé-valeur de tableau associatif entier.

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

Production :

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

Imprimer uniquement les clés à l’aide de la fonction keys().

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

Production :

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

Obtenez des valeurs uniquement à l’aide de la fonction values().

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

Production :

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

On peut utiliser la delete(key) pour supprimer un élément ; il renvoie true s’il a été supprimé avec succès. Le has(key) renvoie true si un élément est associé à la clé donnée, tandis que clear() supprime toutes les paires clé-valeur.

Pour une compréhension détaillée, vous pouvez visiter cette page. Si vous recherchez une implémentation de table de hachage, vous pouvez utiliser la fonction Map(), mais nous utilisons un objet JavaScript pour implémenter la table de hachage.

Utiliser l’objet JavaScript pour implémenter la table de hachage

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);
  }
}

Testons-le en utilisant le code suivant.

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

Il donne les résultats suivants.

3
"Mehvish"

Le hasOwnProperty est utilisé pour vérifier si une clé appartient à l’objet item. En d’autres termes, elle renvoie true si la propriété donnée appartient directement à l’objet item.

Le set, get et has ne sont qu’une forme imitée des fonctions de Object.