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

韩曙亮

发布于 2024-05-08 08:13:38

1600

发布于 2024-05-08 08:13:38

文章被收录于专栏：韩曙亮的移动开发专栏

一、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>

执行结果 :