当前位置：首页 > news >正文

JavaScript 对象 Array对象 Math对象

news 2025/8/26 12:48:05

JavaScript 对象

一、Array（数组对象）

数组是 JavaScript 中用于存储有序数据集合的核心内置对象，常用于批量管理数据（如商品列表、用户信息、页面渲染数据等）。其核心优势是支持动态增删改查，并提供丰富的方法简化数据操作。

（一）Array 对象的创建方式

Array 对象有 5 种常见创建方式，日常开发中推荐直接使用 “字面量语法 []”（简洁高效，可读性强）：

不要把家里人的想法强加在自己身上，自己过好自己的就已经很棒了。我是个没啥目标的人，最大的目标就是吃好喝好，平平淡淡的过日子

创建方式	语法	说明	示例
字面量语法（推荐）	`var arr = [值1, 值2, ..., 值n]`	直接声明数组并初始化元素，支持任意数据类型（数字、字符串、对象等）	`var fruits = ["apple", "banana", "orange"];`
构造函数（含初始值）	`var arr = new Array(值1, 值2, ..., 值n)`	通过 `new Array()` 构造函数创建，参数为数组元素	`var nums = new Array(1, 2, 3, 4);`
构造函数（省略 new）	`var arr = Array(值1, 值2, ..., 值n)`	省略 `new` 关键字，效果与上述一致	`var bools = Array(true, false, true);`
构造函数（指定长度）	`var arr = new Array(n)`	参数为单个数字时，表示创建长度为 `n` 的空数组（元素默认 `undefined`）	`var emptyArr = new Array(5); // 长度5，元素均为undefined`
动态赋值	`var arr = new Array(n); arr[索引] = 值`	先创建指定长度的空数组，再通过索引动态赋值	`var colors = new Array(3); colors[0] = "red"; colors[1] = "green";`

（二）Array 对象的核心属性

属性名	作用	示例
`length`	获取或设置数组的长度（元素个数），是数组最常用的属性	`var arr = [1, 2, 3]; console.log(arr.length); // 输出 3`

特殊用法：通过 length 截断或扩展数组

javascript

运行

var arr = [1, 2, 3, 4, 5];
// 1. 截断数组（保留前3个元素）
arr.length = 3;
console.log(arr); // 输出 [1, 2, 3]// 2. 扩展数组（新增元素默认 undefined）
arr.length = 5;
console.log(arr); // 输出 [1, 2, 3, undefined, undefined]

（三）Array 对象的核心方法

按 “数据转换”“增删改”“排序”“查找” 等功能分类，结合实际场景解析用法：

1. 数据转换：数组 ↔ 字符串

用于将数组转为可读性字符串，或配合字符串方法实现数据处理。

方法	语法	功能	示例
`toString()`	`arr.toString()`	将数组转为字符串，元素间用逗号分隔	`var arr = [1, 2, 3]; console.log(arr.toString()); // 输出 "1,2,3"`
`join(连接符)`	`arr.join(分隔符)`	将数组转为字符串，元素间用指定 “连接符” 分隔（连接符为 `""` 时无间隔）	`var arr = ["云南", "九寨沟", "拉萨"]; console.log(arr.join("-")); // 输出 "云南-九寨沟-拉萨"`

扩展：join 与 split 配合使用（数组 ↔ 字符串互转）

javascript

运行

var arr = ["a", "b", "c"];
// 1. 数组 → 字符串（用 "*" 连接）
var str = arr.join("*"); 
console.log(str); // 输出 "a*b*c"// 2. 字符串 → 数组（用 "*" 分割）
var newArr = str.split("*"); 
console.log(newArr); // 输出 ["a", "b", "c"]

2. 数组拼接：合并多个数组 / 数据

用于将多个数组或单个数据合并为一个新数组，不修改原数组，返回新数组。

