JavaScript Date对象详解以及时间戳和时间的相互转换

àì夳堔傛蜴生んèń 2023-10-12 08:58 89阅读 0赞

**目录**

一、Date对象详解

1.Date对象

2.创建Date对象

3.Date对象属性

4.Date对象方法

5.Date对象的应用（节流函数时间戳写法）

二、时间戳和时间的相互转换

1.时间转换为时间戳

2.时间戳转换为时间

--------------------

## 一、Date对象详解 ##

### 1.Date对象 ###

Date 对象用于处理日期与时间。

### 2.创建Date对象 ###

let date = new Date();

### 3.Date对象属性 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="width:133px;">属性</td> 
   <td style="width:365px;">描述</td> 
  </tr> 
  <tr> 
   <td style="width:133px;">constuctor</td> 
   <td style="width:365px;">返回对创建此对象的Date函数的引用</td> 
  </tr> 
  <tr> 
   <td style="width:133px;">prototype</td> 
   <td style="width:365px;">使您有能力向对象添加属性和方法</td> 
  </tr> 
 </tbody> 
</table>

### 4.Date对象方法 ###

![4322edb7950e448a84339e9e8e04be58.png][] 这个是我今天的日期

（1）getDate() 返回一个月中的某一天（1-31）

let date = new Date();
                console.log(date.getDate());

![e20d893e60d0495385bdea89f54f867a.png][]

（2）getDay() 返回一周中的某一天（0-6）

let date = new Date();
                console.log(date.getDay());

![3204ce6269ef43ffa43660a8c7478f3a.png][]

（3）getFullYear() 返回年份

let date = new Date();
                console.log(date.getFullYear());

![6ae4d1720698487caac5d2d4bfaea308.png][]

（4）getHours() 返回Date对象的小时（0-23）

let date = new Date();
                console.log(date.getHours());

![705605ae6bda4b158f9bc027f7b92fff.png][]

（5）getMillseconds() 返回Date对象的毫秒数（0-999）

let date = new Date();
                console.log(date.getMilliseconds());

![d089d638c2944816b3ec8a1f46fb791d.png][]

（6）getMinutes() 返回Date对象的月份（0-11）因为月份返回0-11,因此一般获取月份都要 + 1

let date = new Date();
                console.log(date.getMonth());

![c181f65c3a0545db8b9411df05378a53.png][]

（7）getSeconds() 返回Date对象的秒数（0-59）

let date = new Date();
                console.log(date.getSeconds());

![647235d33a5e43fea9561d275906a57a.png][]

（8）getTime() 返回1970年1月一日至今的毫秒数,即时间戳

let date = new Date();
                console.log(date.getTime());

![4048b1f76bd14815b7070a532cda706e.png][]

这些就是我们经常使用的Date对象的方法，其他方法可参考菜鸟教程

