day07: js复杂数据类型——对象(Math、Data对象)

一条咸鱼TT

于 2023-06-14 17:29:12 发布

阅读量116

点赞数 1

分类专栏： # js小计文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_44433427/article/details/130994237

版权

js小计专栏收录该内容

11 篇文章 0 订阅

订阅专栏

js复杂数据类型——对象

概述
1. 对象的基本操作
- 创建、增删改查、遍历
2. js中的两个内置对象Math、Data

概述

对象是一种是一种具有键值对结构的复杂的数据类型
对象的key是字符串类型,值的类型不限
对象的key应是唯一的

1. 对象的基本操作

创建、增删改查、遍历

对象的创建和数组一样有两种方式：字面量、构造函数

	            // 字面量方式
        var obj = { 
            name: 'jack',
            age : 23,
        }

        // 构造函数方式
        var obj1 = new Object({
            name:'tom',
            age:33
        })
        console.log(obj, obj1)

        // 添加数据
        obj.score = 99
        obj1["score"] = 66
        console.log(obj, obj1)
        // 修改数据,因为key唯一可以直接通过key修改
        obj.score = 77
        obj1["score"] = 88
        console.log(obj, obj1)

        // 删除数据
        delete obj.score
        delete obj1["score"]
        console.log(obj, obj1)

        // 遍历对象
        for(key in obj){
            console.log(obj[key])
            // 不可以使用点语法,这里会将key当作字符串键名而不是变量所以得到undefined
            console.log(obj.key)

        }

2. js中的两个内置对象Math、Data

2.1 Math对象

Math对象中的常用方法：

	- Math.PI -- > 表示圆周率
    - Math.abs()    绝对值
    - Math.pow()    求次方
    - Math.sqrt()   求平方根
    - Math.max()    求最大值
    - Math.min()    求最小值

        // 圆周率
        console.log('圆周率：',Math.PI)
        // 求绝对值
        var num1 = 10
        var num2 = -10
        console.log(Math.abs(num1))
        console.log(Math.abs(num2))
        // 求次方
        console.log(Math.pow(2, 3)) // 2的3次方
        console.log(Math.pow(4, 5)) // 4的5次方
        // 求平方根
        console.log(Math.sqrt(4))
        console.log(Math.sqrt(2))
        // 求最大值
        console.log(Math.max(1,2,3,4,5,6)) // 返回所有参数里面最大的数据
        // 求最小值
        console.log(Math.min(1,2,3,4,5,6)) // 返回所有参数里面最小的数据

        // 不能是数组
        console.log(Math.max([1,2,3,4,5,6]))

Math.random: Math对象中需要重点掌握的方法

- Math.floor() 向下取整  抹去小数位 得到一个比当前数小的整数
- Math.ceil()  向上取整  抹去小数位 得到一个比当前数大的整数
- Math.round() 四舍五入取整 依据小数位 遵循数学上的四舍五入算法

Math.random()会返回一个 [0,1) 的小数,根据此实现一个可以根据输入生成一个区间范围内的随机数。
思路如下：
定义一个函数,接收区间的端点，使用随机数*（终点-起点）+ 起点

        console.log("随机数:",Math.random())
        // 随机函数
        function rand(start, end){
            return Math.round(Math.random()*(end-start)+start)
        }
        console.log(rand(1,10))

2.2 Date对象

Date对象中的常用方法：
获取

	- getFullYear()   方法是得到指定字符串中的哪一年
	- getMonth()      方法是得到指定字符串中的哪一个月份
	- getDate()       方法是得到指定字符串中的哪一天
	- getHours()      方法是得到指定字符串中的哪小时
	- getMinutes()    方法是得到指定字符串中的哪分钟
	- getSeconds()    方法是得到指定字符串中的哪秒钟
	- -----------------------------------------------
	- getDay()    方法是得到指定字符串当前日期是一周中的第几天（周日是 0，周六是 6）
	- getTime()   方法是得到执行时间到 格林威治时间 的毫秒数

设置

- 日期对象.setFullYear(年份)   将该日期对象中的年份变为设置的年份
- 日期对象.setMonth(月份)      将该日期对象中的月份变为设置的月份
- 日期对象.setDate(日期)`      将该日期对象中的日期变为设置的日期
- 日期对象.setHours(小时)`     将该日期对象中的小时变为设置的小时
- 日期对象.setMinutes(分钟)`   将该日期对象中的分钟变为设置的分钟
- 日期对象.setSeconds(秒数)`   将该日期对象中的秒数变为设置的秒数
- 日期对象.setMilliseconds(毫秒数)`   将该日期对象中的毫秒数变为设置的毫秒数
- 日期对象.setTime(毫秒数)`    将该日期对象设置为对应的毫秒数

Date在使用前必须先实例化（用 new 来创建一个对象）
创建date对象

        // 默认返回当前系统时间
        var dateObj = new Date()
        console.log(dateObj)
        // 六个参数 -> (年，月(0表示一月)，日，时，分，秒)
        var dateObj = new Date(2024,0,1,23,59,0)
        console.log(dateObj)
        // 字符串参数(格式为： 2024-1-1 23:59:00 )
        var dateObj = new Date('2024-1-1 23:59:00')
        console.log(dateObj)