方法	语法	功能	示例
`concat(数据1, 数据2, ...)`	`arr.concat(值/数组1, 值/数组2, ...)`	拼接内容可以是：单个值（数字、字符串）、数组；若为数组，会拆分为单个元素拼接	`var arr1 = [1, 2]; var arr2 = [3, 4]; var newArr = arr1.concat("a", arr2); console.log(newArr); // 输出 [1, 2, "a", 3, 4]`
展开运算符（ES6）	`[...arr1, ...arr2, 值1, 值2]`	ES6 新增语法，将数组 “展开” 为单个元素，实现简洁拼接（推荐）	`var arr1 = [1, 2]; var arr2 = [3, 4]; var newArr = [...arr1, "b", ...arr2]; console.log(newArr); // 输出 [1, 2, "b", 3, 4]`

面试题：如何实现数组拼接？
答：有两种常用方案：1. 使用 concat() 方法，支持多数据类型拼接；2. 使用 ES6 展开运算符 ...，语法更简洁，推荐在现代项目中使用。

3. 元素增删：修改数组长度（修改原数组）

用于在数组的 “开头” 或 “末尾” 添加 / 删除元素，直接修改原数组，并返回关键值（新增后长度 / 删除的元素）。

方法	语法	功能	返回值	示例
`push(值1, ...)`	`arr.push(元素1, 元素2, ...)`	在数组末尾添加一个或多个元素	新增后数组的长度	`var arr = [1, 2]; var len = arr.push(3, 4); console.log(arr); // [1,2,3,4]；console.log(len); // 4`
`unshift(值1, ...)`	`arr.unshift(元素1, 元素2, ...)`	在数组开头添加一个或多个元素	新增后数组的长度	`var arr = [3, 4]; var len = arr.unshift(1, 2); console.log(arr); // [1,2,3,4]；console.log(len); // 4`
`pop()`	`arr.pop()`	删除数组最后一个元素	被删除的元素	`var arr = [1, 2, 3]; var delVal = arr.pop(); console.log(arr); // [1,2]；console.log(delVal); // 3`
`shift()`	`arr.shift()`	删除数组第一个元素	被删除的元素	`var arr = [1, 2, 3]; var delVal = arr.shift(); console.log(arr); // [2,3]；console.log(delVal); // 1`

注意：push/unshift 返回 “新长度”，pop/shift 返回 “被删除的元素”，使用时需注意区分返回值用途。

4. 精准操作：指定位置增删改（splice）

slice 是数组最强大的方法之一，支持在任意位置删除、添加、替换元素，直接修改原数组，返回 “被删除的元素组成的新数组”（无删除则返回空数组）。

功能	语法	说明	示例
删除元素	`arr.splice(起始索引, 删除长度)`	从 “起始索引” 开始，删除指定 “长度” 的元素	`var arr = [1,2,3,4,5]; var delArr = arr.splice(1, 2); console.log(arr); // [1,4,5]；console.log(delArr); // [2,3]`
替换元素	`arr.splice(起始索引, 删除长度, 新元素1, ...)`	删除指定元素后，在该位置插入新元素	`var arr = [1,2,3,4]; var delArr = arr.splice(1, 2, "a", "b"); console.log(arr); // [1,"a","b",4]；console.log(delArr); // [2,3]`
添加元素	`arr.splice(起始索引, 0, 新元素1, ...)`	“删除长度” 设为 0，直接在指定位置插入新元素	`var arr = [1,4]; var delArr = arr.splice(1, 0, 2, 3); console.log(arr); // [1,2,3,4]；console.log(delArr); // []`

场景示例：购物车商品管理（删除指定商品、替换商品数量、插入新商品）

javascript

运行

