JavaScript-基本引用类型（Date）_javascript date-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41071974/article/details/123167117

文章目录

一、日期对象（Date）
二、继承的方法
三、日期格式化方法
四、日期/时间组件方法
五、案例1 - 倒计时
六、案例2 - 后端返回数据格式化

引用值（或者对象）是某个特定引用类型的实例。引用类型有时候也被称为对象定义，因为它们描述了自己的对象应有的属性和方法

函数也是一种引用类型，会在后续章节中讲解

一、日期对象（Date）

ECMAScript 的 Date 类型参考了 Java 早期版本中的 java.util.Date。为此，Date 类型将日期保存为自协调世界时（UTC，Universal Time Coordinated）时间 1970 年 1 月 1 日午夜（零时）至今所经过的毫秒数。使用这种存储格式，Date 类型可以精确表示 1970 年 1 月 1 日之前及之后 285 616 年的日期。

总毫秒数的含义:基于1970年1月1日起的毫秒数
Date 对象和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间

1.1 使用Date实例化日期对象

获取当前时间必须实例化：

let now = new Date();  
//如果没有参数，返回当前系统的当前时间
//打印结果为: Mon Feb 28 2022 21:57:19 GMT+0800 (中国标准时间)

获取指定时间的日期对象

//参数常用写法 数字型：2022, 01, 10或者字符串型“2021-10-1 8:8:8”
let time1 = new Date(2022, 01, 10)
 //打印结果：Thu Feb 10 2022 00:00:00 GMT+0800 (中国标准时间)
 
let time2 = new Date('2021-10-1 8:8:8')
//打印结果为: Fri Oct 01 2021 08:08:08 GMT+0800 (中国标准时间)
  
let time3 = new Date('2019/5/1') 
//打印结果：Wed May 01 2019 00:00:00 GMT+0800 (中国标准时间)

1.2 Date.parse()

Date.parse() 方法接收一个表示日期的字符串参数，尝试将这个字符串转换为表示该日期的毫秒数。

所有实现都必须支持下列日期格式：

“月/日/年”，如 “5/23/2019”
“月名日, 年”，如 “May 23, 2019”
“周几月名日年时:分:秒时区”，如"Tue May 23 2019 00:00:00 GMT-0700"
ISO 8601 扩展格式“YYYY-MM-DDTHH:mm:ss.sssZ”，如 2019-05-23T00:00:00（只适用于兼容ES5 的实现）

如果传给 Date.parse() 的字符串并不表示日期，则该方法会返回 NaN

let time1 = Date.parse('May 23, 2019');
console.log(time1); // 1558540800000

let time2 = new Date(Date.parse('May 23, 2019'))
console.log(time2); //Thu May 23 2019 00:00:00 GMT+0800 (中国标准时间)

如果直接把表示日期的字符串传给 Date 构造函数，那么 Date 会在后台调用 Date.parse()

let time3 = new Date('May 23, 2019')
console.log(time3); //Thu May 23 2019 00:00:00 GMT+0800 (中国标准时间)

1.3 Date.UTC()

Date.UTC() 方法也返回日期的毫秒表示，但使用的是跟 Date.parse()不同的信息来生成这个值

传给 Date.UTC() 的参数格式如下：

年、零起点月数（1 月是 0，2 月是 1，以此类推）
日（1~31）
时（0~23）
分、秒和毫秒
只有前两个（年和月）是必需的。如果不提供日，那么默认为 1 日

let time3 = Date.UTC(2000, 0);
console.log(time3); // 946684800000

// GMT 时间 2000 年 1 月 1 日零点
let time4 = new Date(Date.UTC(2000, 0));
console.log(time4); // Sat Jan 01 2000 00:00:00 GMT+0800 (中国标准时间)


// GMT 时间 2005 年 5 月 5 日下午 5 点 55 分 55 秒
let time5 = new Date(Date.UTC(2005, 4, 5, 17, 55, 55));
console.log(time5); // Thu May 05 2005 17:55:55 GMT+0800 (中国标准时间)

