【JavaScript】内置对象 ④ ( Math 内置对象常用方法 | 取绝对值 | 向下取整 | 向上取整 | 四舍五入取整

文章目录

一、Math 内置对象常用方法
- 1、计算绝对值 - Math.abs
- 2、取整计算 - Math.floor 向下取整 / Math.ceil 向上取整 / Math.round 四舍五入
- 3、随机数 - Math.random
- 4、代码示例 - 猜随机数

一、Math 内置对象常用方法

1、计算绝对值 - Math.abs

向 Math.abs() 方法中传入数值 , 会自动取绝对值 ,

如果传入非数字 , 会进行隐式转换 ,

如果成功转换为数字类型 , 则自动计算绝对值 ;
如果无法转为数字类型 , 则返回 NaN 非数字结果 ;

Math.abs() 方法文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/abs

代码示例 :

        // 1. 求绝对值 Math.abs// 输出 : 1console.log(Math.abs(1));// 输出 : 1, -1 的绝对值是 1console.log(Math.abs(-1));// 输出 : 1, 隐式转换 , abs 接收一个 Number 数字类型数据//      将 `-1` 传入 abs 函数 会将 `-1` 进行隐式转换为 -1 数值//      然后再进行绝对值运算console.log(Math.abs(`-1`));// 输出 : NaN//      隐式转换出现问题 , 转换结果为 NaN 非数字console.log(Math.abs(`Tom`));

完整代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style><script>// Math 对象的常用方法// 1. 求绝对值 Math.abs// 输出 : 1console.log(Math.abs(1));// 输出 : 1, -1 的绝对值是 1console.log(Math.abs(-1));// 输出 : 1, 隐式转换 , abs 接收一个 Number 数字类型数据//      将 `-1` 传入 abs 函数 会将 `-1` 进行隐式转换为 -1 数值//      然后再进行绝对值运算console.log(Math.abs(`-1`));// 输出 : NaN//      隐式转换出现问题 , 转换结果为 NaN 非数字console.log(Math.abs(`Tom`));</script>
</head><body>
</body></html>

执行结果 :

在这里插入图片描述

2、取整计算 - Math.floor 向下取整 / Math.ceil 向上取整 / Math.round 四舍五入

取整计算 :

Math.floor() 向下取整 : 返回小于等于一个给定数字的最大整数 ;
- 参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/floor
Math.ceil() 向上取整 : 返回大于等于给定数字的最小整数 ;
- 参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil
Math.round() 四舍五入 : 返回一个数字四舍五入后最接近的整数 ;
- 参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/round
- 该四舍五入时 , 小数是 .5 的话 , 取离它最近较大的数 , 如果是 -3.5 则从 -3 和 -4 中取较大的数 -3 ;

代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style><script>// Math 内置对象 取整计算// Math.floor() 向下取整console.log(Math.floor(3.1));console.log(Math.floor(3.9));// Math.ceil() 向上取整console.log(Math.ceil(3.1));console.log(Math.ceil(3.9));// Math.round() 四舍五入console.log(Math.round(3.1));console.log(Math.round(3.9));console.log(Math.round(-3.5));</script>
</head><body>
</body></html>

执行结果 :

在这里插入图片描述

3、随机数 - Math.random

调用 Math.random() 方法可以得到一个 [0.0 , 1.0) 区间的随机浮点数 , 注意这是一个左闭右开的区间 , 包含 0.0 , 不包含 1.0 ;

参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random

可参考文档中的示例 ,

得到一个两数之间的随机数

        // 2. 得到一个两数之间的随机数function getRandomArbitrary(min, max) {return Math.random() * (max - min) + min;}

得到一个两数之间的随机整数

        // 3. 得到一个两数之间的随机整数function getRandomInt(min, max) {const minCeiled = Math.ceil(min);const maxFloored = Math.floor(max);// 不包含最大值，包含最小值return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled); }

代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style><script>// Math 内置对象 取整计算// 1. Math.random() 可以直接得到一个 [0, 1) 之间的小数// 注意获取的是一个前闭后开区间 , 包含 0.0 , 不包含 1.0// 2. 得到一个两数之间的随机数function getRandomArbitrary(min, max) {return Math.random() * (max - min) + min;}// 3. 得到一个两数之间的随机整数function getRandomInt(min, max) {const minCeiled = Math.ceil(min);const maxFloored = Math.floor(max);// 不包含最大值，包含最小值return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);}console.log(Math.random());console.log(getRandomArbitrary(10, 20));console.log(getRandomInt(10, 20));</script>
</head><body>
</body></html>

执行结果 :

在这里插入图片描述

刷新一下页面 , 得到新的随机数 ;
在这里插入图片描述

再次刷新 ;

在这里插入图片描述

4、代码示例 - 猜随机数

生成一个 1 ~ 10 之间的随机整数 , 然后通过 prompt 输入框猜大小 , 如果输入数字大了或者小了 , 使用 alert 提示用户 ;

代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style><script>// Math 内置对象 取整计算// 1. Math.random() 可以直接得到一个 [0, 1) 之间的小数// 注意获取的是一个前闭后开区间 , 包含 0.0 , 不包含 1.0// 2. 得到一个两数之间的随机数function getRandomArbitrary(min, max) {return Math.random() * (max - min) + min;}// 3. 得到一个两数之间的随机整数function getRandomInt(min, max) {const minCeiled = Math.ceil(min);const maxFloored = Math.floor(max);// 不包含最大值，包含最小值return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);}// 注意 : 获取随机整数 包含最小值 不包含 最大值 , 最大值参数要 +1 //          这样才能取到 整数 10var random = getRandomInt(1, 11);while (true) {var num = prompt("输入 1 ~ 10 之间的数字 猜大小");if (num > random) {alert("大了");} else if (num < random) {alert("小了");} else {alert("猜对了");// 退出循环break;}}</script>
</head><body>
</body></html>