Math对象 - 技术栈

js Math对象

JavaScript中的Math对象是一个内置工具类，无需实例化即可直接使用，它提供了丰富的数学常量、方法和函数，用于执行各种数学计算。

一、Math对象基础

1. 简介

不是构造函数，不能使用new Math()创建实例
所有属性和方法都是静态的，直接通过Math调用
提供数学常数、基本运算、取整、随机数生成功能

2. Math对象常用属性（数学常数）

属性	描述	近似值
`Math.PI`	圆周率	3.14159
`Math.E`	自然对数的底数e	2.718
`Math.LN2`	2的自然对数	0.693
`Math.LN10`	10的自然对数	2.302
`Math.LOG2E`	以2为底e的对数	1.442
`Math.LOG10E`	以10为底e的对数	0.434
`Math.SQRT2`	2的平方根	1.414
`Math.SQRT1_2`	1/2的平方根	0.707

javascript 复制代码

console.log(Math.PI); // 3.141592653589793
console.log(Math.E);  // 2.718281828459045
const radius = 5;
const area = Math.PI * radius * radius;
console.log(area); // 78.53981633974483

二、Math对象常用方法

1. 取整和绝对值相关方法

Math.abs(x): 返回x的绝对值
Math.ceil(x): 向上取整（返回大于或等于x的最小整数）
Math.floor(x): 向下取整（返回小于或等于x的最大整数）
Math.round(x): 四舍五入取整
Math.trunc(x): 直接去掉小数部分（ES6新增）

javascript 复制代码

console.log(Math.abs(-5));   // 5
console.log(Math.ceil(4.2));  // 5
console.log(Math.floor(4.9)); // 4
console.log(Math.round(4.5)); // 5
console.log(Math.trunc(4.9)); // 4

// 负数取整示例
console.log(Math.floor(-3.1)); // -4
console.log(Math.ceil(-3.1));  // -3
console.log(Math.round(-1.5)); // -1

2. 最大值和最小值相关方法

Math.max(x1, x2, ...): 返回多个参数中的最大值
Math.min(x1, x2, ...): 返回多个参数中的最小值

javascript 复制代码

console.log(Math.max(1, 3, 2)); // 3
console.log(Math.min(1, 3, 2)); // 1

// 处理数组
const numbers = ;
console.log(Math.max(...numbers)); // 3<websource>source_group_web_2</websource>

// 限制数值范围
function clamp(value, min, max) {
  return Math.max(min, Math.min(value, max));
}
console.log(clamp(120, 0, 100)); // 100
console.log(clamp(-5, 0, 100));  // 0

3. 幂和开方运算

Math.pow(x, y): 返回x的y次幂
Math.sqrt(x): 返回x的平方根
Math.cbrt(x): 返回x的立方根
Math.exp(x): 返回e的x次幂

javascript 复制代码

console.log(Math.pow(2, 3));  // 8
console.log(Math.sqrt(16));   // 4
console.log(Math.cbrt(27));   // 3
console.log(Math.exp(1));    // 约等于 Math.E

4. 随机数生成

Math.random(): 返回0到1之间的随机数（包括0，不包括1）

javascript 复制代码

// 生成0-1之间的随机数
console.log(Math.random()); // 0.92504

// 生成大于等于min且小于max的随机值
console.log(Math.random() * (3 - 1) + 1);  // 1<=返回结果<3
console.log(Math.random() * (20 - 10) + 10); // 10<=返回结果<20

// 生成0到任意数之间的随机整数
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
console.log(getRandom(1, 3)); // 最小值1，最大值3

5. 三角函数

Math.sin(x): 返回x的正弦值
Math.cos(x): 返回x的余弦值
Math.tan(x): 返回x的正切值
Math.asin(x): 返回x的反正弦值
Math.acos(x): 返回x的反余弦值
Math.atan(x): 返回x的反正切值

javascript 复制代码

console.log(Math.sin(Math.PI / 2)); // 1
console.log(Math.cos(0));           // 1
console.log(Math.tan(Math.PI / 4)); // 1

三、项目实战案例

1. 金额计算与取整

场景：用户余额100元，商品单价3.5元，计算最多可购买数量（需向下取整）

javascript 复制代码