// 购物车数组（每个元素是商品对象）
var cart = [{ id: 1, name: "手机", price: 3999 },{ id: 2, name: "耳机", price: 299 },{ id: 3, name: "充电宝", price: 99 }
];// 1. 删除 id=2 的耳机（先找到索引）
var index = cart.findIndex(item => item.id === 2);
cart.splice(index, 1);
console.log("删除后：", cart); // 输出 [{id:1,...}, {id:3,...}]// 2. 替换 id=3 的充电宝为“无线充电器”
var index3 = cart.findIndex(item => item.id === 3);
cart.splice(index3, 1, { id: 4, name: "无线充电器", price: 129 });
console.log("替换后：", cart); // 输出 [{id:1,...}, {id:4,...}]// 3. 在开头插入“手机壳”
cart.splice(0, 0, { id: 5, name: "手机壳", price: 29 });
console.log("插入后：", cart); // 输出 [{id:5,...}, {id:1,...}, {id:4,...}]

5. 排序与反转：调整元素顺序

用于对数组元素进行升序 / 降序排序，或直接反转数组顺序，均修改原数组。

方法	语法	功能	示例
`reverse()`	`arr.reverse()`	反转数组元素顺序（从后往前排列）	`var arr = [1,2,3,4]; arr.reverse(); console.log(arr); // [4,3,2,1]`
`sort(回调函数)`	`arr.sort((a, b) => { return 比较逻辑 })`	默认按 “字符串 Unicode 编码” 排序，需传入回调函数实现数字排序	1. 升序：`[3,1,2].sort((a,b) => a - b) // [1,2,3]` 2. 降序：`[3,1,2].sort((a,b) => b - a) // [3,2,1]`

注意：sort 方法的 “坑” 与解决
默认 sort() 会将元素转为字符串排序，导致数字排序异常（如 [10, 2, 3].sort() 会输出 [10, 2, 3]），必须通过回调函数 (a,b) => a - b 实现正确的数字排序。

场景示例：商品价格排序（升序 / 降序）

javascript

运行

var goods = [{ name: "衬衫", price: 199 },{ name: "裤子", price: 299 },{ name: "T恤", price: 99 }
];// 1. 按价格升序（从便宜到贵）
goods.sort((a, b) => a.price - b.price);
console.log("价格升序：", goods); // 输出 [T恤(99), 衬衫(199), 裤子(299)]// 2. 按价格降序（从贵到便宜）
goods.sort((a, b) => b.price - a.price);
console.log("价格降序：", goods); // 输出 [裤子(299), 衬衫(199), T恤(99)]

6. 截取与查找：获取部分元素 / 定位元素

用于从数组中截取部分元素，或查找元素的位置 / 值，不修改原数组。

方法	语法	功能	示例
`slice(起始索引, [结束索引])`	`arr.slice(start, [end])`	截取从 `start` 到 `end`（不包含 `end`）的元素，返回新数组；支持负索引（从末尾开始）	`var arr = [1,2,3,4,5]; console.log(arr.slice(1,3)); // [2,3]；console.log(arr.slice(2)); // [3,4,5]；console.log(arr.slice(-2)); // [4,5]`
`indexOf(元素, [起始索引])`	`arr.indexOf(目标元素, [start])`	从左到右查找元素，返回第一个匹配的索引；未找到返回 `-1`	`var arr = [1,2,3,2,1]; console.log(arr.indexOf(2)); // 1；console.log(arr.indexOf(2, 2)); // 3`
`lastIndexOf(元素, [起始索引])`	`arr.lastIndexOf(目标元素, [start])`	从右到左查找元素，返回第一个匹配的索引；未找到返回 `-1`	`var arr = [1,2,3,2,1]; console.log(arr.lastIndexOf(2)); // 3；console.log(arr.lastIndexOf(2, 2)); // 1`
`includes(元素)`	`arr.includes(目标元素)`	判断数组是否包含指定元素，返回 `true`/`false`（ES6 新增）	`var arr = [1,2,3]; console.log(arr.includes(2)); // true；console.log(arr.includes(4)); // false`

场景示例：查找数组中重复元素的位置

javascript

运行

