文章目录
- 一、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
// 输出 : 1
console.log(Math.abs(1));
// 输出 : 1, -1 的绝对值是 1
console.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
// 输出 : 1
console.log(Math.abs(1));
// 输出 : 1, -1 的绝对值是 1
console.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
// 这样才能取到 整数 10
var 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>
执行结果 :