与 Date.parse() 一样，Date.UTC() 也会被 Date 构造函数隐式调用，但有一个区别：这种情况下创建的是本地日期，不是 GMT 日期

以下代码创建了与前面例子中相同的两个日期，但这次的两个日期是（由于系统设置决定的）本地时区的日期

//本地时间 2000 年 1 月 1 日 零点
let time4 = new Date(2000,0);
console.log(time4); // Sat Jan 01 2000 00:00:00 GMT+0800 (中国标准时间)


//本地时间 2005 年 5 月 5 日下午 5 点 55 分 55 秒
let time5 = new Date(2005,4,5,17,55,55);
console.log(time5); // Thu May 05 2005 17:55:55 GMT+0800 (中国标准时间)

1.4 其他获取总毫秒数的方法

let now = new Date();

// 1. 通过valueOf()或 getTime()获取
console.log(now.valueOf())
console.log(now.getTime())

// 2. 简单写可以这么做
let now = + new Date();

// 3. HTML5中提供的方法，有兼容性问题
let now = Date.now();

二、继承的方法

2.1 toLocaleString()

返回与浏览器运行的本地环境一致的日期和时间，格式中包含针对时间的 AM（上午）或 PM（下午），但不包含时区信息（具体格式可能因浏览器而不同）

let now = new Date();
console.log(now.toLocaleString()); // 谷歌浏览器：2022/4/4 18:41:18

2.2 toString()

返回带时区信息的日期和时间，而时间也是以 24 小时制（0~23）表示的

let now = new Date();
console.log(now.toString()); 
// Mon Apr 04 2022 18:43:45 GMT+0800 (中国标准时间)

2.3 valueOf()

返回的是日期的毫秒表示

let now = new Date();
console.log(now.valueOf()) //1649069106367

三、日期格式化方法

Date 类型有几个专门用于格式化日期的方法，它们都会返回字符串

toDateString() 显示日期中的周几、月、日、年（格式特定于实现）
toTimeString() 显示日期中的时、分、秒和时区（格式特定于实现）
toLocaleDateString() 显示日期中的周几、月、日、年（格式特定于实现和地区）
toLocaleTimeString() 显示日期中的时、分、秒（格式特定于实现和地区）
toUTCString() 显示完整的 UTC 日期（格式特定于实现）

这些方法的输出与 toLocaleString() 和 toString()一样，会因浏览器而异。因此不能用于在用户界面上一致地显示日期

let now = new Date();
console.log(now.toDateString()); // Mon Apr 04 2022
console.log(now.toTimeString()); // 18:51:49 GMT+0800 (中国标准时间)
console.log(now.toLocaleDateString()); // 2022/4/4
console.log(now.toLocaleTimeString()); // 18:51:49
console.log(now.toUTCString()); // Mon, 04 Apr 2022 10:51:49 GMT

四、日期/时间组件方法