const money = 100; // 用户余额（元）
const price = 3.5; // 商品单价（元）
// 向下取整：100/3.5≈28.57，最多买28个
const maxBuy = Math.floor(money / price);
console.log(`最多可购买：${maxBuy}个`); // 输出：28个

2. 快递盒数量计算

场景：105件商品，每个快递盒最多装10件，计算最少需要几个盒子（需向上取整）

javascript 复制代码

const totalGoods = 105; // 总商品数
const boxCapacity = 10; // 每个盒子容量
// 向上取整：105/10=10.5，最少需要11个盒子
const minBox = Math.ceil(totalGoods / boxCapacity);
console.log(`最少需要快递盒：${minBox}个`); // 输出：11个

金额四舍五入到分

场景：金额计算后需保留2位小数（分）

javascript 复制代码

const amount = 19.865; // 原始金额
// 先乘100（转为分），四舍五入后再除以100（转回元）
const roundedAmount = Math.round(amount * 100) / 100;
console.log(`四舍五入后金额：${roundedAmount}元`); // 输出：19.87元

4. 学生成绩分析

场景：找出学生成绩的最高分和最低分

javascript 复制代码

// 学生成绩数组
const scores = ;
// 展开数组，找最大值和最小值
const maxScore = Math.max(...scores);
const minScore = Math.min(...scores);
console.log(`最高分：${maxScore}`); // 输出：95
console.log(`最低分：${minScore}`); // 输出：60

5. 商品价格分析

场景：找出商品列表中的最低价

javascript 复制代码

// 商品列表（含价格）
const products = [
  { name: "手机", price: 2999 },
  { name: "耳机", price: 399 },
  { name: "平板", price: 1999 }
];
// 提取所有价格到数组，再找最小值
const prices = products.map(item => item.price);
const minPrice = Math.min(...prices);
console.log(`商品最低价：${minPrice}元`); // 输出：399元

6. 滑动事件距离计算

场景：移动端滑动事件中计算滑动距离（使用勾股定理）

javascript 复制代码

// 起始点坐标
const startX = 100, startY = 200;
// 移动后坐标
const moveX = 150, moveY = 250;
// 计算滑动距离
const distance = Math.sqrt(
  Math.pow(moveX - startX, 2) + 
  Math.pow(moveY - startY, 2)
);
console.log(`滑动距离：${distance}px`);

7. 猜数字游戏

场景：生成10-20之间的随机整数

javascript 复制代码

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
console.log(getRandom(10, 20)); // 生成10-20之间的随机整数

四、高级应用：Math.js库

当原生Math对象无法满足需求时，可以使用Math.js库，它提供了更强大的数学计算能力：

支持高精度计算，解决浮点数精度问题
支持复数、分数、矩阵、单位换算
内置表达式解析器，可直接计算字符串公式
兼容原生Math用法，API友好

安装与引入

bash 复制代码

npm install mathjs

javascript 复制代码

// 全量引入
import { create, all } from 'mathjs';
const math = create(all);

// 或按需引入
import { add, sqrt, evaluate } from 'mathjs';

// 浏览器CDN
<script src="https://cdn.jsdelivr.net/npm/mathjs/lib/browser/math.js"></script>

基础用法

javascript 复制代码

// 基本运算
console.log(math.add(2, 3));    // 5
console.log(math.subtract(7, 3)); // 4
console.log(math.multiply(2, 8)); // 16
console.log(math.divide(9, 3));  // 3

// 表达式解析
console.log(math.evaluate('sqrt(3^2 + 4^2)')); // 5
console.log(math.evaluate('1.2 * (2 + 4.5)'));  // 7.8

// 复数支持
const c1 = math.complex(2, 3);  // 2 + 3i
const c2 = math.complex('1-2i');
console.log(math.add(c1, c2));   // 3 + i

五、注意事项

负数取整：Math.floor(-3.1)是-4，不是-3，需根据实际需求选择方法
浮点精度问题：JavaScript的浮点数计算存在精度问题，如0.1 + 0.2 !== 0.3
参数类型：若传入非数值参数（且无法转换为数值），方法会返回NaN
兼容性：Math.trunc()是ES6新增方法，若需兼容IE浏览器，可用Math.floor(x)（正数）或Math.ceil(x)（负数）替代