Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>Базовая генерация в JS</a></li>

2 <li><a>Подбрасываем монету (true либо false)</a></li>

3 <li><a>Пример генерации с исключениями</a></li>

4 <li><a>Генерируем случайное и неповторяющееся число</a></li>

5 <li><a>Пару слов о криптографии</a></li>

6 </ul>При программировании на языкеJavaScript(JS) нередко нужно выполнить такую операцию, какгенерация случайных чисел. Это может понадобиться, когда в программу нужно привнести элемент случайности, причем не важно, о каком направлении разработки идет речь, будь то web-разработка, мобильная разработка или создание обычных десктопных приложений.

7 <a></a>Где конкретно востребована генерация:

8 <ul><li>в анимации;</li>

9 <li>при создании рандомной компьютерной музыки;</li>

10 <li>в процедуральном искусстве;</li>

11 <li>для вывода случайного изображения;</li>

12 <li>для рандомного выбора слов из списка, который создан заранее;</li>

13 <li>для создания API-ключей;</li>

14 <li>для вывода фрагментов текста;</li>

15 <li>при генерации паролей, случайных чисел и т. д.</li>

16 </ul>В реальности существуют разные способы генерации, выбор которых зависит от конкретного программного приложения. О них - наша статья.

17 <h2>Базовая генерация в JS</h2>

18 Наиболее простой способ получить random-число - это хорошо известный методMath.random(), который встроен в JavaScript.

19 Math.random()

20 Пример вывода:

21 0.5097055147211202

22 На практике методMath.random()всегда осуществляет возврат числа с плавающей точкой в диапазоне между 0 и 1. Технически, это число может быть и нулем, однако оно точно никогда не будет равно 1.

23 Так как метод очень популярен в использовании, его нередко помещают внутрь функции:

24 function show_random_number() { var random_number = Math.random(); // generate random number between 0 and 1 }Основной недостаток вышесказанного - функция будет создавать рандомное значение лишь в пределах весьма ограниченного диапазона. Но это не значит, что других путей генерации не существует.

25 Генерация между числами: максимальные и минимальные значения (max, min)

26 Для добавления данной функциональности без математики не обойтись.

27 Также никто не мешает сгенерировать рандомное целое число в диапазоне, включая максимальное и минимальное.

28 <h2>Подбрасываем монету (true либо false)</h2>

29 - Иногда нужно просто получить орел или решку, то есть, по сути, 0 либо 1. Для этого пригоди��ся простой код:

29 + Иногда нужно просто получить орел или решку, то есть, по сути, 0 либо 1. Для этого пригодится простой код:

30 function coinRandom() { return Math.floor(Math.random() * 2); } coinRandom();Если же надо получить конкретно true либо false, то код следует немного изменить:

31 function coinRandom() { return (Math.floor(Math.random() * 2) === 0); } coinRandom(); >falseТакже можно ассоциировать нужные слова со сторонами монеты, то есть вспоминаем пресловутые орел или решка (heads or tails).

32 function coinRandom() { return (Math.floor(Math.random() * 2) === 0) ? " heads" : " tails"; } coinRandom(); > tails<h2>Пример генерации с исключениями</h2>

33 Этот метод работает для ограниченного диапазона целых чисел. Создается массив (array) числовых значений, которые интересуют, далее осуществляется выборка.

34 var numPool = [ 1, 5, 9, 13 ], rand = numPool[Math.floor(Math.random() * numPool.length)];Можно все это сделать более динамичным, добавив массив с целыми числами, которые надо исключить, а также пустой массив с результатом фильтрации 1-го во 2-ой.

35 Потом следует:

36 <ul><li>создать цикл по массиву numPool;</li>

37 <li>выполнить проверку, существует ли случайное число в нашем массиве исключений excludePool;</li>

38 <li>поместить результат в массив filteredPool.</li>

39 </ul>По итогу отобразится случайное число из массива, который был отфильтрован.

40 <h2>Генерируем случайное и неповторяющееся число</h2>

41 Когда речь идет о небольших наборах чисел, можно поступить следующим образом:

42 <ul><li>создаем array, заполненный элементами;</li>

43 <li>тасуем эти элементы рандомным образом;</li>

44 <li>помещаем результаты в новый массив;</li>

45 <li>извлекаем перетасованные элементы 1 раз:</li>

46 </ul>Если же мы говорим о больших числовых наборах, то тут надо после создания заполнять array случайными целыми числами, причем следует отклонять любое число, которое раньше уже было сгенерировано:

47 В вышеописанном коде numReserve заполнен двенадцатью рандомными значениями в диапазоне от 0 до 1000. Числа потом можно получить из массива.

48 <h2>Пару слов о криптографии</h2>

49 Выше мы показали ряд методов, однако их будет недостаточно, если идет разговор о создании функций с криптографической защитой. Для этих целей можно задействовать Web Cryptography API и создать типизированный array:

50 То есть мы создаем массив, где есть восемь слотов, причем каждый из них способен содержать 16-битное беззнаковое целое число. Можно выбрать и другие варианты:

51 <ul><li>int16Array,</li>

52 <li>Int8Array,</li>

53 <li>Uint8Array,</li>

54 <li>Int32Array,</li>

55 <li>Uint32Array.</li>

56 </ul>Теперь мы можем заполнить array рандомными числами конкретного типа:

57 Пример выборки следующий:

58 У Web Cryptography API - хорошая поддержка в современных веб-браузерах, хотя иногда нужно использовать префиксы.

59 Хотите получить более глубокие знания по JavaScritpt? Обратите внимание на курсы по JS в Otus!

60 <a></a>При подготовке статьи использовались следующие материалы:

61 <ul><li>http://thenewcode.com/82/Recipes-for-Randomness-in-JavaScript;</li>

62 <li>https://habr.com/ru/company/ruvds/blog/534108/.</li>

63 </ul>