36.一文讲透JavaScript日期对象Date,时间戳、1970、date方法、date计算

news2025/1/21 9:31:58

在这里插入图片描述


文章目录

  • JavaScript日期和时间处理方法
    • Date对象的创建
      • new Date()
      • new Date(milliseconds)
      • 1970年之前的时间?
      • new Date(date_str)
      • new Date(year, month, date, hours, minutes, sec, ms)
    • Date对象的方法
      • 获取日期内容
      • 设置日期内容
      • 日期的自动校准
      • 日期转为数字、日期差值
      • Date.now()
      • Date.parse()
    • 总结


JavaScript日期和时间处理方法

日期和时间是编程过程中不可绕过的必修课,好在JavaScript为我们准备好了一个内建的对象Date(日期)。通过该对象,我们可以创建、存储、修改、测量时间、打印等基础操作,是每个JavaScript程序员的必修课之一。

Date对象的创建

和普通的对象一样,我们可以使用new Date()来创建一个Date对象,还可以在创建的时候传入一些初始化参数。

new Date()

不带参数的创建案例:

let now = new Date()
console.log(now)

代码执行结果如下:

image-20220622192544244

这样就简单的输出了代码执行时的具体时间,这里显示的就是2022年6月22日 19点25份24秒

new Date(milliseconds)

创建一个带有毫秒参数的日期对象,其中milliseconds指的是自1970年1月1日UTC+0之后的毫秒数(1毫秒=1/1000秒)。

//创建一个时间,举例1970.1.1时间点0毫秒
let jan01_1970 = new Date(0)
console.log(jan01_1970)

//创建一个时间,比1970年1.1时间点晚3天(3天*24小时*3600秒*1000毫秒)
let jan04_1970 = new Date(3 * 24 * 3600 * 1000)
console.log(jan04_1970)

代码执行结果:

image-20220622201514874

milliseconds就是从1970年1月1日 00:00:00以来,经过的毫秒数,或者称之为时间戳

时间戳是一种简单的日期数字化表示方式,我们通常使用new Date(milliseconds)创建一个日期。如果我们已经有了一个日期Date对象,可以使用date.getTime()获得日期对应的时间戳。

注意:

中国处于动8区,所以上例中的时间都不是00:00:00,而是08:00:00

1970年之前的时间?

时间戳不仅仅是整数,也可以是负数,例如:

//1969-12-31 00:00:00
let dec31_1969 = new Date(-24 * 3600 * 1000)
console.log(dec31_1969)

代码执行结果:

image-20220622202418469

new Date(date_str)

如果每次创建时间都是用时间戳,可能并不方便,因为时间戳计算还是有点难度的。

我们还可以使用时间字符串创建一个时间,举个例子:

let date = new Date('2022-06-22 00:00:00')
console.log(date)

代码执行结果:

image-20220622202954079

new Date(year, month, date, hours, minutes, sec, ms)

  • year——必须是四位的数字;
  • month——[0,11]0表示一月;
  • date——当月的某一天,默认为1
  • hours/minutes/sec/ms——默认为0;

举个栗子:

let date = new Date(2022,6,22,20,35,33)
console.log(date)

代码执行结果:

image-20220622203539572

我们还可以指定毫秒数:

let date = new Date(2022,6,22,20,35,33,777)
console.log(date)

Date对象的方法

如果我们有一个Date对象,我们可以通过Date对象的内置方法,获取时间的一部分,例如年份、月份、日期等。

获取日期内容

例如我们有日期date

let date = new Date(2022,5,22,20,35,33)
  1. getFullYear()获取年份,date.getFullYear()返回2022
  2. getMonth()获取月份,date.getMonth()返回5,也就是6月;
  3. getDate()获取当月的日期,date.getDate()返回22;
  4. getDay()获取当前时间在一周的哪一天,date.getDay()返回3

注意:

  • 以上日期都是已于当地日期的,比如我这里是中国的时区
  • 获取年份一定要用getFullYeargetYear会返回两位数的年份

