• 前端研习录（25）——JavaScript对象讲解及示例分析

    前端研习录（25）——JavaScript对象讲解及示例分析

    版权声明

    • 本文原创作者：清风不渡
    • 博客地址：https://blog.csdn.net/WXKKang

      重拾前端记忆，记录学习笔记，现在进入JavaScript对象部分

    一、对象

      对象就是一对儿一对儿出现的键值对（key-value）组成的集合，是一种无序的复合数据集合，示例如下：

     var user = {
    name : "Tom",
     age : 13
 }

    • 1
    • 2
    • 3
    • 4

      对象的每个键名又可以称为“属性”，它的“键值”可以是任何的数据类型

    如果一个属性的值为函数，通常我们把这个属性叫做“方法”，它也可以像函数那样去调用

      示例如下：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    <script>
       var user = {
        name : "Tom",
        age : 13,
        getage :function (gender) {
            if (gender != "男" && gender !== "女") {
                return "输入错误";
            }else if (gender == "男"){
                return "呵，男人";
            }else{
                return "嘿，女人";
            }
        }
       }
       console.log(user.getage("无"));
       console.log(user.getage("男"));
       console.log(user.getage("女"));
    script>
    
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

      结果如下：
    在这里插入图片描述

      如果属性的值还是一个对象，就形成了链式引用，示例如下：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    <script>
       var user = {
        name : "Tom",
        age : 13,
        home : {
            one : "chengdu",
            two : "guangyuan"
        }
       }
       console.log(user.home.one);
       console.log(user.home.two);
    script>
    
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

      结果如下：

    在这里插入图片描述

    二、Math对象

      Math对象 即是数学对象，是JavaScript提供的原生对象，用来提供各种数学功能

    1、Math.abs()

      Math.abs()方法返回参数值的绝对值

    Cesium基础知识讲解.pdf
    pdf 0星 超过10%的资源 10.72MB
    下载

    2、Math.max()和Math.min()

      Math.max()返回参数中最大的值
      Math.min()返回参数中最小的值
      如果参数为空，Math.min()将返回：Infinity，Math.max()返回：-Infinity

    3、Math.floor()和Math.ceil()

      Math.floor() 方法用于向下取整
      Math.ceil() 方法用于向上取整

    4、Math.random()

      Math.random() 方法用于取0~1之间的一个伪随机数，可能等于0，但一定小于1

    5、示例

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    <script>
        console.log("---------------------绝对值---------------");
        var num = -1;
        console.log(num+"的绝对值为："+Math.abs(num));
        
        console.log("---------------------最大最小值---------------");
        var a = 1;
        var b = 5;
        var c = 3;
        console.log(Math.max(a,b,c));
        console.log(Math.min(a,b,c));
        console.log(Math.max());
        console.log(Math.min());

        console.log("---------------------向上向下取整---------------");
        var d = 3.5;
        console.log(Math.floor(d));
        console.log(Math.ceil(d));

        console.log("---------------------取0~1之间的随机数---------------");
        console.log(Math.random());

        console.log("---------------------取任意数之间的随机数---------------");
        function getrandom (min,max) {
            var result = Math.random() * (max-min) + min;
            return result;
        }
        var num = getrandom(10,20);
        console.log(num);
    script>
    
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

      结果如下：
    在这里插入图片描述

    三、Date对象

      Date对象是JavaScript原生的时间库，它以1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后各一亿天（单位为毫秒）

    1000毫秒 = 1秒

    整理的全面Cesium开发基础讲解培训资料及视频
    pdf 0星 超过10%的资源 8.56MB
    下载

    1、Date.now()

      通过Date.now()方法 可以获取到当前时间距时间零点（上述）的毫秒数，示例如下：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    <script>
        console.log(Date.now());
    script>
    
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

      结果如下：
    在这里插入图片描述

    时间戳：是指格林威治时间1970年01月01日00:00:00（北京时间1970年01月01日08:00:00）起止到现在的总秒数

    2、get方法

      Date对象提供了下列get方法，用来获取实例对象某个方面的值，如下：

    • getTime();    返回实例距离时间零点的毫秒数
    • getDate();    返回实例对应每月的几号（从1开始）
    • getDay();    返回实例对应星期几（0为星期天，1为星期一）
    • getYear();    返回实例距离1900的年数
    • getFullYear();    返回实例对应的年份
    • getMonth();    返回实例对应的月份（0为一月，11为十二月）
    • getHours();    返回实例对应的小时（0~23）
    • getMilliseconds();    返回实例对应的毫秒（0~999）
    • getMinutes();    返回实例对应的分钟（0~59）
    • getSeconds();     返回实例对应的秒（0~59）

    3、示例

      示例如下：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    <script>
        var date = new Date()
        
        console.log("-----------------------------get方法-------------------------");
        console.log(date.getTime());
        console.log(date.getDate());
        console.log(date.getDay());
        console.log(date.getYear());
        console.log(date.getFullYear());
        console.log(date.getMonth());
        console.log(date.getHours());
        console.log(date.getMilliseconds());
        console.log(date.getMinutes());
        console.log(date.getSeconds());

        console.log("-----------------------------获取日期-------------------------");
        var year = date.getFullYear();
        var month = date.getMonth();
        var day = date.getDate();
        console.log(year+"-"+month+"-"+day);

        console.log("-----------------------------获取本年剩余天数-------------------------");

        /*
            today : 获取当前时间
            endYear ： 获取年底最后一天
            msToDay ： 时间戳转天数需要除的参数
            向下取整 -----（【年底的时间戳】-【当前日期的时间戳】）除以【时间戳转天数需要除的参数】
        */
        function getday() {
            var today = new Date();
            var endYear = new Date(today.getFullYear(),11,31,23,59,59,999)
            var msToDay = 24*60*60*1000
            return Math.floor((endYear.getTime()-today.getTime())/msToDay);
            
        }

        var leftday = getday();
        console.log("还有"+leftday+"天过年！！！");
       


    script>
    
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

      结果如下：
    在这里插入图片描述

  • 相关阅读:
    Linux安装Mariadb数据库
    java毕业设计宠物咖啡馆平台系统mybatis+源码+调试部署+系统+数据库+lw
    基于 NCNN 的 Chinese-Lite 模型测试
    在macOS上实现多进程任务处理
    【Linux】kubernetes - kubectl
    ZooKeeper 8：请求处理逻辑与源码分析
    abc 329 e ( dfs
    8. 过滤器的作用, 如何实现一个过滤器？
    AI&机器学习笔试题
    对闲鱼的调研分析
  • 原文地址：https://blog.csdn.net/WXKKang/article/details/126279282