JS | 如何產生一個介於 minimum(含)到 maximum(不含)的整數?

更新 發佈閱讀 4 分鐘

from chatGPT:

一、結論

👉 產生一個介於 minimum(含)到 maximum(不含)的整數

Math.floor(Math.random() * (maximum - minimum) + minimum) 

二、從最裡面開始拆

1️⃣ Math.random()

Math.random()
  • 回傳一個 0(含)~1(不含)之間的小數
  • 例子:
    • 0.13
    • 0.9993
    • 永遠不會是 1

📌 目前範圍:

0 ≤ random < 1

2️⃣ (maximum - minimum)

maximum - minimum

這不是亂減,是在算「範圍大小」。

例子:

minimum = 5
maximum = 10

你想要的整數其實是:

5, 6, 7, 8, 9

總共幾個?

10 - 5 = 5

📌 關鍵觀念:


random 只能先決定「有幾個可能值」



3️⃣ Math.random() * (maximum - minimum)

Math.random() * 5
  • 原本:0 ~ <1
  • 乘以 5 後:0 ~ <5

可能出現:

0.2
3.9
4.999

📌 這一步只是把「隨機小數」拉長到你要的範圍寬度


4️⃣ + minimum

Math.random() * 5 + 5
  • 原本範圍:0 ~ <5
  • 加 5 後:5 ~ <10

📌 這一步不是亂加


👉 是把整個區間「平移」到你想要的起點



5️⃣ Math.floor(...)

Math.floor( 5.09.999 )
  • 小數 無條件捨去
  • 結果只剩:
5, 6, 7, 8, 9

📌 為什麼不會出現 10?


因為前面最大只到 <10



三、整條流程用一條線看

min = 5, max = 10 為例:

Math.random()0.0000.999
× (10 - 5) = ×50.0004.999
+ 55.0009.999
Math.floor()59

四、你一定會問的陷阱題

❓ 為什麼不是 maximum - minimum + 1

因為這個公式:


👉 本來就設計成「不包含 maximum」


如果你要「包含最大值」,公式要改。


❓ 如果我要 1~10(含)?

你要的是:

1,2,3,4,5,6,7,8,9,10

那公式會變成:

Math.floor(Math.random() * (max - min + 1)) + min

📌 +1 是在補「包含最大值」的那一格


五、一句話背起來(超重要)

random 決定比例


乘法決定範圍寬度


加法決定起點 floor 決定整數


如果你只記這幾句,你之後看到任何隨機公式都拆得開。


六、實戰版

不包含最大值

function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}

包含最大值

function getRandomIntInclusive(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
留言
avatar-img
msnigatsu
0會員
3內容數
🐱
你可能也想看
Thumbnail
React 事件處理:讓網頁動起來~ 網頁的互動性是吸引使用者、提供良好體驗的關鍵。 在 React 中,透過監聽使用者的操作(例如點擊、滑鼠移動、鍵盤輸入),並執行相應的程式碼,來實現豐富的互動效果。
Thumbnail
React 事件處理:讓網頁動起來~ 網頁的互動性是吸引使用者、提供良好體驗的關鍵。 在 React 中,透過監聽使用者的操作(例如點擊、滑鼠移動、鍵盤輸入),並執行相應的程式碼,來實現豐富的互動效果。
Thumbnail
在 React 的世界裡,Props 負責從父元件向子元件傳遞資料,而 State 則是負責管理元件自身的內部資料。 State 就像元件的記憶,可以儲存元件的狀態,並根據狀態的變化來更新 UI。
Thumbnail
在 React 的世界裡,Props 負責從父元件向子元件傳遞資料,而 State 則是負責管理元件自身的內部資料。 State 就像元件的記憶,可以儲存元件的狀態,並根據狀態的變化來更新 UI。
Thumbnail
在 React 的世界裡,元件 (Component) 就像一個個獨立的個體,各自負責 UI 的一部分,要讓這些個體協同工作,就需要一種溝通的機制,而 Props 就是組件之間通信和數據傳遞的主要方式。
Thumbnail
在 React 的世界裡,元件 (Component) 就像一個個獨立的個體,各自負責 UI 的一部分,要讓這些個體協同工作,就需要一種溝通的機制,而 Props 就是組件之間通信和數據傳遞的主要方式。
Thumbnail
在 React 的世界裡,元件 (Component) 扮演著至關重要的角色。它們是構成使用者介面 (UI) 的基本 building blocks,如同積木一般,可以組合成複雜的應用程式。
Thumbnail
在 React 的世界裡,元件 (Component) 扮演著至關重要的角色。它們是構成使用者介面 (UI) 的基本 building blocks,如同積木一般,可以組合成複雜的應用程式。
Thumbnail
告別字串拼接地獄:用 JSX 解鎖 React 的優雅姿態 JSX 是一種強大且方便的語法,讓 React 開發者能夠更直觀地描述 UI 結構,提高程式碼可讀性與開發效率。
Thumbnail
告別字串拼接地獄:用 JSX 解鎖 React 的優雅姿態 JSX 是一種強大且方便的語法,讓 React 開發者能夠更直觀地描述 UI 結構,提高程式碼可讀性與開發效率。
Thumbnail
React 是一個用於構建用戶界面的JavaScript框架,由Facebook(Meta)開發和維護。 它的主要目標是創建快速、交互性強、可維護的單頁應用程序(SPA),並將應用程序的界面拆分成可重用的元件。
Thumbnail
React 是一個用於構建用戶界面的JavaScript框架,由Facebook(Meta)開發和維護。 它的主要目標是創建快速、交互性強、可維護的單頁應用程序(SPA),並將應用程序的界面拆分成可重用的元件。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News