JavaScript中的Math对象和随机数

news2025/4/1 13:42:06

目录

一、常用数学方法

1. 数值处理

2. 极值与运算

3. 三角函数(参数为弧度)

4. 对数与指数

5. 常量

二、随机数生成 Math.random()

1. 基础范围控制

2. 整数随机数

三、实际应用场景

1. 随机颜色生成

2. 数组随机排序

3. 概率控制

四、注意事项


一、常用数学方法

1. 数值处理

方法说明示例
Math.abs(x)绝对值Math.abs(-5) → 5
Math.round(x)四舍五入Math.round(4.7) → 5
Math.floor(x)向下取整(地板值)Math.floor(4.9) → 4
Math.ceil(x)向上取整(天花板值)Math.ceil(4.1) → 5
Math.trunc(x)去除小数部分Math.trunc(4.9) → 4
Math.sign(x)返回符号(-1, 0, 1)Math.sign(-5) → -1

2. 极值与运算

方法说明示例
Math.max(a, b, ...)返回最大值Math.max(1, 3, 2) → 3
Math.min(a, b, ...)返回最小值Math.min(1, -3, 2) → -3
Math.pow(base, exp)幂运算(等效 **Math.pow(2, 3) → 8
Math.sqrt(x)平方根Math.sqrt(16) → 4
Math.cbrt(x)立方根Math.cbrt(27) → 3
Math.hypot(a, b, ...)平方和的平方根Math.hypot(3, 4) → 5

3. 三角函数(参数为弧度)

方法说明示例
Math.sin(radians)正弦值Math.sin(Math.PI/2) → 1
Math.cos(radians)余弦值Math.cos(0) → 1
Math.tan(radians)正切值Math.tan(Math.PI/4) ≈ 1
Math.asin(x)反正弦(弧度)Math.asin(1) → π/2
Math.atan2(y, x)四象限反正切Math.atan2(1, 1) → π/4

4. 对数与指数

方法说明示例
Math.log(x)自然对数(底为 e)Math.log(Math.E) → 1
Math.log10(x)以 10 为底的对数Math.log10(100) → 2
Math.log2(x)以 2 为底的对数Math.log2(8) → 3
Math.exp(x)e 的 x 次幂Math.exp(1) → Math.E ≈ 2.718

5. 常量

常量值(约)
Math.PI3.141592653589793
Math.E2.718281828459045
Math.LN20.6931471805599453
Math.SQRT21.4142135623730951

二、随机数生成 Math.random()

Math.random() 返回 [0, 1) 区间内的浮点数(包含 0,不包含 1)。

1. 基础范围控制

  • 生成 [0, max) 的浮点数

    const randomFloat = Math.random() * max;
  • 生成 [min, max) 的浮点数

    const randomFloat = Math.random() * (max - min) + min;

2. 整数随机数

  • 生成 [0, max] 的整数(包含 max)

    const randomInt = Math.floor(Math.random() * (max + 1));
  • 生成 [min, max] 的整数(经典公式)

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

三、实际应用场景

1. 随机颜色生成

// 生成十六进制颜色
function getRandomHexColor() {
  return `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;
}

// 生成 RGB 颜色
function getRandomRGB() {
  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}, ${b})`;
}

2. 数组随机排序

// Fisher-Yates 洗牌算法(推荐)
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

// 简易版(不保证均匀性)
const randomSort = array => array.sort(() => Math.random() - 0.5);

3. 概率控制

// 30% 概率触发事件
if (Math.random() < 0.3) {
  console.log("触发成功!");
}

// 加权随机(如 60% A,30% B,10% C)
const weights = { A: 0.6, B: 0.3, C: 0.1 };
function weightedRandom(weights) {
  let sum = 0;
  const rand = Math.random();
  for (const [key, weight] of Object.entries(weights)) {
    sum += weight;
    if (rand < sum) return key;
  }
}

四、注意事项

  1. 不要用于加密场景
    Math.random() 的随机性不安全,如需加密请使用 crypto.getRandomValues()

    const array = new Uint32Array(1);
    window.crypto.getRandomValues(array); // 生成安全随机数
  2. 避免浮点误差
    浮点数运算可能存在精度问题,处理金额等敏感数据时建议转成整数计算。

  3. 范围闭合问题
    确保公式正确闭合区间(如 [min, max] vs [min, max))。

  4. 种子随机数
    JavaScript 原生不支持种子随机数,需自行实现算法(如 Xorshift)。


示例1:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" href="./base.css">
    <style>
        table {
            border-collapse: collapse;
            border-spacing: 0;
            margin: 50px auto;
        }

        td,
        th {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #c1c1c1;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>gender</th>
            <th>hometown</th>
        </tr>
        <script>
            let students = [
                { name: '小明1', age: '18', gender: '男', hometown: '河北省' },
                { name: '小明2', age: '18', gender: '男', hometown: '河北省' },
                { name: '小明3', age: '18', gender: '男', hometown: '河北省' },
                { name: '小明4', age: '18', gender: '男', hometown: '河北省' },
            ]
            for (let i = 0; i < students.length; i++) {
                document.write(`
                    <tr>
                        <td>${students[i].name}</td>
                        <td>${students[i].age}</td>
                        <td>${students[i].gender}</td>
                        <td>${students[i].hometown}</td>
                    </tr>
            `)
            }
        </script>
    </table>
</body>

</html>

示例2:

function getColor() {
    let r = Math.floor(Math.random() * 256)
    let g = Math.floor(Math.random() * 256)
    let b = Math.floor(Math.random() * 256)
    let color = `rgb(${r}, ${g}, ${b})`
    return color;
}
let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
function getColor() {
    let str = '#'
    for (let i = 0; i < 6; i++) {
        str += data[Math.floor(Math.random() * data.length)]
    }
    return str
}
const div = document.querySelector('div')
div.style.backgroundColor = getColor()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2324441.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

lxd-dashboard 图形管理LXD/LXC

前言 LXD-WEBGUI是一个完全用AngularJS编写的Web应用程序,无需应用服务器、数据库或其他后端服务支持。只需要简单地托管静态HTML和JavaScript文件,就能立即投入使用。这个项目目前处于测试阶段,提供了直观的用户界面,帮助用户便捷地管理和控制LXD实例。 安装lxd-dashboa…

python纯终端实现图片查看器(全彩)(windows)

很多人作为命令行爱好者&#xff0c;无法在终端内直接查看图片是无法忍受的&#xff0c; 那就写一个&#xff01; 先直接上代码 import os import sys from PIL import Image import numpy as np import colorama import msvcrt # Windows专用# 初始化colorama colorama.ini…

【动态规划篇】- 路径问题

62. 不同路径 题目链接&#xff1a; 62. 不同路径 题目解析&#xff1a; 状态表示 dp[i][j]表示&#xff1a;以[i][j]为终点时&#xff0c;一共有多少种路径。 状态转移方程 以[i][j]最近的几步来分析问题&#xff0c;要么从[i-1][j]位置向下走一步到达[i][j],要么从[i][j-1…

《新凯来:半导体设备制造领域的“国家队”》

《新凯来&#xff1a;半导体设备制造领域的“国家队”》 一、SEMICON China 爆火出圈&#xff1a;31 款设备背后的 “深圳力量” 1.1 展会现象级热度 在 2025 年 SEMICON China 展会现场&#xff0c;新凯来展台成了整届展会当之无愧的 “顶流”&#xff0c;被来自全球各地的专…

AI大模型最新发布[update@202503]

OpenAI GPT-4o&#xff1a;多模态&#xff0c;“o”代表Omni&#xff0c;即全能的意思&#xff0c;凸显了其多功能的特性。 多模态交互&#xff0c;GPT-4o可以接受文本、音频和图像的任意组合作为输入&#xff0c;并生成文本、音频和图像的任意组合输出。实时推理能力&#x…

深入浅出 Embedding

1. 什么是 Embedding? Embedding(嵌入)是一种将高维数据映射到低维连续空间的技术,用于表达数据的语义关系。简单来说,它是一种向量化表示,将文本、图像、用户行为等信息转换为数值向量,使得相似的数据在向量空间中距离更近。 2. 如何理解 Embedding? 2.1 浅显易懂的…

java项目之基于ssm的乡镇自来水收费系统(源码+文档)

项目简介 乡镇自来水收费系统实现了以下功能&#xff1a; 乡镇自来水收费系统在Eclipse环境中&#xff0c;使用Java语言进行编码&#xff0c;使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务&#xff0c;其管理员管理水表&#xff0c;审核用户更换…

Spring AI MCP 架构详解

Spring AI MCP 架构详解 1.什么是MCP? MCP 是一种开放协议&#xff0c;它对应用程序向大语言模型&#xff08;LLMs&#xff09;提供上下文信息的方式进行了标准化。可以把 MCP 想象成人工智能应用程序的 USB-C 接口。就像 USB-C 为将设备连接到各种外围设备和配件提供了一种…

目标识别与双目测距(1)环境搭建:Ubuntu+yolov5+pcl库

环境情况 ubuntu 18.04 → 20.04&#xff08;最终&#xff09; 安装Ubuntu1804虚拟机系统 Anaconda&#xff1a;可参考我的另一篇文章 Python 3.6.13 → 3.8&#xff08;最终&#xff09;Anaconda3-2021.05 目标识别&#xff1a;YOLOv5相关 1、安装git sudo apt install gi…

OpenAI API - Agent

文章目录 代理概述模型工具知识与记忆防护栏编排入门 语音代理选择正确的架构语音到语音&#xff08;多模态&#xff09;架构链式架构 构建语音代理使用语音到语音架构进行实时处理将音频输入链接到文本处理 → 音频输出 代理 了解如何使用 OpenAI API 构建代理。 https://pl…

Strawberry perl的下载,查询版本号,配置Path环境变量,查找perl解释器的位置

Strawberry Perl 是一个适用于 Microsoft Windows 的 Perl 环境&#xff0c;包含运行和开发 Perl 应用程序所需的一切。它旨在尽可能接近 UNIX 系统上的 Perl 环境。 下载 官网: Strawberry Perl for Windows - Releases 各个版本: Strawberry Perl for Windows - Releases …

MySQL的基础语法2(函数-字符串函数、数值函数、日期函数和流程函数 )

目录 一、字符串函数 1.常见字符串函数 ​编辑 2.字符串函数的基本使用 3.字符串函数的数据库案例演示 二、数值函数 1.常见数值函数&#xff08;如下&#xff09;&#xff1a; 2.数值函数的基本使用 3.数值函数的数据库案例演示 三、日期函数 1.常见的日期函数 2.日…

5G_WiFi_CE_杂散测试

目录 一、规范要求 1、法规目录&#xff1a; 2、限值&#xff1a; &#xff08;1&#xff09;带外发射杂散 &#xff08;2&#xff09;带内发射杂散 &#xff08;3&#xff09;接收杂散 二、测试方法 1、带外发射杂散 &#xff08;1&#xff09;测试条件 &#xff08…

大数据Spark(五十五):Spark框架及特点

文章目录 Spark框架及特点 一、Spark框架介绍 二、Spark计算框架具备以下特点 Spark框架及特点 一、Spark框架介绍 Apache Spark 是一个专为大规模数据处理而设计的快速、通用的计算引擎。最初由加州大学伯克利分校的 AMP 实验室&#xff08;Algorithms, Machines, and Pe…

UI产品经理基础(六):如何解决用户的质疑?

在需求调查中遇到用户质疑“不专业”或“不了解需求”&#xff0c;本质上是用户对产品经理的信任缺失或沟通鸿沟导致的。要化解这种质疑&#xff0c;需从专业能力展示、沟通方式优化、用户参与感提升三个维度切入&#xff0c;结合具体场景采取针对性策略。以下是系统化的解决方…

【大数据技术】大数据技术概念及概述

1. 大数据概念 数据 是实时或观察的结果是对客观事务的逻辑归纳是用于表示客观事物的未经加工的原始素材 数据的产生 对客观事务的计量和记录尝试的数据 单位换算1 byte8 bit1 k1024 byte1 mb1024 k1 g1024 m1 t1024 g1 p1024 t1 e1024 p1 z1024 e1 y1024 z1 b1024 y1 n10…

Python库()

1.概念 Matplotlib 库&#xff1a;是一款用于数据可视化的 Python 软件包&#xff0c;支持跨平台运行&#xff0c;它能够根据 NumPy ndarray 数组来绘制 2D 图像&#xff0c;它使用简单、代码清晰易懂 Matplotlib 图形组成&#xff1a; Figure&#xff1a;指整个图形&#xf…

AI知识补全(八):多模态大模型是什么?

名人说&#xff1a;人生如逆旅&#xff0c;我亦是行人。 ——苏轼《临江仙送钱穆父》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;AI知识补全&#xff08;七&#xff09;&#xff1a;AI Agent 智能…

Docker-MySQL安装-命令解读-常见命令-数据卷挂载-本地目录挂载-自定义镜像-网络-前端部署-DockerCompose

目录 Docker&#xff1a; 安装MySQL&#xff1a; 镜像容器&#xff1a; 镜像仓库&#xff1a; ​编辑命令解读&#xff1a; 镜像命名规范&#xff1a; docker run中常见参数&#xff1a; Docker常见命令&#xff1a; ​编辑数据卷&#xff1a; ​编辑数据卷-操作命令&…