Générer des nombres aléatoires uniques en JavaScript à l’aide d’ensembles —

JavaScript est livré avec de nombreuses fonctions intégrées qui vous permettent d’effectuer de nombreuses opérations différentes. L’une de ces fonctions intégrées est la Math.random() méthode, qui génère un nombre aléatoire à virgule flottante qui peut ensuite être manipulé en entiers.

Cependant, si vous souhaitez générer une série de nombres aléatoires uniques et créer des effets plus aléatoires dans votre code, vous devrez trouver une solution personnalisée car le Math.random() la méthode à elle seule ne peut pas faire cela à votre place.

Dans cet article, nous allons apprendre comment contourner ce problème et générer une série de nombres aléatoires uniques en utilisant le Set objet en JavaScript, que nous pouvons ensuite utiliser pour créer des effets plus aléatoires dans notre code.

Note: Cet article suppose que vous savez comment générer des nombres aléatoires en JavaScript, ainsi que comment travailler avec des ensembles et des tableaux.

Générer une série unique de nombres aléatoires

L’un des moyens de générer une série unique de nombres aléatoires en JavaScript consiste à utiliser Set objets. La raison pour laquelle nous utilisons des ensembles est que les éléments d’un ensemble sont uniques. Nous pouvons générer et insérer de manière itérative des entiers aléatoires dans des ensembles jusqu’à ce que nous obtenions le nombre d’entiers souhaités.

Et comme les ensembles n’autorisent pas les éléments en double, ils vont servir de filtre pour supprimer tous les nombres en double qui y sont générés et insérés afin que nous obtenions un ensemble d’entiers uniques.

Voici comment nous allons aborder le travail :

1. Créer un Set objet.
2. Définissez le nombre de nombres aléatoires à produire et la plage de nombres à utiliser.
3. Générez chaque nombre aléatoire et insérez immédiatement les nombres dans le Set jusqu’à ce que Set en est rempli d’un certain nombre.

Voici un exemple rapide de la façon dont le code est assemblé :

function generateRandomNumbers(count, min, max) {
  // 1: Create a `Set` object
  let uniqueNumbers = new Set();
  while (uniqueNumbers.size < count) {
    // 2: Generate each random number
    uniqueNumbers.add(Math.floor(Math.random() * (max - min + 1)) + min);
  }
  // 3: Immediately insert them numbers into the Set...
  return Array.from(uniqueNumbers);
}
// ...set how many numbers to generate from a given range
console.log(generateRandomNumbers(5, 5, 10));

Le code crée un nouveau Set objet, puis générez et ajoutez les nombres aléatoires à l’ensemble jusqu’à ce que le nombre d’entiers souhaité soit inclus dans l’ensemble. La raison pour laquelle nous renvoyons un tableau est qu’il est plus facile de travailler avec lui.

Une chose à noter cependant est que le nombre d’entiers que vous souhaitez générer (représenté par count dans le code) doit être inférieur à la limite supérieure de votre plage plus un (représentée par max + 1 dans le code). Sinon, le code s’exécutera indéfiniment. Vous pouvez ajouter un if statement au code pour garantir que c’est toujours le cas :

function generateRandomNumbers(count, min, max) {
  // if statement checks that `count` is less than `max + 1`
  if (count > max + 1) {
    return "count cannot be greater than the upper limit of range";
  } else {
    let uniqueNumbers = new Set();
    while (uniqueNumbers.size < count) {
      uniqueNumbers.add(Math.floor(Math.random() * (max - min + 1)) + min);
    }
    return Array.from(uniqueNumbers);
  }
}
console.log(generateRandomNumbers(5, 5, 10));

Utilisation de la série de nombres aléatoires uniques comme index de tableau

C’est une chose de générer une série de nombres aléatoires. C’est une autre chose de les utiliser.

Être capable d’utiliser une série de nombres aléatoires avec des tableaux ouvre de nombreuses possibilités : vous pouvez les utiliser pour mélanger des listes de lecture dans une application musicale, échantillonner des données de manière aléatoire pour les analyser ou, comme je l’ai fait, mélanger les tuiles dans un jeu de mémoire.

Prenons le code du dernier exemple et travaillons dessus pour renvoyer des lettres aléatoires de l’alphabet. Tout d’abord, nous allons construire un tableau de lettres :

const englishAlphabets = [
  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
  'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
];

// rest of code

Ensuite nous map les lettres dans la plage de chiffres :

const englishAlphabets = [
  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
  'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
];

// generateRandomNumbers()

const randomAlphabets = randomIndexes.map((index) => englishAlphabets[index]);

Dans le code original, le generateRandomNumbers() La fonction est enregistrée sur la console. Cette fois, nous allons construire une nouvelle variable qui appelle la fonction afin qu’elle puisse être consommée par randomAlphabets:

const englishAlphabets = [
  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
  'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
];

// generateRandomNumbers()

const randomIndexes = generateRandomNumbers(5, 0, 25);
const randomAlphabets = randomIndexes.map((index) => englishAlphabets[index]);

Nous pouvons maintenant enregistrer la sortie sur la console comme nous le faisions auparavant pour voir les résultats :

const englishAlphabets = [
  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
  'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
];

// generateRandomNumbers()

const randomIndexes = generateRandomNumbers(5, 0, 25);
const randomAlphabets = randomIndexes.map((index) => englishAlphabets[index]);
console.log(randomAlphabets);

Et, quand on met le generateRandomNumbers() définition de la fonction, nous obtenons le code final :

const englishAlphabets = [
  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
  'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
];
function generateRandomNumbers(count, min, max) {
  if (count > max + 1) {
    return "count cannot be greater than the upper limit of range";
  } else {
    let uniqueNumbers = new Set();
    while (uniqueNumbers.size < count) {
      uniqueNumbers.add(Math.floor(Math.random() * (max - min + 1)) + min);
    }
    return Array.from(uniqueNumbers);
  }
}
const randomIndexes = generateRandomNumbers(5, 0, 25);
const randomAlphabets = randomIndexes.map((index) => englishAlphabets[index]);
console.log(randomAlphabets);

Ainsi, dans cet exemple, nous avons créé un nouveau tableau d’alphabets en sélectionnant au hasard quelques lettres dans notre englishAlphabets tableau.

Vous pouvez passer un argument de comptage de englishAlphabets.length au generateRandomNumbers fonction si vous souhaitez mélanger les éléments dans le englishAlphabets tableau à la place. C’est ce que je veux dire :

generateRandomNumbers(englishAlphabets.length, 0, 25);

Conclusion

Dans cet article, nous avons expliqué comment créer une randomisation en JavaScript en expliquant comment générer une série de nombres aléatoires uniques, comment utiliser ces nombres aléatoires comme index pour des tableaux, ainsi que quelques applications pratiques de la randomisation.

La meilleure façon d’apprendre quoi que ce soit dans le développement de logiciels est de consommer du contenu et de renforcer les connaissances que vous avez acquises grâce à ce contenu par la pratique. Alors ne vous arrêtez pas là. Exécutez les exemples de ce didacticiel (si vous ne l’avez pas déjà fait), jouez avec eux, proposez vos propres solutions et n’oubliez pas non plus de partager votre bon travail. Ciao !

(ouais)