В этой статье мы рассмотрим, как генерировать случайные числа в JavaScript с помощью Math.random (), создав функцию, которую можно повторно использовать для самых разных целей, таких как загрузка случайных изображений, выбор случайного элемента из массива и генерация случайных цветов., буквы, строки, фразы и пароли.
Случайность в JavaScript
Всегда полезно иметь возможность добавить элемент случайности в свои программы. Возможно, вы захотите оживить свой веб-сайт, добавив несколько случайных стилей, сгенерировав случайную фразу или добавив элемент случайности в игру (например, они широко используются в этой игре Numble).
К сожалению, на самом деле очень сложно создать действительно случайное значение (если только у вас нет доступа к какому-то радиоактивному материалу... или к обезьяне с клавиатурой. Чтобы обойти это, языки программирования используют детерминированные методы для создания псевдослучайных чисел. Это числа, которые кажутся случайными, но на самом деле генерируются функциями, которые принимают начальные значения на основе таких событий, как время или положение указателя мыши.
В JavaScript есть randomфункция, которая является методом встроенного Mathобъекта. Стандарт ECMAScript не указывает, как эта функция должна генерировать случайное число, поэтому ее реализация остается на усмотрение поставщиков браузеров. На момент написания все основные браузеры в настоящее время используют алгоритм xorshift128+ в фоновом режиме для генерации псевдослучайных чисел.
Чтобы использовать его, просто введите, Math.random () и он вернет псевдослучайное десятичное число с плавающей запятой от 0 (включительно) до 1 (исключительно):
const x = Math.random () ;
Это можно представить в виде следующего неравенства:
0 ≤ x < 1
Но что, если вам нужно случайное число больше 1? Просто: все, что вам нужно сделать, это умножить на коэффициент масштабирования, чтобы увеличить его — например, умножение результата на 10 даст значение от 0 (включительно) до 10 (не включая):
const y = Math.random () *10
Причину этого можно увидеть, если обе части предыдущего неравенства умножить на 10:
0 ≤ y < 10
Но результатом по-прежнему является десятичное число с плавающей запятой. Что, если нам нужно случайное целое число? Просто: все, что нам нужно сделать, это использовать Math.floorфункцию для округления возвращаемого значения до целого числа, указанного ниже. Следующий код присвоит переменной случайное целое число от 0 до 9 включительно z:
const z = Math.floor (Math.random () *10)
Обратите внимание, что хотя мы умножаем на 10, возвращаемое значение увеличивается только до 9.
Мы можем обобщить этот метод, чтобы создать функцию, которая будет возвращать случайное целое число от 0 до, но не включая число, указанное в качестве аргумента:
function randomInt (number) {
return Math.floor (Math.random () * (number))
}
Теперь мы можем использовать эту функцию для возврата случайной цифры от 0 до 9:
const randomDigit= randomInt (10)
Итак, теперь у нас есть способ создать случайное целое число. Но как насчет случайного целого числа между двумя разными значениями, не всегда начинающегося с нуля? Все, что нам нужно сделать, это использовать приведенный выше код и добавить значение, с которого мы хотим начать диапазон. Например, если мы хотим сгенерировать случайное целое число от 6 до 10 включительно, мы должны начать с использования приведенного выше кода для генерации случайного целого числа от 0 до 4, а затем добавить 6 к результату:
const betweenSixAnd10 = Math.floor (Math.random () *5) + 6
Обратите внимание, что для генерации случайного целого числа между 0и 4нам фактически пришлось умножить на 5.
Мы можем обобщить этот метод, чтобы создать функцию, которая будет возвращать случайное целое число между двумя значениями:
function randomIntBetween (min, max) {
Math.floor (Math.random () * (max — min + 1)) + min
}
Это просто обобщенная форма кода, который мы написали для получения случайного числа от 6 до 10, но с заменой 6 на minпараметр и 10 на maxпараметр. Чтобы использовать его, просто введите два аргумента, представляющих нижний и верхний пределы случайного числа (включительно). Таким образом, чтобы имитировать бросок шестигранной кости, мы могли бы использовать следующий код для возврата целого числа от 1 до 6:
const dice = randomIntBetween (1,6)
Чтобы показать, как randomIntBetweenработает функция, я подключил ее к некоторому HTML-коду в приведенной ниже демонстрации, чтобы вы могли изменить значения minи maxи сгенерировать случайное целое число, нажав кнопку (которую можно использовать для воспроизведения игральных костей разного размера). используется в Dungeons & Dragons и подобных играх).
Теперь, когда у нас есть несколько функций для генерации случайных целых чисел, мы можем использовать их для некоторых интересных вещей.
Загрузить случайное изображение
Для начала воспользуемся нашей randomIntфункцией для загрузки случайной фотографии с сайта Lorem Picsum. Этот сайт предоставляет базу данных изображений-заполнителей, каждое из которых имеет уникальный целочисленный идентификатор. Это означает, что мы можем создать ссылку на случайное изображение, вставив случайное целое число в URL-адрес.
Все, что нам нужно сделать, это настроить следующий HTML-код, который будет отображать изображение с идентификатором 0:
<button id="randomPhoto">Random Photo</button>
<p id="photo"><img src="https: //picsum.photos/id/0/200/200«>
Затем мы можем подключить следующий JavaScript, чтобы сгенерировать случайное целое число для идентификатора и обновить HTML, чтобы отображать новое изображение случайным образом при нажатии кнопки:
document.getElementById („randomPhoto“).addEventListener („click“, e => document.getElementById („photo“).innerHTML = `<img src="https: //picsum.photos/id/${randomInt (100) }/200/200">`)
Вы можете увидеть это в демо CodePen ниже.
Найдите работу своей мечты
Генерация случайного цвета
В HTML и CSS цвета представлены тремя целыми числами от 0 до 255, записанными в шестнадцатеричном формате (с основанием 16). Первый представляет красный, второй зеленый и третий синий. Это означает, что мы можем использовать нашу randomIntфункцию для создания случайного цвета, генерируя три случайных числа от 0 до 255 и преобразовывая их в основание 16. Чтобы преобразовать число в другое основание, вы можете предоставить аргумент toStringметоду, поэтому следующий код вернет случайное шестнадцатеричное число от 0 до FF (255 в шестнадцатеричном формате):
randomInt (0,255).toString (16)
<< 2B
Теперь мы можем написать randomColorфункцию, которая будет возвращать цветовой код HTML:
function randomColor () {
return `#${randomInt (1,255).toString (16) }${randomInt (1,255).toString (16) }${randomInt (1,255).toString (16) }`
}
Это возвращает литерал шаблона, который начинается с хэш-символа, с которого начинаются все цветовые коды HTML, а затем объединяет три случайных целых числа от 0 до 255 по основанию 16 в конце.
Вызов randomColorфункции вернет случайную строку цвета HTML:
randomColor ()
<< #c2d699
Я подключил функцию к кнопке HTML, чтобы она менял цвет фона документа каждый раз, когда нажимается кнопка в демонстрации CodePen ниже.
Генерация случайного письма
У нас уже есть функция для создания случайного числа, но как насчет случайных букв? К счастью, есть хороший способ преобразования целых чисел в буквы с использованием системы счисления. В базе 36 целые числа от 10 до 35 представлены буквами от „а“ до „z“. Вы можете проверить это, преобразовав некоторые значения в основание 36 в консоли, используя toStringметод:
(24).toString (36)
(16).toString (36)
Теперь, когда мы это знаем, должно быть легко написать randomLetterфункцию, которая использует нашу randomIntфункцию для генерации случайного целого числа от 10 до 35 и возвращает его строковое представление с основанием 36:
function randomLetter () {
return randomInt (10,35).toString (36)
}
Вызов randomLetterдолжен возвращать случайную строчную букву от „a“ до „z“:
randomLetter ()
<< „o“
randomLetter ()
<< „g“
Я подключил функцию к HTML-кнопке, чтобы вы могли увидеть, как она работает, в демо-версии CodePen ниже.
Распродажа $3/месяц
Генерация случайной строки
Теперь, когда мы можем создавать случайные буквы, мы можем соединить их вместе, чтобы создать случайные цепочки букв. Давайте напишем randomStringфункцию, которая принимает один параметр, nпредставляющий количество случайных букв, которые мы хотим получить в возвращаемой строке. Мы можем создать строку случайных букв, создав массив или длину, nа затем используя mapметод для замены каждого элемента на случайную букву. Затем мы можем использовать этот joinметод для преобразования массива в строку случайных букв:
function randomString (numberOfLetters) {
return [...Array (numberOfLetters) ].map (randomLetter).join``
}
Вызов randomString (n) должен возвращать случайную строку nбукв:
randomString (5)
<< „xkibb“
randomLetter (3)
<< „bxd“
Я подключил функцию к HTML-кнопке, чтобы вы могли увидеть, как она работает, в демо-версии CodePen ниже.
Выбор случайного элемента из массива
Часто полезно иметь возможность выбрать случайный элемент из массива. Это довольно легко сделать с помощью нашей randomIntфункции. Мы можем выбрать индекс в массиве случайным образом, используя длину массива в качестве аргумента и возвращая элемент с этим индексом из массива:
function randomPick (array) {
return array[randomInt (array.length) ]
}
Например, возьмем следующий массив, представляющий список фруктов:
const fruits = [„🍏“, 🍌»,«🍓»,«🥝»,«🍋»,«🍐»,«🫐»,"🍉"]
Вы можете выбрать случайный фрукт, используя следующий код:
randomPick (fruits)
<< «🍉»
Найдите работу своей мечты
Генерация случайной фразы
Теперь, когда у нас есть функция, которая выбирает случайный элемент из массивов, мы можем использовать ее для создания случайных фраз. Вы часто видите, что этот метод используется в качестве заполнителей имен пользователей на веб-сайтах. Для начала создайте три массива, один из которых содержит строки прилагательных, другой содержит цвета, а другие существительные, подобные показанным ниже:
const adjectives = [«Quick»,«Fierce»,«Ugly»,«Amazing»,«Super»,«Spectacular»,«Dirty»,«Funky»,«Scary"]
const colors = ["Brown»,«Red»,«Orange»,«Black»,«White»,«Purple»,«Pink»,«Yellow»,«Green»,«Blue"]
const nouns = ["Fox»,«Bear»,«Monkey»,«Hammer»,«Table»,«Door»,«Apple»,«Banana»,«Chair»,"Chicken"]
randomPickТеперь, когда у нас есть эти три массива, с помощью нашей функции легко создать случайную фразу. Мы просто выбираем случайный элемент из каждого массива и объединяем их с пробелами между ними, чтобы получилась фраза:
function randomPhrase (a, c, n) {
return `${randomPick (a) } ${randomPick©} ${randomPick (n) }`
}
Вызов randomPhraseдолжен вернуть слегка забавно звучащую случайную фразу — с цветом, прилагательным и существительным:
randomPhrase ()
<< «Funky Pink Chicken»
Я подключил эту функцию к HTML-кнопке, чтобы вы могли создавать несколько причудливых фраз, нажимая кнопку в демо-версии CodePen ниже.
Генерация случайного пароля
Последнее использование случайных целых чисел, которое мы рассмотрим, — это генерация случайной строки пароля. Общие правила для пароля заключаются в том, что он должен содержать как минимум:
восемь символов
один цифровой символ
один специальный не буквенно-цифровой символ
Примером, который соответствует этим правилам, может быть:
secret! 1
У нас уже есть функции, которые могут производить для нас каждый из этих элементов. Прежде всего, мы будем использовать randomString (6) для создания случайной строки из шести букв. Затем мы воспользуемся randomPickфункцией для выбора специального символа из массива, а затем воспользуемся randomInt (9) для возврата случайной цифры. Все, что нам нужно сделать, это соединить их, и у нас будет случайно сгенерированный пароль!
Мы можем объединить это в функцию, которая будет возвращать случайную строку пароля:
function generatePassword () {
return randomString (6) + randomPick ([»!»,«%»,»?»,«&»,«@»,«£»,«$»,"#"]) + randomInt (9)
}
Вызов generatePasswordдолжен возвращать случайный пароль, соответствующий трем приведенным выше правилам:
generatePassword ()
<< «ykkefn@8»
Я подключил эту функцию к кнопке HTML, чтобы вы могли попробовать сгенерировать несколько случайных паролей, нажав кнопку в демо-версии CodePen ниже.
Следует отметить, что все функции, которые мы написали, используют randomIntфункцию, которую мы написали в начале. Функция generatePassword, которую мы только что написали, например, состоит из функций randomInt, randomPickи randomString... и randomStringфункция использует randomLetterфункцию! Это краеугольный камень программирования: использование функций в качестве строительных блоков для более сложных функций.
Распродажа $3/месяц
Подведение итогов
Мы обсудили, как генерировать случайные числа в JavaScript. Я надеюсь, что вы нашли это руководство полезным. Эта randomIntфункция, безусловно, полезная функция, которую стоит иметь в своем шкафчике, и она поможет вам добавить случайности в ваши проекты.
Вы можете увидеть все примеры, рассмотренные в этой статье, в следующей демонстрации CodePen.