我们也可以获得0时区的时间,也就是UTC时间,分别对应getUTCFullYear()getUTCMonth()getUTCDay等。只需要在get后插入UTC即可。

举个例子:

let date = new Date(2022,5,22,20,35,33)
console.log(date.getHours(),date.getUTCHours())

代码执行结果:

image-20220622205032978

夜里也可以看出,中国时区和0时区相差8小时。

  1. getTime()返回日期的时间戳,方法没有UTC模式;
  2. getTimezoneOffset()返回本地时区和0时区相差的时间,以分钟为单位,并且没有UTC模式;

设置日期内容

我们还可以通过Date对象的方法设置日期中的某一部分:

  • setFullYear(year, [month], [date])设置年份(月份、日)
  • setMonth(month, [date])设置月份(日)
  • setDate(date)设置日期(月份的第几天)
  • setHours(hour, [min], [sec], [ms])设置小时(分、秒、毫秒)
  • setMinutes(min, [sec], [ms])设置分钟(秒、毫秒)
  • setSeconds(sec, [ms])设置秒(毫秒)
  • setMilliseconds(ms)设置毫秒
  • setTime(milliseconds)(使用自 1970-01-01 00:00:00 UTC+0 以来的毫秒数来设置整个日期)

以上函数中只有setTime()没有UTC变体。

日期的自动校准

JavaScriptDate具备自动校准功能,这为我们针对时间的计算提供了极大的方便。

例如:

let date = new Date(2022,5,38)//注意这里的38
console.log(date)

代码的执行结果:

屏幕截图 2022-06-23 185419

从执行结果我们可以看出"2022年6月38号"并没有使程序出现错误,而是将日期转成了”2022年7月8号“。

以上案例验证了,在JavaScript中,超出范围的日期会被Date对象自动分配。这样我们就可以非常方便的使用Date对象进行日期的计算。

例如,我们可以在日期上对年、月、日进行加减法运算:

let date = new Date(2022,5,23)//当前时间是2022-6-23
date.setDate(date.getDate() + 8)//计算八天后的时间
console.log(date)

代码执行结果:

image-20220623190526179

同样的,我们也可以使用date.setSeconds()方法已秒为单位计算日期。

日期转为数字、日期差值

日期Date转为数字的结果和使用date.getTime()的返回值相同,都是毫秒为单位的数值:

let date = new Date()
console.log(+date)

代码执行结果:

image-20220623191100322

既然时间的本质就是数字,我们也可以进行时间差计算,并且以ms(毫秒)为单位。

例如:

let date1 = new Date(2022,5,23)
let date2 = new Date(2022,5,24)
console.log(`时间差为${date2-date1}ms`)

代码执行结果为:

image-20220623191324555

Date.now()

如果我们希望获得当前时间,更优的做法是使用Date.now()方法。这个方法会返回当前时间的时间戳,同时不需要创建额外的Date对象,这对内存开销、垃圾回收都是有好处的,而且代码更简洁。

举个栗子:

let begin = Date.now()
for(let i = 1;i<100000;i++){
    let num = i * i * i;
}
let end = Date.now()
console.log(`consume time ${end - begin}ms`)

代码执行结果:

image-20220623192103413

Date.parse()

Date.parse()方法可以读取一个日期字符串,并转为时间戳,但是字符串必须遵守一定的规则:YYYY-MM-DDTHH:mm:ss.sssZ

  • YYYY-MM-DD对应年-月-日
  • T属于分隔符
  • HH:mm:ss.sss对应时:分:秒.毫秒
  • Z可以是+-hh:mm格式的时区。单个字符Z表示UTC+0

字符串可以使用省略写法,例如:YYYY-MM-DDYYYY-MMYYYY

举个小李子:

let ms = Date.parse('2022-06-23T19:38:30.777+08:00')//时间戳
let date = new Date(ms)
console.log(date)