var arr = ["a", "b", "c", "b", "a", "d"];
var target = "b"; // 要查找的重复元素
var positions = []; // 存储重复元素的索引// 1. 首次查找目标元素的索引
var index = arr.indexOf(target);// 2. 循环查找所有匹配的索引
while (index !== -1) {positions.push(index);index = arr.indexOf(target, index + 1); // 从下一个位置继续查找
}console.log(`${target} 出现的位置：`, positions); // 输出 "b 出现的位置：[1, 3]"

7. 其他实用方法

方法	语法	功能	示例
`Array.isArray(值)`	`Array.isArray(待判断值)`	判断一个值是否为数组（推荐，比 `typeof` 更准确）	`console.log(Array.isArray([1,2])); // true；console.log(Array.isArray("123")); // false`
`delete arr[索引]`	`delete arr[index]`	删除指定索引的元素，返回 `true`；但会保留数组长度，删除位置变为 `undefined`	`var arr = [1,2,3]; delete arr[1]; console.log(arr); // [1, undefined, 3]；console.log(arr.length); // 3`

（四）Array 对象的经典案例

案例 1：表单数据管理（添加 / 删除数据）

需求：通过表单输入内容，点击 “添加” 按钮将数据加入列表；点击列表项的 “删除” 按钮，移除对应数据。

html

预览

<style>.container { width: 500px; margin: 20px auto; }#input-text { width: 300px; padding: 8px; }#add-btn { padding: 8px 16px; cursor: pointer; }#list { list-style: none; padding: 0; margin-top: 20px; }#list li { padding: 8px; border: 1px solid #eee; margin-bottom: 8px; display: flex; justify-content: space-between; }.del-btn { color: red; cursor: pointer; }
</style><div class="container"><input type="text" id="input-text" placeholder="请输入内容"><button id="add-btn">添加到列表</button><ul id="list"></ul>
</div><script>// 1. 初始化数据数组（存储列表数据）var dataList = [];// 2. 获取DOM元素var inputText = document.getElementById("input-text");var addBtn = document.getElementById("add-btn");var listUl = document.getElementById("list");// 3. 渲染列表（将数组数据显示到页面）function renderList() {// 清空现有列表listUl.innerHTML = "";// 遍历数组，生成列表项dataList.forEach((item, index) => {var li = document.createElement("li");li.innerHTML = `<span>${item}</span><span class="del-btn" data-index="${index}">删除</span>`;listUl.appendChild(li);});// 绑定删除按钮事件document.querySelectorAll(".del-btn").forEach(btn => {btn.onclick = function() {var index = parseInt(this.getAttribute("data-index"));// 调用splice删除对应索引的元素dataList.splice(index, 1);// 重新渲染列表renderList();};});}// 4. 添加数据到数组addBtn.onclick = function() {var text = inputText.value.trim(); // 去除首尾空格if (text) {// 调用push添加到数组末尾dataList.push(text);// 清空输入框inputText.value = "";// 重新渲染列表renderList();} else {alert("请输入内容");}};// 5. 支持回车键添加inputText.onkeyup = function(e) {if (e.key === "Enter") {addBtn.click(); // 触发添加按钮的点击事件}};
</script>

案例 2：数组去重（多种方案）

需求：去除数组中的重复元素，返回新的无重复数组。

方案 1：利用 indexOf 或 includes

javascript

运行