[JavaScript Date 对象 | 菜鸟教程JavaScript Date 对象 Date 对象 Date 对象用于处理日期与时间。 创建 Date 对象： new Date() 以下四种方法同样可以创建 Date 对象： var d = new Date(); var d = new Date(milliseconds); // 参数为毫秒 var d = new Date(dateString); var d = new Date(year, month, day, h..![favicon.ico][]https://www.runoob.com/jsref/jsref-obj-date.html][JavaScript Date _ _ _JavaScript Date _ Date _ Date _ _ Date _ new Date_ _ Date _ var d _ new Date_ var d _ new Date_milliseconds_ _ _ var d _ new Date_dateString_ var d _ new Date_year_ month_ day_ h.._favicon.ico_https_www.runoob.com_jsref_jsref-obj-date.html]

### 5.Date对象的应用（节流函数时间戳写法） ###

Date.now() 相当于 date.getTIme() 获取时间戳

## 二、时间戳和时间的相互转换 ##

### 1.时间转换为时间戳 ###

// Date.parse()不推荐这种写法，毫秒级别的数值直接被转化为000
                let date1 = Date.parse(new Date());
                // valueOf()函数返回指定对象的原始值获得准确的时间数值
                let date2 = new Date().valueOf();
                // getTime()通过原型方法直接获得当前时间的毫秒数
                let date3 = new Date().getTime();
                // Number() 将时间转化为一个number类型的数值
                let date4 = Number(new Date());
                console.log(date1);
                console.log(date2);
                console.log(date3);
                console.log(date4);

打印结果如下

![934d476f184640d39692927bbf6ba607.png][]

### 2.时间戳转换为时间 ###

**(1)自己手写转换函数利用 Date对象的方法**

// 时间戳转换成时间格式
                var formatDate = function (date) {
                    // 如果传入的时间戳为10位需*1000,时间戳为13位的话不需乘1000
                    date = new Date(date);
                    var y = date.getFullYear();
                    var m = date.getMonth() + 1;
                    var d = date.getDate();
                    var h = date.getHours();
                    var m1 = date.getMinutes();
                    var s = date.getSeconds();
                    // 过滤格式
                    m = m < 10 ? '0' + m : m;
                    d = d < 10 ? '0' + d : d;
                    h = h < 10 ? '0' + h : h;
                    m1 = m1 < 10 ? '0' + m1 : m1;
                    s = s < 10 ? '0' + s : s;
                    // 拼接时间格式
                    return y + '-' + m + '-' + d + ' ' + h + ':' + m1 + ':' + s;
                };
                console.log(formatDate(1685671570448));

另一种写法,可以根据 **now.toTimeString().substr(0, 8)** 获取后面的时分秒格式，更加简便

// 时间戳转换成时间格式
                var formatDate = function (date) {
                    // 如果传入的时间戳为10位需*1000,时间戳为13位的话不需乘1000
                    date = new Date(date);
                    var y = date.getFullYear();
                    var m = date.getMonth() + 1;
                    var d = date.getDate();
    
                    // 过滤格式
                    m = m < 10 ? '0' + m : m;
                    d = d < 10 ? '0' + d : d;
    
                    return y + '-' + m + '-' + d + ' ' + date.toTimeString().substr(0, 8);
                };
                console.log(formatDate(1685671570448));

输出结果如下

![ad20eecf762c4024b2e0bcda0a4c7826.png][]

**(2)可以使用replace方法进行转置**

function getLocalTime(nS) {
                    // parseInt可解析一个字符串，并返回一个整数
                    // toLocalString()方法可根据本地时间把date对象转换为字符串，并返回结果
                    // replace利用正则进行匹配替换
                    return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ');
                }
                console.log(getLocalTime(1685671570448));

输出结果如下

![5f328f1671fb485c9f753b87ff524cdd.png][]

[4322edb7950e448a84339e9e8e04be58.png]: https://img-blog.csdnimg.cn/4322edb7950e448a84339e9e8e04be58.png
[e20d893e60d0495385bdea89f54f867a.png]: https://img-blog.csdnimg.cn/e20d893e60d0495385bdea89f54f867a.png
[3204ce6269ef43ffa43660a8c7478f3a.png]: https://img-blog.csdnimg.cn/3204ce6269ef43ffa43660a8c7478f3a.png
[6ae4d1720698487caac5d2d4bfaea308.png]: https://img-blog.csdnimg.cn/6ae4d1720698487caac5d2d4bfaea308.png
[705605ae6bda4b158f9bc027f7b92fff.png]: https://img-blog.csdnimg.cn/705605ae6bda4b158f9bc027f7b92fff.png
[d089d638c2944816b3ec8a1f46fb791d.png]: https://img-blog.csdnimg.cn/d089d638c2944816b3ec8a1f46fb791d.png
[c181f65c3a0545db8b9411df05378a53.png]: https://img-blog.csdnimg.cn/c181f65c3a0545db8b9411df05378a53.png
[647235d33a5e43fea9561d275906a57a.png]: https://img-blog.csdnimg.cn/647235d33a5e43fea9561d275906a57a.png
[4048b1f76bd14815b7070a532cda706e.png]: https://img-blog.csdnimg.cn/4048b1f76bd14815b7070a532cda706e.png
[favicon.ico]: https://static.runoob.com/images/favicon.ico
[JavaScript Date _ _ _JavaScript Date _ Date _ Date _ _ Date _ new Date_ _ Date _ var d _ new Date_ var d _ new Date_milliseconds_ _ _ var d _ new Date_dateString_ var d _ new Date_year_ month_ day_ h.._favicon.ico_https_www.runoob.com_jsref_jsref-obj-date.html]: https://www.runoob.com/jsref/jsref-obj-date.html
[934d476f184640d39692927bbf6ba607.png]: https://img-blog.csdnimg.cn/934d476f184640d39692927bbf6ba607.png
[ad20eecf762c4024b2e0bcda0a4c7826.png]: https://img-blog.csdnimg.cn/ad20eecf762c4024b2e0bcda0a4c7826.png
[5f328f1671fb485c9f753b87ff524cdd.png]: https://img-blog.csdnimg.cn/5f328f1671fb485c9f753b87ff524cdd.png