js中date对象使用方法详细介绍

 更新时间:2026年01月26日 10:34:42   作者:研☆香  
在JavaScript中处理日期和时间可以使用内置的Date对象,Date对象提供了多种方法和属性来操作和格式化日期和时间,这篇文章主要介绍了js中date对象使用方法的相关资料,需要的朋友可以参考下

1. 概述

Date 对象是 JavaScript 中用于处理日期和时间的核心对象,提供了丰富的日期操作方法。它允许开发者创建、获取、设置和操作日期时间值,是 Web 开发中处理时间相关功能的基础。

Date 对象的实现基于 Unix 时间戳(也称为 Epoch 时间),即自 1970 年 1 月 1 日 00:00:00 UTC(协调世界时)以来的毫秒数。这个时间点被称为"Unix 纪元",是计算机系统中广泛使用的时间表示方式。

Date 对象的主要特点包括:

  1. 可以表示从 1970 年 1 月 1 日前后约 285,616 年的时间范围
  2. 提供多种构造函数形式,支持从字符串、数字或单独的年月日参数创建日期
  3. 包含获取和设置年、月、日、时、分、秒等各种时间单位的方法
  4. 支持时区转换和本地化处理
  5. 提供日期格式化输出功能

在实际应用中,Date 对象常用于:

  • 记录和显示当前时间
  • 计算时间间隔(如倒计时功能)
  • 日期比较和排序
  • 日历组件开发
  • 时间戳转换和处理

需要注意的是,JavaScript 的 Date 对象在某些方面存在局限性,比如:

  • 时区处理可能不够直观
  • 月份是从0开始计数的(0表示一月)
  • 没有内置的日期格式化方法,需要手动拼接字符串

2. 创建 Date 对象

你可以使用多种方式创建 Date 对象:

  • 当前时间

    let now = new Date();
    console.log(now); // 输出当前日期和时间
    
  • 指定时间戳

    let specificTime = new Date(1672531200000); // 2023-01-01 00:00:00 UTC
    console.log(specificTime);
    
  • 指定日期字符串

    let dateStr = new Date("2023-12-31T23:59:59");
    console.log(dateStr);
    
    • 字符串格式推荐使用 ISO 8601 格式(如 "YYYY-MM-DDTHH:mm:ss"),但浏览器也支持其他格式(解析行为可能不一致)。
  • 指定年、月、日等参数

    let dateParams = new Date(2023, 11, 31, 23, 59, 59, 999); // 2023年12月31日23:59:59.999
    console.log(dateParams);
    
    • 注意:月份是从 0 开始的(0 代表一月,11 代表十二月)。
    • 参数:年, 月, 日, 时, 分, 秒, 毫秒。日之后的参数可选。

3. 获取日期时间信息

Date 对象提供了一系列方法获取特定部分:

  • 年份

    let year = now.getFullYear(); // 四位数年份 (推荐)
    // let year2 = now.getYear(); // 已废弃,不推荐使用
    
  • 月份

    let month = now.getMonth(); // 0 (一月) 到 11 (十二月)
    
  • 日期

    let date = now.getDate(); // 月中的哪一天 (1-31)
    
  • 星期

    let day = now.getDay(); // 星期几 (0 代表星期日, 1 代表星期一, ..., 6 代表星期六)
    
  • 小时、分钟、秒、毫秒

    let hours = now.getHours(); // 小时 (0-23)
    let minutes = now.getMinutes(); // 分钟 (0-59)
    let seconds = now.getSeconds(); // 秒 (0-59)
    let milliseconds = now.getMilliseconds(); // 毫秒 (0-999)
    
  • 时间戳

    let timestamp = now.getTime(); // 自 UTC 1970年1月1日以来的毫秒数
    let timestamp2 = Date.now(); // 获取当前时间戳 (静态方法,无需创建 Date 实例)
    

4. 设置日期时间信息

