نحوه تولید اعداد تصادفی در جاوا اسکریپت با Math.random()

نحوه تولید اعداد تصادفی در جاوا اسکریپت با Math.random

در این مقاله، نحوه تولید اعداد تصادفی در جاوا اسکریپت با Math.random() را بررسی خواهیم کرد، و تابعی را ایجاد می کنیم که می توانید برای طیف وسیعی از اهداف دوباره از آن استفاده کنید — مانند بارگذاری تصاویر تصادفی، انتخاب یک عنصر تصادفی از یک آرایه، و تولید رنگ‌ها، حروف، رشته‌ها، عبارات و رمزهای عبور تصادفی. طراحی سایت

تصادفی در جاوا اسکریپت

این که بتوانید عنصر تصادفی را به برنامه های خود اضافه کنید همیشه مفید است. ممکن است بخواهید با اضافه کردن چند سبک تصادفی، ایجاد یک عبارت تصادفی، یا اضافه کردن یک عنصر شانس به یک بازی، وب سایت خود را جذاب کنید (از آنها به طور گسترده در این بازی Numble).

متأسفانه، ایجاد یک مقدار واقعاً تصادفی در واقع بسیار سخت است (مگر اینکه به برخی مواد رادیواکتیو … یا یک میمون با صفحه کلید. در همین راستا، زبان‌های برنامه‌نویسی از روش‌های قطعی برای تولید اعداد شبه تصادفی استفاده می‌کنند. اینها اعدادی هستند که به نظر می‌رسند تصادفی هستند، اما در واقع توسط توابعی که seed را می‌پذیرند تولید می‌شوند. مقادیر بر اساس رویدادهایی مانند زمان یا موقعیت نشانگر ماوس.

جاوا اسکریپت دارای تابع تصادفی است که روشی از شی Math داخلی است. استاندارد ECMAScript مشخص نمی‌کند که چگونه این تابع باید یک عدد تصادفی ایجاد کند، بنابراین اجرای آن به فروشندگان مرورگر واگذار می‌شود. در زمان نگارش مقاله، همه مرورگرهای اصلی در حال حاضر از الگوریتم xorshift128+ در پس‌زمینه استفاده می‌کنند. ایجاد یک عدد شبه تصادفی

برای استفاده از آن، به سادگی Math.random() را وارد کنید و یک عدد اعشاری ممیز شناور شبه تصادفی بین 0 (شامل) و 1 (انحصاری):

را وارد کنید.

const x = ریاضی.تصادفی();

این را می توان به صورت نابرابری زیر نشان داد:

  x  1

اما اگر یک عدد تصادفی بزرگتر از 1 بخواهید چه؟ آسان: تنها کاری که باید انجام دهید این است که در یک ضریب مقیاس ضرب کنید تا آن را افزایش دهید – برای مثال، ضرب کردن نتیجه در 10 مقداری بین 0 (شامل) و 10 (انحصاری) تولید می کند:

const y = ریاضی.تصادفی()*10

اگر هر دو طرف نابرابری قبلی را در 10 ضرب کنیم، دلیل این امر را می توان دید:

  y  10

اما نتیجه همچنان یک عدد اعشاری ممیز شناور است. اگر یک عدد صحیح تصادفی بخواهیم چطور؟ ساده: تنها کاری که باید انجام دهیم این است که از تابع Math.floor برای گرد کردن مقدار برگشتی استفاده کنیم به عدد صحیح زیر می رسد. کد زیر یک عدد صحیح تصادفی از 0 تا 9 را به متغیر z اختصاص می دهد:

const z = ریاضی.طبقه(ریاضی.تصادفی()*10)

توجه داشته باشید که، حتی اگر در 10 ضرب کنیم، مقدار بازگشتی تنها به 9 می رسد.

می‌توانیم این روش را تعمیم دهیم تا تابعی ایجاد کنیم که یک عدد صحیح تصادفی بین 0 تا تا را برمی‌گرداند، اما شامل عدد ارائه‌شده به عنوان آرگومان نیست:

عملکرد randomInt(شماره) {
  بازگشت ریاضی.طبقه( ریاضی.تصادفی()*(number))
}

اکنون می توانیم از این تابع برای برگرداندن یک رقم تصادفی بین 0 و 9 استفاده کنیم:

const randomDigit= randomInt(10)

پس اکنون راهی برای ایجاد یک عدد صحیح تصادفی داریم. اما در مورد یک عدد صحیح تصادفی بین دو مقدار مختلف که همیشه از صفر شروع نمی شود، چطور؟ تنها کاری که باید انجام دهیم این است که از کد بالا استفاده کرده و مقداری را که می‌خواهیم محدوده از آن شروع شود اضافه کنیم. به عنوان مثال، اگر بخواهیم یک عدد صحیح تصادفی بین 6 و 10 تولید کنیم، با استفاده از کد بالا شروع به تولید یک عدد صحیح تصادفی بین 0 و 4 می کنیم و سپس 6 را به نتیجه اضافه می کنیم:

const betweenSixAnd10 = ریاضی.طبقه(ریاضی.تصادفی()*5) +  6

توجه داشته باشید که برای ایجاد یک عدد صحیح تصادفی بین و 4، در واقع باید در 5 ضرب می‌شدیم.

>

می‌توانیم این روش را تعمیم دهیم تا تابعی ایجاد کنیم که یک عدد صحیح تصادفی بین دو مقدار برمی‌گرداند:

عملکرد randomIntBetween(دقیقه،حداکثر){
  ریاضی.طبقه(ریاضی.تصادفی()*(حداکثر - دقیقه + 1)) + دقیقه
}

این به سادگی یک شکل کلی از کدی است که ما برای بدست آوردن یک عدد تصادفی بین 6 تا 10 نوشتیم، اما 6 با پارامتر min جایگزین شده و 10 با max جایگزین شده است. کد> پارامتر. برای استفاده از آن، فقط دو آرگومان وارد کنید تا حد پایین و بالای عدد تصادفی (شامل) را نشان دهد. بنابراین برای شبیه سازی انداختن یک تاس شش وجهی، می توانیم از کد زیر برای برگرداندن یک عدد صحیح بین 1 و 6 استفاده کنیم:

const تاس = randomIntBetween(1،6)

برای نشان دادن نحوه عملکرد تابع randomIntBetween، آن را در نسخه آزمایشی زیر به مقداری HTML متصل کرده‌ام، بنابراین می‌توانید مقادیر min و max و با کلیک کردن روی دکمه یک عدد صحیح تصادفی ایجاد کنید (که می تواند برای تکرار تاس های با اندازه های مختلف مورد استفاده در Dungeons & Dragons و بازی های مشابه استفاده شود).

به قلم
عدد صحیح تصادفی – SitePoint توسط SitePoint (@SitePoint)
در CodePen.

اکنون که چند توابع برای تولید اعداد صحیح تصادفی داریم، می‌توانیم از آنها برای انجام کارهای جالب استفاده کنیم.

معرفی سایت: https://cloudonlinenic.ir/آیا-برای-طراح-وب-سایت-خیلی-پیر-هستید؟/

یک تصویر تصادفی را بارگیری کنید

برای شروع، از تابع randomInt خود برای بارگیری یک عکس تصادفی از وب‌سایت Lorem Picsum استفاده می‌کنیم. . این سایت پایگاه داده ای از تصاویر نگهدارنده مکان را ارائه می دهد که هر کدام دارای شناسه عدد صحیح منحصر به فرد هستند. این بدان معنی است که ما می توانیم با درج یک عدد صحیح تصادفی در URL، پیوندی به یک تصویر تصادفی ایجاد کنیم.

تنها کاری که باید انجام دهیم این است که HTML زیر را تنظیم کنیم که تصویر را با شناسه 0 نمایش دهد:

button id="randomPhoto">عکس تصادفیدکمه>
p id="عکس"> img src="https://picsum.photos/id/0/200/200">p>

سپس می‌توانیم جاوا اسکریپت زیر را برای ایجاد یک عدد صحیح تصادفی برای شناسه وصل کنیم و HTML را به‌روزرسانی کنیم تا با کلیک روی دکمه، تصویر جدیدی را به‌طور تصادفی نمایش دهیم:

سند. getElementById("randomPhoto").addEventListener("کلیک کنید"،e=> سند.getElementById("عکس") .innerHTML = `img src="https://picsum.photos/id/${randomInt(100)}/200/200>`)

شما می توانید این را در نسخه نمایشی CodePen زیر مشاهده کنید.

به قلم
عکس تصادفی – SitePoint توسط SitePoint (@SitePoint)
در CodePen.

ایجاد رنگ تصادفی

در HTML و CSS، رنگ ها با سه عدد صحیح بین 0 تا 255 نشان داده می شوند که به صورت هگزادسیمال نوشته می شوند (پایه 16). اولی نشان دهنده قرمز، دومی سبز و سومی آبی است. این بدان معنی است که ما می توانیم از تابع randomInt خود برای ایجاد یک رنگ تصادفی با تولید سه عدد تصادفی بین 0 تا 255 و تبدیل آنها به پایه 16 استفاده کنیم. برای تبدیل یک عدد به پایه متفاوت، می توانید یک آرگومان ارائه دهید. به روش toString، بنابراین کد زیر یک عدد هگزادسیمال تصادفی بین 0 و FF (255 در هگزادسیمال) برمی گرداند:

randomInt(,255 ).toString(16)
 2B

اکنون می‌توانیم یک تابع randomColor بنویسیم که کد رنگی HTML را برمی‌گرداند:

عملکرد رنگ تصادفی(){
  بازگشت `#${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 زیر کلیک می شود، رنگ پس زمینه سند تغییر می کند.

به قلم
رنگ تصادفی – SitePoint توسط SitePoint مراجعه کنید (@SitePoint)
در CodePen.

ایجاد یک حرف تصادفی

ما قبلاً تابعی برای ایجاد یک عدد صحیح تصادفی داریم، اما در مورد حروف تصادفی چطور؟ خوشبختانه، روش خوبی برای تبدیل اعداد صحیح به حروف با استفاده از پایه های اعداد وجود دارد. در پایه 36، اعداد صحیح از 10 تا 35 با حروف “a” تا “z” نشان داده می شوند. می‌توانید این را با تبدیل برخی از مقادیر به پایه 36 در کنسول با استفاده از روش toString بررسی کنید:

(24).toString(36)
(16).toString(36)

اکنون که این را می دانیم، نوشتن یک تابع randomLetter که از تابع randomInt ما برای تولید یک عدد صحیح تصادفی بین 10 و 35 استفاده می کند و پایه آن را برمی گرداند، باید آسان باشد. نمایش رشته 36:

عملکرد حروف تصادفی(){
 بازگشت randomInt(10،35).toString(36)
}

با فراخوانی randomLetter باید یک حرف کوچک تصادفی از “a” به “z” برگرداند:

حروف تصادفی()
 "o"

حروف تصادفی()
 "g"

من این تابع را به یک دکمه HTML متصل کرده ام تا بتوانید نحوه عملکرد آن را در نسخه نمایشی CodePen زیر مشاهده کنید.

به قلم
حروف تصادفی – SitePoint توسط SitePoint مراجعه کنید (@SitePoint)
در CodePen.

ایجاد یک رشته تصادفی

اکنون که می‌توانیم حروف تصادفی ایجاد کنیم، می‌توانیم آنها را کنار هم قرار دهیم تا رشته‌های تصادفی از حروف ایجاد کنیم. بیایید یک تابع randomString بنویسیم که یک پارامتر واحد را می پذیرد، n – که نشان دهنده تعداد حروف تصادفی مورد نظر ما در رشته ای است که برگردانده می شود. ما می توانیم با ایجاد یک آرایه یا طول n و سپس استفاده از روش map برای تغییر هر عنصر به یک حرف تصادفی، رشته ای از حروف تصادفی ایجاد کنیم. سپس می توانیم از روش join برای تبدیل آرایه به رشته ای از حروف تصادفی استفاده کنیم:

تابع randomString(numberOfLetters) {
  بازگشت [...آرایه(numberOfLetters)].نقشه(randomLetter).پیوستن``
}

با فراخوانی randomString(n) باید یک رشته تصادفی از حروف n برگرداند:

randomString(5)
 "xkibb"

حروف تصادفی(3)
 "bxd"

من این تابع را به یک دکمه HTML متصل کرده ام تا بتوانید نحوه عملکرد آن را در نسخه نمایشی CodePen زیر مشاهده کنید.

به قلم
رشته تصادفی – SitePoint توسط SitePoint مراجعه کنید (@SitePoint)
در CodePen.

انتخاب یک عنصر تصادفی از یک آرایه

اغلب مفید است که بتوان یک عنصر تصادفی را از یک آرایه انتخاب کرد. این کار با استفاده از تابع randomInt ما نسبتاً آسان است. می‌توانیم با استفاده از طول آرایه به‌عنوان آرگومان، یک شاخص در آرایه را به‌طور تصادفی انتخاب کنیم و عنصر موجود در آن شاخص را از آرایه برگردانیم:

عملکرد انتخاب تصادفی(آرایه) {
 آرایه بازگشت[randomInt(array.طول )]
}

به عنوان مثال، آرایه زیر را در نظر بگیرید که فهرستی از میوه ها را نشان می دهد:

const fruits = ["🍏"،🍌،"🍓،"🥝،"🍋،"🍐،"🫐،"🍉"]

می‌توانید با استفاده از کد زیر، یک تکه میوه تصادفی انتخاب کنید:

انتخاب تصادفی(میوه ها )
 "🍉"
منبع: https://iransite.com