代码执行结果:

image-20220623194030648

总结

  1. JavaScript使用Date对象处理时间:new Date()
  2. 月份从0开始计算
  3. Date具有很多实用的方法,我们可以获取时间中的某一段;
  4. Date对象会自动校准,我们可以直接对日期进行加减法;
  5. Date.now()可以高效的获取当前时间;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408579.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Node.js安装及环境配置之Windows篇

Node.js安装及环境配置之Windows篇Node.js安装及环境配置之Windows篇一、安装环境二、安装node.js步骤三、前期准备四、开始安装五、环境配置Node.js安装及环境配置之Windows篇 一、安装环境 1、本机系统&#xff1a;Windows 10&#xff08;64位&#xff09; 2、Node.js&…

纯js判断文件流格式类型:pdf,doc,docx,xls,xlsx,ppt,pptx一次搞定!

目录使用js判断文件类型的场景方法特点输入输出方法步骤1. 查看每种格式文件的16进制码&#xff0c;提取不同文件类型的“特征数”。2. 先判断大类型&#xff0c;在具体大类下判断小类型项目地址&#xff1a;纯前端基于react实现的多类型文件预览&#xff1a;通过arraybuffer判…

uniapp全局组件全局使用(不在每个页面template使用,仅支持H5),函数式调用全局组件方法

最简单的使用&#xff0c;在 main.js 编写如下代码&#xff0c;即可将 xxx 组件在每个页面显示 // main.js// 引入组件 import xxx from "/components/xxx.vue";// 将该组件挂载在document.body下 document.body.appendChild(new xxx().$mount().$el); 函数式调用全…

JS高级知识总结

文章目录1. this指向问题2. 对象进阶2.1 对象的定义和使用2.2 对象访问器2.2.1 Getter2.2.2 Setter2.3 对象构造器2.4 对象原型2.4.1 prototype属性2.4.2 \_\_proto\_\_ 属性2.4.3 constructor属性2.4.4 原型链2.5 Object对象2.5.1 管理对象2.5.2 保护对象3. 函数进阶3.1 函数的…

.Net Core中间件

目录 一、什么是中间件 二、中间件的用途 三、中间件的三个概念 四、自定义中间件 五、ASP.NET Core附带中间件组件 六、中间件和过滤器的区别 一、什么是中间件 在浏览网站或者使用手机App加载内容的时候&#xff0c;浏览器或者手机App其实在向Web服务器发送HTTP请求。服…

NodeJS安装(npm包管理器)

1、nodejs下载 windows下的NodeJS安装是比较方便的&#xff0c; 只需要登陆官网&#xff08;Node.js&#xff09;&#xff0c;直接点击64-bit下载安装 2、安装过程基本直接“NEXT”&#xff0c;NodeJS已经集成了npm&#xff0c;所以npm也一并安装好了 3、在cmd窗口输入node -…

React-DevTools开发者工具安装

React开发者工具最简单的安装方式自然是科学上网&#xff0c;通过Google Chrome浏览器访问应用商店安装了。以下介绍另一种安装方式&#xff1a;基于 react-devtools的GitHub项目源码编译进行插件安装。 目录 React-DevTools&#xff1a;GitHub项目地址 React-DevTools&#x…

修改elementUI中el-date-picker内置样式

一.编写背景 今天正在日常的需求编写和bug调试中&#xff0c;产品提出了这样一个需求。为了满足用户在新增数据时的便捷准确&#xff0c;时间选择格式为“年月日时”&#xff0c;即用户不需要选择分合秒&#xff0c;换句话说就是下图中红色框的两项不需要。 二.问题分析。 当时…

基于vscode开发vue3项目的详细步骤教程 3 前端路由vue-router

1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客 4、基于vscode开发vue项目的详细步骤教程 2 第三方图标库FontAw…

如何使用 JavaScript 读取文件