同样有对应的方法可以设置日期时间的各个部分:

  • 设置年份

    now.setFullYear(2024);
    
  • 设置月份

    now.setMonth(5); // 设置为六月 (0 是一月)
    
  • 设置日期

    now.setDate(15);
    
  • 设置小时、分钟、秒、毫秒

    now.setHours(12);
    now.setMinutes(30);
    now.setSeconds(0);
    now.setMilliseconds(500);
    
  • 设置时间戳

    now.setTime(1672531200000); // 设置为 2023-01-01 00:00:00 UTC
    

5. 格式化输出

Date 对象本身没有直接的、强大的格式化方法。常用方法:

  • 转换为字符串

    console.log(now.toString()); // 本地时区的完整日期时间字符串 (e.g., "Thu Jan 04 2024 14:30:15 GMT+0800")
    console.log(now.toDateString()); // 本地时区的日期部分 (e.g., "Thu Jan 04 2024")
    console.log(now.toTimeString()); // 本地时区的时间部分 (e.g., "14:30:15 GMT+0800")
    console.log(now.toLocaleString()); // 根据系统设置的本地化格式
    console.log(now.toLocaleDateString()); // 本地化格式的日期
    console.log(now.toLocaleTimeString()); // 本地化格式的时间
    console.log(now.toISOString()); // ISO 8601 格式字符串 (UTC 时间, e.g., "2024-01-04T06:30:15.000Z")
    console.log(now.toUTCString()); // UTC 时间的字符串表示 (e.g., "Thu, 04 Jan 2024 06:30:15 GMT")
    console.log(now.toJSON()); // 通常与 toISOString() 相同,用于 JSON 序列化
    
  • 自定义格式化:通常需要手动组合各个部分或使用第三方库(如 moment.jsdate-fns)。

6. 时区注意事项

JavaScript 的 Date 对象在内部存储的是 UTC 时间戳(自 1970 年 1 月 1 日 00:00:00 UTC 以来的毫秒数)。当使用常规的 get 方法(如 getHours()、getMinutes()、getDate() 等)时,这些方法会根据运行环境的本地时区返回对应的时间值。例如:

const date = new Date("2023-01-01T00:00:00Z"); // UTC 时间
console.log(date.getHours()); // 在北京时区(UTC+8)会输出8,在纽约时区(UTC-5)会输出19

同样地,set 方法(如 setHours()、setMinutes()、setDate() 等)也是基于本地时区来设置时间。例如:

const date = new Date();
date.setHours(12); // 设置本地时区的12点

如果需要直接操作 UTC 时间,可以使用 getUTC 和 setUTC 系列方法(如 getUTCHours()、setUTCHours()、getUTCMinutes()、setUTCMinutes() 等)。这些方法会忽略本地时区的影响,直接处理 UTC 时间。例如:

const date = new Date("2023-01-01T00:00:00Z");
console.log(date.getUTCHours()); // 始终输出0,不受时区影响

date.setUTCHours(12); // 将UTC时间设置为12点
console.log(date.toISOString()); // 输出"2023-01-01T12:00:00.000Z"

这种区别在处理跨时区应用时特别重要,比如:

  1. 国际会议系统需要统一显示UTC时间
  2. 航班时刻表需要同时显示本地时间和UTC时间
  3. 日志系统通常需要以UTC时间存储记录

7. 总结