方法	说明
getTime()	返回日期的毫秒表示；与 valueOf()相同
setTime(milliseconds)	设置日期的毫秒表示，从而修改整个日期
getFullYear()	返回 4 位数年（即 2019 而不是 19）
getUTCFullYear()	返回 UTC 日期的 4 位数年
setFullYear(year)	设置日期的年（year 必须是 4 位数）
setUTCFullYear(year)	设置 UTC 日期的年（year 必须是 4 位数）
getMonth()	返回日期的月（0 表示 1 月，11 表示 12 月）
getUTCMonth()	返回 UTC 日期的月（0 表示 1 月，11 表示 12 月）
setMonth(month)	设置日期的月（month 为大于 0 的数值，大于 11 加年）
setUTCMonth(month)	设置 UTC 日期的月（month 为大于 0 的数值，大于 11 加年）
getDate()	返回日期中的日（1~31）
getUTCDate()	返回 UTC 日期中的日（1~31）
setDate(date)	设置日期中的日（如果 date 大于该月天数，则加月）
setUTCDate(date)	设置 UTC 日期中的日（如果 date 大于该月天数，则加月）
getDay()	返回日期中表示周几的数值（0 表示周日，6 表示周六）
getUTCDay()	返回 UTC 日期中表示周几的数值（0 表示周日，6 表示周六）
getHours()	返回日期中的时（0~23）
getUTCHours()	返回 UTC 日期中的时（0~23）
setHours(hours)	设置日期中的时（如果 hours 大于 23，则加日）
setUTCHours(hours)	设置 UTC 日期中的时（如果 hours 大于 23，则加日）
getMinutes()	返回日期中的分（0~59）
getUTCMinutes()	返回 UTC 日期中的分（0~59）
setMinutes(minutes)	设置日期中的分（如果 minutes 大于 59，则加时）
setUTCMinutes(minutes)	设置 UTC 日期中的分（如果 minutes 大于 59，则加时）
getSeconds()	返回日期中的秒（0~59）
getUTCSeconds()	返回 UTC 日期中的秒（0~59）
setSeconds(seconds)	设置日期中的秒（如果 seconds 大于 59，则加分）
setUTCSeconds(seconds)	设置 UTC 日期中的秒（如果 seconds 大于 59，则加分）
getMilliseconds()	返回日期中的毫秒
getUTCMilliseconds()	返回 UTC 日期中的毫秒
setMilliseconds(milliseconds)	设置日期中的毫秒
setUTCMilliseconds(milliseconds)	设置 UTC 日期中的毫秒
getTimezoneOffset()	返回以分钟计的 UTC 与本地时区的偏移量（如美国 EST 即“东部标准时间”返回 300，进入夏令时的地区可能有所差异）

示例

function getTimer() {

  var date = new Date()
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var dates = date.getDate()
  var arr = ['星期日','星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  var day = date.getDay()
  
  var h = date.getHours()
  h = h < 10 ? '0' + h : h //补零操作

  var m = date.getMinutes()
  m = m< 10 ? '0' + m : m //补零操作

  var s = date.getSeconds()
  s = s < 10 ? '0' + s : s//补零操作

return `今天是${year}年${month}月${dates}日${arr[day]}${h}点${m}分${s}秒`
}
console.log(getTimer())
//打印结果为：今天是2022年2月28日星期一22点16分50秒

五、案例1 - 倒计时

核心算法

输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。

使用时间戳

用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数

把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）

转换公式如下：
d = parseInt( 总秒数 / 60 / 60 / 24 ); // 计算天数
h = parseInt( 总秒数/ 60 / 60 % 24 ) //计算小时
m = parseInt( 总秒数 / 60 % 60 ); // 计算分数
s = parseInt( 总秒数 % 60 ); //计算当前秒数

function countDown(time) {
  var now = +new Date() //返回当前时间总毫秒数
  var user = +new Date(time) //返回用户输入时间毫秒数
  var time = (user - now) / 1000 //剩余秒数
            
  var d = parseInt(time / 60 / 60 / 24) //天
  d = d < 10 ? '0' + d : d
            
  var h = parseInt(time / 60 / 60  % 24) //时
  h = h < 10 ? '0' + h : h
            
  var m = parseInt(time /60 % 60) //分
  m = m < 10 ? '0' + m : m
            
  var s = parseInt(time % 60) //秒
  s = s < 10 ? '0' + s : s
            
  return `${d}天${h}时${m}分${s}秒`
 }
console.log(countDown('2022-2-28 23:00:00'));
 //打印结果00天00时03分33秒

六、案例2 - 后端返回数据格式化

 function time(params) {
   const dt = new Date(params)
   const y = dt.getFullYear()
   const m = (dt.getMonth() + 1 + '').padStart(2, '0')
   const d = (dt.getDate() + '').padStart(2, '0')
   const hh = (dt.getHours() + '').padStart(2, '0')
   const mm = (dt.getMinutes() + '').padStart(2, '0')
   const ss = (dt.getSeconds() + '').padStart(2, '0')
   return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
 console.log(time('2022-03-01T06:44:53.110+0000'));
//打印结果：2022-03-01 14:44:53
console.log(time(1646134552379));
//打印结果为：2022-03-01 19:35:52