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

清风不渡

已于 2022-08-11 14:31:15 修改

阅读量153

点赞数

分类专栏：前端研习录文章标签： javascript 前端开发语言

于 2022-08-11 11:31:33 首次发布

本文链接：https://blog.csdn.net/WXKKang/article/details/126279282

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

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

版权声明

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

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

一、对象

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

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

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

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

示例如下：

<!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>

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

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

<!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>

结果如下：

在这里插入图片描述

二、Math对象

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

1、Math.abs()

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

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>

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

三、Date对象

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

1000毫秒 = 1秒

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>

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

时间戳：是指格林威治时间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>