function uniqueArray(arr) {var newArr = [];for (var i = 0; i < arr.length; i++) {// 若新数组中不包含当前元素，则添加if (newArr.indexOf(arr[i]) === -1) { // 或 !newArr.includes(arr[i])newArr.push(arr[i]);}}return newArr;
}// 测试
var arr = [1, 2, 2, 3, 3, 3, "a", "a"];
console.log(uniqueArray(arr)); // 输出 [1, 2, 3, "a"]

方案 2：利用 ES6 Set（简洁高效）

javascript

运行

function uniqueArrayES6(arr) {// Set 自动去重，再通过 [...set] 转为数组return [...new Set(arr)];
}// 测试
var arr = [1, 2, 2, 3, 3, 3, "a", "a"];
console.log(uniqueArrayES6(arr)); // 输出 [1, 2, 3, "a"]

案例 3：数组扁平化（多维数组转一维数组）

需求：将多维数组（如 [1, [2, [3, 4], 5]]）转为一维数组 [1, 2, 3, 4, 5]。

方案 1：递归遍历

javascript

运行

function flattenArray(arr) {var result = [];for (var i = 0; i < arr.length; i++) {// 若元素是数组，则递归处理，否则直接添加if (Array.isArray(arr[i])) {result = result.concat(flattenArray(arr[i]));} else {result.push(arr[i]);}}return result;
}// 测试
var multiArr = [1, [2, [3, 4], 5], 6];
console.log(flattenArray(multiArr)); // 输出 [1, 2, 3, 4, 5, 6]

方案 2：利用 join 和 split（仅适用于纯数字 / 字符串数组）

javascript

运行

function flattenArraySimple(arr) {// 先转为字符串（自动扁平化），再按逗号分割为数组，最后转换为原类型return arr.join(",").split(",").map(item => {// 若为数字则转换，否则保留字符串return isNaN(Number(item)) ? item : Number(item);});
}// 测试
var multiArr = [1, [2, [3, 4], 5], 6];
console.log(flattenArraySimple(multiArr)); // 输出 [1, 2, 3, 4, 5, 6]

（五）Array 对象的核心面试题

面试题 1：`slice` 与 `splice` 的区别

区别	`slice(start, end)`	`splice(start, length, ...items)`
是否修改原数组	否（返回新数组）	是（直接修改原数组）
功能	仅截取元素	可删除、添加、替换元素
参数	起始索引、结束索引（不包含）	起始索引、删除长度、新增元素（可选）
返回值	截取的新数组	被删除元素组成的数组（无删除则返回空数组）

面试题 2：如何判断一个变量是否为数组？

推荐方案：

Array.isArray(arr)：ES5 新增的数组判断方法，最准确（推荐）。
javascript
运行
```
console.log(Array.isArray([1,2,3])); // true
console.log(Array.isArray("123"));   // false
```
Object.prototype.toString.call(arr) === "[object Array]"：兼容性好，可区分数组与其他对象。
javascript
运行
```
console.log(Object.prototype.toString.call([1,2,3])); // "[object Array]"
```

面试题 3：数组常用遍历方法有哪些？（扩展）

除了 for 循环，ES5 及以上提供了多种遍历方法：

forEach((item, index, arr) => {})：遍历数组，无返回值。
map((item) => { return 新值 })：遍历数组，返回新数组（每个元素为处理后的值）。
filter((item) => { return 条件 })：筛选符合条件的元素，返回新数组。
find((item) => { return 条件 })：返回第一个符合条件的元素（ES6）。

（六）Array 对象学习总结

核心特性：数组是有序数据集合，length 属性是核心，支持动态增删改查。
重点方法分类：
- 转换：toString()、join()
- 增删：push()、pop()、unshift()、shift()、splice()
- 拼接：concat()、展开运算符 ...
- 排序：sort()、reverse()
- 查找：indexOf()、lastIndexOf()、includes()、slice()
实践建议：
- 优先使用字面量 [] 创建数组，简洁高效。
- 区分 “修改原数组” 和 “返回新数组” 的方法，避免意外修改数据。
- splice 是 “万能操作” 方法，需熟练掌握其删除、添加、替换功能。
- 现代项目中可结合 ES6 特性（如 Set 去重、展开运算符拼接）提升开发效率。

二、Math（数学对象）

Math 是 JavaScript 专门处理数学计算的内置对象，无需通过 new 实例化（属于 “静态对象”），可直接通过 Math.属性 或 Math.方法() 调用，覆盖常用的数学运算（如取整、随机数、最值计算等）。

（一）Math 对象的核心属性

Math 对象仅提供 1 个常用属性 Math.PI，用于表示数学中的 “圆周率 π”，值约为 3.141592653589793，常用于圆的周长、面积计算。

javascript

// 示例：计算半径为 5 的圆的周长和面积
var r = 5;
var circumference = 2 * Math.PI * r; // 周长公式：2πr
var area = Math.PI * r * r;          // 面积公式：πr²console.log("圆的周长：", circumference); // 输出 "圆的周长：31.41592653589793"
console.log("圆的面积：", area);          // 输出 "圆的面积：78.53981633974483"

（二）Math 对象的核心方法

按 “取整”“随机数”“最值与幂运算”“绝对值与开方” 分类，结合公式和案例解析用法：

1. 取整方法：处理小数的整数转换

用于将小数转为整数，不同方法对应 “四舍五入”“向上取整”“向下取整” 三种逻辑，均返回整数。

方法	语法	功能	示例
`Math.round(number)`	`Math.round(待处理数字)`	四舍五入取整（小数部分 ≥0.5 向上取整，＜0.5 向下取整）	`Math.round(8.5); // 9`；`Math.round(6.4); // 6`；`Math.round(-3.6); // -4`
`Math.ceil(number)`	`Math.ceil(待处理数字)`	向上取整（无论小数部分是多少，均向更大的整数靠拢）	`Math.ceil(6.1); // 7`；`Math.ceil(6.9); // 7`；`Math.ceil(-2.3); // -2`
`Math.floor(number)`	`Math.floor(待处理数字)`	向下取整（无论小数部分是多少，均向更小的整数靠拢）	`Math.floor(6.9); // 6`；`Math.floor(6.1); // 6`；`Math.floor(-2.3); // -3`

注意：Math.floor() 与 parseInt() 的区别

Math.floor() 仅做 “向下取整”，不处理非数字（如 Math.floor("6.9") 会先转为数字 6.9，再返回 6）；
parseInt() 主要用于 “字符串转整数”，会忽略非数字部分（如 parseInt("6.9abc") 返回 6），需根据场景选择。

2. 随机数方法：生成随机值

Math.random() 是 Math 对象最常用的方法之一，用于生成 0.0（包含）~ 1.0（不包含） 之间的随机浮点数，结合取整方法可扩展为 “指定范围的随机整数”。

场景	公式	示例
生成 [0, n) 之间的随机整数	`Math.floor(Math.random() * n)`	生成 0~9 的随机数：`Math.floor(Math.random() * 10) // 可能值：0,1,...,9`
生成 [1, n] 之间的随机整数	`Math.floor(Math.random() * n) + 1`	生成 1~10 的随机数：`Math.floor(Math.random() * 10) + 1 // 可能值：1,2,...,10`
生成 [min, max] 之间的随机整数（通用公式）	`Math.floor(Math.random() * (max - min + 1)) + min`	生成 5~10 的随机数：`Math.floor(Math.random() * (10-5+1)) +5 // 可能值：5,6,...,10`

案例 1：封装通用随机整数函数
将 “指定范围随机整数” 逻辑封装为函数，便于重复调用：

javascript

/*** 生成 [min, max] 之间的随机整数（包含 min 和 max）* @param {number} min - 最小值* @param {number} max - 最大值* @returns {number} 随机整数*/
function getRandomInt(min, max) {// 先校验参数：确保 min ≤ max，且均为数字if (typeof min !== "number" || typeof max !== "number" || min > max) {throw new Error("参数必须是数字，且最小值不能大于最大值");}// 通用随机整数公式return Math.floor(Math.random() * (max - min + 1)) + min;
}// 测试：生成 7~18 的随机数
console.log(getRandomInt(7, 18)); // 可能值：7,8,...,18

案例 2：生成随机 16 进制字符串（简洁用法）
利用 Math.random().toString(16) 生成包含 16 进制字符的字符串，再通过 substring(2) 去除前缀，可用于生成简单的随机标识：

javascript

// 生成随机 16 进制字符串（长度约 10~12 位）
var randomHex = Math.random().toString(16).substring(2);
console.log(randomHex); // 示例输出："a3f5d7b9c2"

3. 最值与幂运算：计算最大 / 最小值、幂次

用于快速获取多个数字的最大值 / 最小值，或计算 “某个数的 n 次方”，无需手动循环比较或累加。

方法	语法	功能	示例
`Math.max(x1, x2, ..., xn)`	`Math.max(数字1, 数字2, ...)`	获取多个数字中的最大值；若参数含非数字，返回 `NaN`	`Math.max(1, 7, 6, 4, 9, 2); // 9`；`Math.max(5, -3, 0); // 5`
`Math.min(x1, x2, ..., xn)`	`Math.min(数字1, 数字2, ...)`	获取多个数字中的最小值；若参数含非数字，返回 `NaN`	`Math.min(1, 7, 6, 4, 9, 2); // 1`；`Math.min(5, -3, 0); // -3`
`Math.pow(x, y)`	`Math.pow(底数, 指数)`	计算 “底数的指数次方”（即 xʸ）	`Math.pow(5, 2); // 25`（5²）；`Math.pow(2, 3); // 8`（2³）；`Math.pow(10, -2); // 0.01`（10⁻²）

扩展：数组的最大 / 最小值计算
Math.max() 和 Math.min() 不直接支持数组参数，需通过 “展开运算符 ...” 或 apply() 将数组转为多个参数：

javascript

var arr = [3, 1, 4, 2, 5];
// 方法 1：使用展开运算符（ES6，推荐）
var arrMax = Math.max(...arr); 
var arrMin = Math.min(...arr); // 方法 2：使用 apply()（兼容性好）
// var arrMax = Math.max.apply(Math, arr);
// var arrMin = Math.min.apply(Math, arr);console.log("数组最大值：", arrMax); // 输出 "数组最大值：5"
console.log("数组最小值：", arrMin); // 输出 "数组最小值：1"

4. 其他常用方法：绝对值、开方

方法	语法	功能	示例
`Math.abs(number)`	`Math.abs(数字)`	获取数字的绝对值（负数转正数，正数 / 0 不变）	`Math.abs(-10); // 10`；`Math.abs(5); // 5`；`Math.abs(0); // 0`
`Math.sqrt(number)`	`Math.sqrt(数字)`	计算数字的平方根（仅支持非负数，负数返回 `NaN`）	`Math.sqrt(9); // 3`；`Math.sqrt(16); // 4`；`Math.sqrt(-4); // NaN`

（三）Math 对象的经典案例

案例 1：生成随机 RGB 颜色

RGB 颜色由 “红（R）、绿（G）、蓝（B）” 三通道组成，每个通道的取值范围是 0~255，结合 “随机整数函数” 可生成随机颜色。

javascript

// 1. 复用之前封装的随机整数函数
function getRandomInt(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;
}// 2. 封装随机 RGB 颜色函数
function getRandomRGB() {// 生成 R、G、B 三个通道的随机值（0~255）var r = getRandomInt(0, 255);var g = getRandomInt(0, 255);var b = getRandomInt(0, 255);// 拼接为 RGB 颜色格式（如 "rgb(123, 45, 67)"）return `rgb(${r}, ${g}, ${b})`;
}// 3. 测试：生成随机颜色并设置页面背景
document.body.style.backgroundColor = getRandomRGB();
console.log("当前随机颜色：", getRandomRGB()); // 示例输出："rgb(23, 156, 89)"

案例 2：模拟 “掷骰子” 功能

骰子的点数范围是 1~6，通过 “随机整数函数” 生成 1~6 的随机数，模拟掷骰子结果。

html

预览

<style>.dice {width: 100px;height: 100px;border: 2px solid #333;border-radius: 8px;margin: 20px auto;display: flex;align-items: center;justify-content: center;font-size: 36px;font-weight: bold;}#rollBtn {display: block;margin: 0 auto;padding: 8px 16px;cursor: pointer;}
</style><div class="dice" id="dice">?</div>
<button id="rollBtn">掷骰子</button><script>var diceElement = document.getElementById("dice");var rollBtn = document.getElementById("rollBtn");// 掷骰子函数function rollDice() {// 生成 1~6 的随机整数（骰子点数）var point = Math.floor(Math.random() * 6) + 1;// 更新页面显示diceElement.innerText = point;// 随机设置骰子颜色（增强视觉效果）diceElement.style.color = `rgb(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)})`;}// 点击按钮触发掷骰子rollBtn.onclick = rollDice;
</script>

案例 3：计算两个点之间的距离

已知平面直角坐标系中两个点的坐标 (x1,y1) 和 (x2,y2)，根据 “两点间距离公式”（√[(x2-x1)² + (y2-y1)²]）计算距离，需用到 Math.abs()（绝对值）、Math.pow()（平方）、Math.sqrt()（开方）。

javascript

/*** 计算两点 (x1,y1) 和 (x2,y2) 之间的距离* @param {number} x1 - 第一个点的 x 坐标* @param {number} y1 - 第一个点的 y 坐标* @param {number} x2 - 第二个点的 x 坐标* @param {number} y2 - 第二个点的 y 坐标* @returns {number} 两点间距离（保留 2 位小数）*/
function getDistance(x1, y1, x2, y2) {// 计算横向差的平方：(x2 - x1)²var dxSquare = Math.pow(x2 - x1, 2);// 计算纵向差的平方：(y2 - y1)²var dySquare = Math.pow(y2 - y1, 2);// 距离公式：√(dx² + dy²)，保留 2 位小数var distance = Math.sqrt(dxSquare + dySquare);return Math.round(distance * 100) / 100; // 四舍五入保留 2 位小数
}// 测试：计算 (1,2) 和 (4,6) 之间的距离
console.log(getDistance(1, 2, 4, 6)); // 输出 5.00（实际距离为 5）

（四）Math 对象的核心面试题

面试题 1：如何生成 [min, max] 之间的随机整数？请封装函数并说明原理。

答案：
核心原理：Math.random() 生成 [0,1) 的随机浮点数，乘以 (max - min + 1) 后，范围变为 [0, max-min+1)，再通过 Math.floor() 向下取整得到 [0, max-min] 的整数，最后加 min 偏移到 [min, max] 范围。

封装函数：

javascript

function getRandomInt(min, max) {// 参数校验（可选，增强鲁棒性）if (typeof min !== "number" || typeof max !== "number" || min > max) {throw new Error("参数必须为数字且 min ≤ max");}return Math.floor(Math.random() * (max - min + 1)) + min;
}

面试题 2：`Math.round(1.5)` 和 `Math.round(-1.5)` 的结果分别是什么？为什么？

答案：

Math.round(1.5) 结果为 2；
Math.round(-1.5) 结果为 -1。

原因：Math.round() 的 “四舍五入” 逻辑是 “向最接近的整数靠拢，若距离两个整数相等，则向正无穷方向取整”。1.5 距离 1 和 2 相等，向正无穷取 2；-1.5 距离 -1 和 -2 相等，向正无穷取 -1。

（五）、Math 对象学习总结

核心特性：静态对象，无需实例化，直接通过 Math 调用；方法专注于数学计算，无副作用（不修改外部数据）。
重点方法记忆：
- 取整：round（四舍五入）、ceil（向上）、floor（向下）；
- 随机：random（结合公式生成指定范围整数）；
- 最值：max/min（需注意数组参数的处理方式）；
- 其他：abs（绝对值）、pow（幂次）、sqrt（开方）。
实践技巧：
- 生成随机颜色、随机标识时，优先结合 Math.random() 和 RGB/16 进制格式；
- 处理数组最值时，用展开运算符 ... 简化参数传递；
- 涉及精度要求（如金额、距离），通过 Math.round(num * 10^n) / 10^n 保留 n 位小数。