快捷導(dǎo)航

JavaScript隨機(jī)數(shù)生成各種技巧及實(shí)例代碼

更新時(shí)間：2025年04月17日 10:00:27 作者：友人.227

這篇文章主要介紹了JavaScript隨機(jī)數(shù)生成各種技巧及實(shí)例代碼,包括生成0到1之間的隨機(jī)浮點(diǎn)數(shù)、指定范圍的隨機(jī)整數(shù)和浮點(diǎn)數(shù)、從數(shù)組中隨機(jī)選擇元素、生成隨機(jī)顏色以及生成指定數(shù)目和范圍的隨機(jī)數(shù),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在日常的 JavaScript 開發(fā)中，隨機(jī)數(shù)生成是一個(gè)非常常見的需求。無論是用于生成隨機(jī)數(shù)據(jù)、隨機(jī)顏色，還是從數(shù)組中隨機(jī)選擇元素，掌握隨機(jī)數(shù)的生成方法都是非常有用的。本文將詳細(xì)介紹 JavaScript 中隨機(jī)數(shù)生成的各種技巧，并提供實(shí)用的代碼示例。

1. Math.random() 基礎(chǔ)

在 JavaScript 中，Math.random() 是生成隨機(jī)數(shù)的核心方法。它用于生成一個(gè) 0 到 1 之間（不包括 1）的隨機(jī)浮點(diǎn)數(shù)。例如：

console.log(Math.random()); // 輸出類似 0.123456789

每次調(diào)用 Math.random() 都會(huì)返回一個(gè)不同的隨機(jī)數(shù)。雖然它生成的隨機(jī)數(shù)范圍較小，但通過一些簡(jiǎn)單的數(shù)學(xué)運(yùn)算，我們可以將其擴(kuò)展到任意范圍。

2. 生成指定范圍的隨機(jī)整數(shù)

如果需要生成一個(gè)指定范圍內(nèi)的隨機(jī)整數(shù)，比如從 min 到 max，可以通過以下公式實(shí)現(xiàn)：

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

console.log(getRandomInt(1, 10)); // 生成 1 到 10 之間的隨機(jī)整數(shù)

解釋：

Math.random() * (max - min + 1)：將隨機(jī)數(shù)范圍從 [0, 1) 擴(kuò)展到 [0, max - min + 1)。
Math.floor()：將生成的浮點(diǎn)數(shù)向下取整，確保結(jié)果為整數(shù)。

        /*Math.floor() 是 JavaScript 中的一個(gè)數(shù)學(xué)方法，
        用于將一個(gè)浮點(diǎn)數(shù)（小數(shù)）向下取整到最接近的整數(shù)。
        換句話說，它會(huì)去掉小數(shù)部分，只保留整數(shù)部分，并且總是向下取整。
        */
        console.log(Math.floor(3.999)); // 輸出：3
        console.log(Math.floor(3.5));   // 輸出：3
        console.log(Math.floor(3.001)); // 輸出：3
        console.log(Math.floor(3));     // 輸出：3

Math.random() // 假設(shè)生成了 0.789
Math.random() * 10 // 結(jié)果是 7.89
Math.floor(Math.random() * 10) // 結(jié)果是 7

+ min：將范圍從 [0, max - min] 調(diào)整到 [min, max]。

3. 生成指定范圍的隨機(jī)浮點(diǎn)數(shù)

如果需要生成一個(gè)指定范圍內(nèi)的隨機(jī)浮點(diǎn)數(shù)，并控制小數(shù)位數(shù)，可以使用以下方法：

function getRandomFloat(min, max, decimalPlaces) {
    const range = max - min;
    const randomFloat = Math.random() * range + min;
    return Number(randomFloat.toFixed(decimalPlaces)); // 控制小數(shù)位數(shù)
}

console.log(getRandomFloat(0, 10, 2)); // 生成 0 到 10 之間的隨機(jī)浮點(diǎn)數(shù)，保留 2 位小數(shù)

解釋：

Math.random() * range + min：生成 [min, max) 范圍內(nèi)的隨機(jī)浮點(diǎn)數(shù)。
toFixed(decimalPlaces)：將浮點(diǎn)數(shù)格式化為指定的小數(shù)位數(shù)。

4. 從數(shù)組中隨機(jī)選擇元素

如果需要從數(shù)組中隨機(jī)選擇一個(gè)元素，可以結(jié)合 Math.random() 和數(shù)組索引實(shí)現(xiàn)：

function getRandomArrayElement(arr) {
    const randomIndex = Math.floor(Math.random() * arr.length);
    return arr[randomIndex];
}

const fruits = ["apple", "banana", "cherry", "date"];
console.log(getRandomArrayElement(fruits)); // 隨機(jī)輸出 "apple"、"banana"、"cherry" 或 "date"

解釋：

Math.floor(Math.random() * arr.length)：生成一個(gè) [0, arr.length) 范圍內(nèi)的隨機(jī)索引。
使用隨機(jī)索引從數(shù)組中選擇元素。

5. 生成隨機(jī)顏色

隨機(jī)顏色生成在前端開發(fā)中非常常見，可以通過以下代碼實(shí)現(xiàn)：

function getRandomColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    return `rgb(${r}, ${g}, $)`;
}

console.log(getRandomColor()); // 輸出類似 "rgb(123, 45, 67)"

解釋：

Math.floor(Math.random() * 256)：生成 [0, 255] 范圍內(nèi)的隨機(jī)整數(shù)。
使用 RGB 格式拼接顏色。

6. 生成指定數(shù)目和范圍的隨機(jī)數(shù)

如果需要生成多個(gè)隨機(jī)數(shù)，可以封裝一個(gè)函數(shù)來實(shí)現(xiàn)。以下是一個(gè)生成指定數(shù)目和范圍的隨機(jī)數(shù)的函數(shù)：

/**
 * 生成指定數(shù)目和范圍的隨機(jī)數(shù)
 * @param {number} min - 最小值
 * @param {number} max - 最大值
 * @param {number} countNum - 隨機(jī)數(shù)的個(gè)數(shù)
 * @returns {Array} - 包含隨機(jī)數(shù)的數(shù)組
 */
const getRandomNum = function (min, max, countNum) {
    var arr = [];
    for (let i = 0; i < countNum; i++) {
        let resNum = Math.floor(Math.random() * (max - min + 1)) + min;
        arr.push(resNum);
    }
    return arr;
};

console.log(getRandomNum(1, 10, 5)); // 生成 5 個(gè) 1 到 10 之間的隨機(jī)整數(shù)