尝试以下获取、设置的方法吧

        console.log(dateObj.getFullYear())
        console.log(dateObj.getMonth())
        dateObj.setFullYear(2023)
        console.log(dateObj.getFullYear())

2.2.1 时间戳

时间戳是 Date 对象中必须掌握的概念
概念：人为规定格林威治时间（计算机元年）1970-01-01 00:00:00，时间戳就是某一个时间距离计算机初始化时间相差的毫秒数

获取时间戳的方式

		// 获取当前计算机时间
        var dateTime = new Date()
        // 转化为时间戳
        var ms = dateTime.getTime()
        console.log(ms)

2.2.2 定时器

需要控制代码间隔多久执行一次或者延迟多久执行一次就需要用到定时器
间隔定时器
- 代码每间隔多少毫秒会执行一次
- 间隔定时器也会有一个延迟的效果第一次不是上来就会执行会延迟多少毫秒之后才会间隔执行
```
    // 每间隔多少毫秒会调用这个函数一次
    var id值 = setInterval(函数, 毫秒数)
```
延迟定时器
- 代码不是立马执行会延迟一段时间执行
```
    var id值 = setTimeout(函数, 毫秒数)
```
结束定时器
- 每一个定时器在设置的时候都会返回一个id 可以根据这个id去清除所对应的定时器
- 清除间隔定时器
  - clearInterval(id值)
- 清除延迟定时器
  - clearTimeout(id值)

        var count = 0
        // 间隔定时器启动时，会有一个延迟效果
        var id  = setInterval(function () {
            document.write(count)
            if(count == 10) {
                console.log(count+'到了清除定时器')
                clearInterval(id)
            }
            count++
        }, 1000)

2.2.3 demo获取到未来某天还有多久的倒计时

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        h3 {
            width: 200px;
            margin: 5px auto;
        }

        .box {
            width: 360px;
            height: 30px;
            border-radius: 20px;
            background-color: aliceblue;
            border: 1px solid blue;
            margin: 10px auto;
        }

        ul {
            list-style: none;
            width: 360px;
            height: 30px;

            display: flex;
            justify-content: space-around;
        }

        ul>li {
            width: 15%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            background-color: red;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <h3>距离2024年春节倒计时</h3>
    <div class="box">
        <ul class="time">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var nowDate = new Date()
        var liArr = document.querySelectorAll('li')
        var futureDate = new Date('2024-2-10 00:00:00')
        // 获取时间差
        var time = Math.abs(nowDate.getTime() - futureDate.getTime())
        // 转换成秒
        var second = Math.round(time / 1000);
        // 计算还有几年？
        var y = 12 * 30 * 24 * 60 * 60; // 一年所代表的秒数
        var year = Math.floor(second / y);
        console.log(year);
        // 换算月份
        // 把年份所代表秒数减去 剩下的换算成月份
        second = second - y * year;
        var m = 30 * 24 * 60 * 60;
        var month = Math.floor(second / m);
        // 换算成天 减去月份代表的秒数
        second = second - m * month;
        var d = 24 * 60 * 60;
        var day = Math.floor(second / d);
        // 换算成时
        second = second - d * day;
        var h = 60 * 60;
        var hour = Math.floor(second / h);
        // 换算成分钟
        second = second - h * hour;
        var mm = 60;
        var min = Math.floor(second / mm);
        // 换算成秒数
        second = second - mm * min;
        var timeArr = [year,month,day,hour,min,second]
        console.log(timeArr)
        var arr = ['年','月','日','时','分','秒']
        
        liArr.forEach(function(item,index){
                item.innerText = timeArr[index]+arr[index]
        })
        // 将时间动态添加上去

        setInterval(function () {
            var nowDate = new Date()
            // 获取时间差
            var time = Math.abs(nowDate.getTime() - futureDate.getTime())
            // 转换成秒
            var second = Math.round(time / 1000);
            // 计算还有几年？
            var y = 12 * 30 * 24 * 60 * 60; // 一年所代表的秒数
            var year = Math.floor(second / y);
            console.log(year);
            // 换算月份
            // 把年份所代表秒数减去 剩下的换算成月份
            second = second - y * year;
            var m = 30 * 24 * 60 * 60;
            var month = Math.floor(second / m);
            // 换算成天 减去月份代表的秒数
            second = second - m * month;
            var d = 24 * 60 * 60;
            var day = Math.floor(second / d);
            // 换算成时
            second = second - d * day;
            var h = 60 * 60;
            var hour = Math.floor(second / h);
            // 换算成分钟
            second = second - h * hour;
            var mm = 60;
            var min = Math.floor(second / mm);
            // 换算成秒数
            second = second - mm * min;
            var timeArr = [year, month, day, hour, min, second]
            liArr.forEach(function (item, index) {
                item.innerText = timeArr[index]+arr[index]
            })
        }, 1000)




    </script>
</body>

</html>