JavaScript 中的 Date 对象是处理日期和时间的基础类,它提供了多种方法来创建、操作和格式化日期时间数据。在使用时需要注意以下几个关键点:

  1. 月份参数的特殊性

    • 当通过构造函数创建 Date 对象时,月份参数是从 0 开始计数的(0 表示一月,11 表示十二月)
    • 示例:
      // 2023年5月15日
      new Date(2023, 4, 15); // 注意月份是4而不是5
      
  2. 时区方法的区别

    • Date 对象提供两套方法:本地时区方法和 UTC 方法
    • 本地方法:getHours(), getMinutes() 等
    • UTC 方法:getUTCHours(), getUTCMinutes() 等
    • 应用场景:
      • 本地方法适合显示用户所在时区的时间
      • UTC 方法适合处理需要跨时区统一的时间数据
  3. 格式化输出

    • Date 对象没有内置的格式化方法,需要手动组合:
      const date = new Date();
      const formatted = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2,'0')}-${date.getDate().toString().padStart(2,'0')}`;
      
    • 推荐使用第三方库如 moment.js 或 date-fns 进行复杂格式化
  4. 年份获取的注意事项

    • 废弃方法:getYear()(返回年份减去1900,如2023年返回123)
    • 正确方法:getFullYear()(返回完整4位数年份)
    • 示例:
      new Date().getYear(); // 已废弃,不要使用
      new Date().getFullYear(); // 推荐使用
      
  5. 其他实用技巧

    • 时间戳获取:getTime() 或 Date.now()
    • 日期比较:可直接比较 Date 对象或它们的时间戳
    • 日期运算:通过加减毫秒数实现(1天=86400000毫秒)

到此这篇关于js中date对象使用方法详细介绍的文章就介绍到这了,更多相关js中date对象使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 精通Javascript系列之数据类型 字符串

    精通Javascript系列之数据类型 字符串

    下面先讲一下字符串String字符串由零个或者多个字符构成。字符可以包括字母、数字、标点符号和空格。
    2011-06-06
  • JavaScript中的document.querySelector()常见用法示例

    JavaScript中的document.querySelector()常见用法示例

    这篇文章主要介绍了JavaScript中document.querySelector()常见用法的相关资料,document.querySelector()是JavaScript DOM方法,通过CSS选择器定位首个匹配元素,支持ID/类/标签等复杂选择器,需要的朋友可以参考下
    2025-06-06
  • 详解js跨域请求的两种方式,支持post请求

    详解js跨域请求的两种方式,支持post请求

    原先一直以为要实现跨域请求只能用jsonp,只能支持GET请求,后来了解到使用POST请求也可以实现跨域,但是需要在服务器增加Access-Control-Allow-Origin和Access-Control-Allow-Headers头,下面说明下两个不同的方法实现的方式和原理。
    2018-05-05
  • 对Layer弹窗使用及返回数据接收的实例详解

    对Layer弹窗使用及返回数据接收的实例详解

    今天小编就为大家分享一篇对Layer弹窗使用及返回数据接收的实例详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js实现鼠标切换图片(无定时器)

    js实现鼠标切换图片(无定时器)

    这篇文章主要为大家详细介绍了js实现鼠标切换图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • JavaScript canvas实现动态点线效果

    JavaScript canvas实现动态点线效果

    这篇文章主要为大家详细介绍了JavaScript canvas实现动态点线效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • js数字输入框(包括最大值最小值限制和四舍五入)

    js数字输入框(包括最大值最小值限制和四舍五入)

    以前需要做一个数字输入的InputBox,结果无奈需求太BT,搞得焦头烂额,重做了无数次。无奈之下,再次Google,发现早有成熟的插件了(闷在家里造轮子果然不好啊),autoNumeric使用方便,功能强大,现在介绍给大家,一个非常好的jquery plugin。
    2009-11-11
  • 微信小程序网络请求实现过程解析

    微信小程序网络请求实现过程解析

    这篇文章主要介绍了微信小程序网络请求实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • js实现特定位取反原理及示例

    js实现特定位取反原理及示例

    循环输入每组两个数hex和n(0<=n<31),hex是一个16进制的数字,我们要做的是将hex的第n位取反,然后以16进制的形式输出对应的结果
    2014-06-06
  • JsRender for object语法简介

    JsRender for object语法简介

    这篇文章主要介绍了JsRender for object语法,以实例形式讲述了for Object的用法,需要的朋友可以参考下
    2014-10-10

最新评论