您可以使用 JavaScript File API 加载选定文件的内容。本节介绍 File API 的基本用法。 现在让我们看看如何使用 File API。 使用 JavaScript 读取文件概述 选择带有输入元素的文件 在 HTML 中&#xff0c;您可以通过将 input 元素的 type 属性设置为 file 来选择文件。 &…

vue 在for循环中设置ref并获取$refs

一、单循环动态设置ref 1.设置&#xff1a;【:ref“‘XXX’ index”】XXX -->自定义ref的名字 2.获取&#xff1a;let ref eval(‘this.$refs.XXX’ index)[0] 3.示例&#xff1a; 代码如下所示 <template><div class"ref_test"><div v-fo…

常用的几种布局方式---Flex 布局(垂直居中展示)

常用的几种布局方式---Flex 布局(垂直居中展示&#xff09; 前言一、默认使用静态布局二、flex布局1.父元素container1.1.display:flex1.2.flex-direction属性1.3.主轴与侧轴1.4.justify-content属性1.5.align-items属性1.6.flex-wrap属性2.子元素items 前言 怎样让一个元素在…

Vue2 概述

什么是Vue 引用官网的一段话:Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三方库或既有项…

如何统计前端项目有多少行代码

方法一&#xff1a;输入命令 前端项目核心代码主要在src目录下&#xff0c;打开项目找到src目录&#xff0c;右键点击 git bash here &#xff0c;然后输入命令&#xff1a; 1.包括空行&#xff08;会列出每个文件的代码行数&#xff09;&#xff1a; find . "(" …

Vue注册组件的几种方式,你都知道吗?

在开发中,经常需要将业务进行组件化,我们就需要去注册组件,下面列举几种常用的注册组件的方法 局部注册组件 1.首先需要将要注册的组件进行引入 2.在script标签中进行注册,注意:组件注册的名字和引入的名字需要保持一致即可进行简写 3.在template标签中以html的标签格式进行使…

web前端面试高频考点——Vue的高级特性(动态组件、异步加载、keep-alive、mixin、Vuex、Vue-Router)

系列文章目录 内容参考链接Vue基本使用Vue的基本使用&#xff08;一文掌握Vue最基础的知识点&#xff09;Vue通信和高级特性Vue组件间的通信及高级特性&#xff08;多种组件间的通信、自定义v-model、nextTick、插槽&#xff09;Vue高级特性Vue的高级特性&#xff08;动态组件…

Vue 进阶系列丨大文件切片上传

Vue 进阶系列教程将在本号持续发布&#xff0c;一起查漏补缺学个痛快&#xff01;若您有遇到其它相关问题&#xff0c;非常欢迎在评论中留言讨论&#xff0c;达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧&#xff01;2013年7月28日&#xff0c;尤雨溪第一次在 GItHub…

Layui的基本使用(前端登录操作步骤)

目录 一.介绍layui 二.Layui相关的基本操作 1.下载Layui网站 &#xff1a;Layui - 经典开源模块化前端 UI 框架 ----------接下来的操作是实现一个Layui前端登录的效果------------- 2.创建项目 3.使用mybatis plus自动生成代码 (1).导入依赖 (2).导入生成类 (3).运行…

vscode+live server——更改端口号——基础积累

最近在写前台&#xff0c;通过jq写的&#xff0c;之前我一直嚷嚷jq基础薄弱&#xff0c;现在练手的来了。。。。 运行页面的时候&#xff0c;可以使用live server 1.vscode软件中安装live server 2.在html页面右击&#xff0c;有个open with live server 3.电脑默认的浏览器会…

Vue3中使用hooks,hooks究竟是个啥?如何理解

1.前言 最近被hooks这个词老是被提出&#xff0c;我经常听到但是又不会用&#xff0c;于是乎抽时间认真学习一下。 2.vue3 hooks 2.1 为什么vue3 可以使用hooks 因为vue2由选项式Api转为组合式Api。底层源码改了好多。 组合式API的好处&#xff1b; 就是在函数内可以使用声…