【JavaScript】内置对象 ③ ( Math 内置对象 | Math 内置对象简介 | Math 内置对象的使用 )

文章目录

  • [一、Math 内置对象](#一、Math 内置对象)
    • [1、Math 内置对象简介](#1、Math 内置对象简介)
    • [2、Math 内置对象的使用](#2、Math 内置对象的使用)
  • 二、代码示例
    • [1、代码示例 - Math 内置对象的使用](#1、代码示例 - Math 内置对象的使用)
    • [2、代码示例 - 封装 Math 内置对象](#2、代码示例 - 封装 Math 内置对象)

一、Math 内置对象


1、Math 内置对象简介

JavaScript 中的 Math 内置对象 是一个 全局对象 , 该对象 提供了 常用的 数学常数 和 数学计算函数 ;

利用 Math 对象 的 函数和常数 , 可以完成各种数学运算任务 , 如 :

  • 获取最大 / 最小值
  • 求绝对值
  • 随机数生成
  • 三角函数计算
  • 对数计算
  • 取整

Math 文档地址 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math

2、Math 内置对象的使用

Math 不是 构造函数 , 其所有的 属性 和 方法 都是静态的 , 不需要使用 new 操作符

JavaScript 引擎初始化完毕后 , 该 Math 内置对象就会被创建 , 可以直接调用 Math 对象 ;

在代码中 , 可以直接 通过调用

  • Math.属性名
javascript 复制代码
        // 打印 Math 内置对象的常量
        // 输出 : 3.141592653589793
        console.log(Math.PI)
  • math.方法名()
javascript 复制代码
        // 调用 Math 内置对象的方法
        // 输出 : 3
        console.log(Math.max(1, 2, 3))

的方式 , 调用该 Math 内置对象的 属性 和 方法 ;

二、代码示例


1、代码示例 - Math 内置对象的使用

完整代码示例 :

html 复制代码
<!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 内置对象的常量
        // 输出 : 3.141592653589793
        console.log(Math.PI)

        // 调用 Math 内置对象的方法
        // 输出 : 3
        console.log(Math.max(1, 2, 3))
    </script>
</head>

<body>
</body>

</html>

执行结果 :

2、代码示例 - 封装 Math 内置对象

自己自定义一个对象 , 封装 一个 自定义数学计算对象 , 提供 圆周率 值 属性 , 和 求 最大值 的方法 ;

参考 【JavaScript】对象 ① ( 对象概念 | 对象使用场景 | 使用字面量创建对象 | 空对象字面量 | 小括号 / 中括号 / 大括号 作用 ) 博客 , 使用字面量创建对象 代码 ;

javascript 复制代码
var person = {  
    name: "Tom",  
    age: 18,  
    hello: function() {  
        return this.name+ " is " + this.age + " years old";  
    }  
};

完整代码示例 :

html 复制代码
<!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>
        var math = {
            // 封装 圆周率 属性
            PI: Math.PI,

            // 封装 求最大值的方法
            max: function() {
                // 此处不知道输入多少个参数 , 使用 arguments 获取不同个数的实参
                var max = arguments[0]
                for (var i = 0; i < arguments.length; i++) {
                    if (arguments[i] > max) {
                        max = arguments[i]
                    }
                }
                return max
            }
        }

        // 调用自定义对象的属性
        console.log(math.PI)

        // 调用自定义对象的方法
        console.log(math.max(9, 5, 2, 7))
    </script>
</head>

<body>
</body>

</html>

执行结果 :

相关推荐
hixiong1232 分钟前
C# 编写一个XmlToDota的转换工具
开发语言·人工智能·yolo·c#
林太白5 分钟前
Zustand状态库(简洁、强大、易用的React状态管理工具)
前端·javascript·react.js
Juchecar9 分钟前
Vue3 模板引用 useTemplateRef 详解
前端·vue.js
鼓浪屿11 分钟前
vue3的组件通信方式
前端
hqxstudying18 分钟前
JAVA限流方法
java·开发语言·安全·限流
念旧Zestia29 分钟前
Oxc 家族 vs Biome——定位、能力与底层差异综述
前端
YuJie30 分钟前
vue3 无缝滚动
前端·javascript·vue.js
Juchecar30 分钟前
Vue3 表单输入 v-model 指令详解
前端·vue.js
晴空雨38 分钟前
Emmet 完全指南:让 HTML/CSS 开发效率提升 10 倍
前端·html
小野鲜40 分钟前
前端打开新的独立标签页面,并且指定标签页的大小,管理新标签页面的打开和关闭(包含源码和使用文档)
前端·javascript