异常教程

javascript date（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，日期与时间的处理是一个高频且复杂的主题。无论是构建日历应用、计算用户活跃时间，还是处理跨时区数据，开发者都需要掌握 JavaScript Date 对象的核心功能与技巧。本文将从基础概念到高级应用场景，以通俗易懂的方式讲解如何高效操作日期，帮助读者解决实际开发中的常见问题，并避免潜在陷阱。

JavaScript Date 对象基础

JavaScript 的 Date 对象用于处理日期和时间，它提供了创建、解析、格式化日期等核心功能。

创建日期对象

可以通过以下方式初始化 Date 对象：

// 方法1：当前时间  
const now = new Date();  
console.log(now); // 输出类似 "2023-10-05T08:30:00.000Z"  

// 方法2：传入时间戳（毫秒）  
const specificTime = new Date(1696464600000);  
console.log(specificTime);  

// 方法3：传入字符串  
const birthday = new Date("2023-10-01");

注意：当传入字符串时，格式需符合 ISO 8601（如 YYYY-MM-DD），否则可能导致解析错误。

时间戳与毫秒数

Date 对象的核心是基于 1970-01-01 00:00:00 UTC 开始计算的毫秒数（即时间戳）。通过 .getTime() 可以获取当前时间的毫秒数：

const now = new Date();  
console.log(now.getTime()); // 输出类似 1696464600000

时间戳的用途广泛，例如：

  • 计算两个日期的差值（如 dateA - dateB 得到毫秒差）
  • 存储或传递时间数据（避免因时区问题导致的混乱）

常用方法：获取与设置日期属性

Date 对象提供了多个方法来获取或设置日期的各个部分（年、月、日等）。

获取日期信息

以下方法返回数值，注意 月份从 0 开始（0 表示 1 月）：

const date = new Date("2023-10-05");  
console.log(date.getFullYear()); // 2023  
console.log(date.getMonth()); // 9（10月-1）  
console.log(date.getDate()); // 5（5日）  
console.log(date.getHours()); // 0（默认无时区时间）

设置日期属性

使用 setFullYear()、setMonth() 等方法可修改日期对象：

date.setFullYear(2024);  
date.setDate(15);  
console.log(date); // 输出 "2024-10-15T00:00:00.000Z"

格式化日期：从简单到复杂

JavaScript 原生并未提供直接格式化日期的方法（如生成 YYYY-MM-DD 字符串），但可通过组合方法或第三方库实现。

手动格式化

function formatDate(date) {  
  const year = date.getFullYear();  
  const month = String(date.getMonth() + 1).padStart(2, "0");  
  const day = String(date.getDate()).padStart(2, "0");  
  return `${year}-${month}-${day}`;  
}  

const formattedDate = formatDate(new Date());  
// 输出类似 "2023-10-05"

使用第三方库（如 date-fns）

对于复杂场景，推荐使用轻量库 date-fns：

import { format } from "date-fns";  

const formatted = format(new Date(), "yyyy-MM-dd HH:mm:ss");  
// 输出 "2023-10-05 14:30:22"

处理时区问题：避免常见的“时差陷阱”

JavaScript 的 Date 对象默认以 UTC 时间 或 本地时区 为基础，这可能导致误解。

本地时区与 UTC 的区别

const date = new Date();  
console.log(date.toString()); // 本地时区格式（如 "Thu Oct 05 2023..."）  
console.log(date.toUTCString()); // UTC 格式（如 "Thu, 05 Oct 2023 08:30:00 GMT"）

跨时区计算

若需将本地时间转换为其他时区，建议使用 toLocaleString() 并指定时区：

const options = {  
  timeZone: "Asia/Shanghai",  
  hour12: false,  
  year: "numeric",  
  month: "2-digit",  
  day: "2-digit",  
  hour: "2-digit",  
  minute: "2-digit",  
};  

const shanghaiTime = new Date().toLocaleString("zh-CN", options);  
// 输出类似 "2023/10/05 16:30"

进阶技巧：日期计算与比较

计算两个日期的差值

通过时间戳差值可计算天数、小时等：

function getDateDiff(dateA, dateB) {  
  const diffMs = Math.abs(dateA - dateB);  
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));  
  return `${diffDays} days`;  
}  

const diff = getDateDiff(new Date("2023-10-01"), new Date());  
// 输出 "4 days"（假设当前日期为 10 月 5 日）

日期范围判断

判断某日期是否在两个时间点之间：

function isWithinRange(date, start, end) {  
  return date >= start && date <= end;  
}  

const startDate = new Date("2023-10-01");  
const endDate = new Date("2023-10-07");  
const targetDate = new Date("2023-10-05");  

console.log(isWithinRange(targetDate, startDate, endDate)); // true

常见问题与解决方案

问题 1：月份索引从 0 开始

示例错误：

const wrongDate = new Date(2023, 10, 1); // 实际是 2023-11-01

解决方法：始终记得月份参数需减 1：

const correctDate = new Date(2023, 9, 1); // 2023-10-01

问题 2：时区偏移导致的意外结果

示例：

const date = new Date("2023-10-05T00:00:00");  
console.log(date.getHours()); // 输出 8（假设本地时区为 UTC+8）

解决方法：使用 UTC 方法（如 getUTCHours()）避免本地时区干扰：

console.log(date.getUTCHours()); // 输出 0

实战案例：构建一个简易日历

以下代码展示如何用 Date 对象生成当前月的日历表格：

function generateCalendar() {  
  const currentDate = new Date();  
  const year = currentDate.getFullYear();  
  const month = currentDate.getMonth();  

  const firstDay = new Date(year, month, 1);  
  const lastDay = new Date(year, month + 1, 0);  

  const days = [];  
  // 补全前一周的空格  
  for (let i = 0; i < firstDay.getDay(); i++) {  
    days.push("");  
  }  
  // 添加当前月的所有天  
  for (let day = 1; day <= lastDay.getDate(); day++) {  
    days.push(day);  
  }  
  // 补全后一周的空格  
  while (days.length < 42) {  
    days.push("");  
  }  

  // 返回二维数组（7天一行）  
  const rows = [];  
  for (let i = 0; i < days.length; i += 7) {  
    rows.push(days.slice(i, i + 7));  
  }  
  return rows;  
}  

// 使用示例：  
const calendar = generateCalendar();  
console.log(calendar); // 输出包含当前月日历的二维数组

结论

JavaScript Date 对象是开发者必须掌握的核心工具，其功能覆盖了从基础时间获取到复杂时区转换的全场景。通过理解时间戳、时区差异、以及合理使用方法链和第三方库，开发者可以高效解决日期相关的问题。

对于初学者，建议从基础方法开始练习，逐步过渡到时区处理与日期计算；中级开发者则可深入探索高级技巧，并结合项目需求选择合适的库（如 date-fns）。记住，实践是掌握 JavaScript Date 的最佳路径——尝试构建日历、倒计时或国际化时间显示功能，你的技能将快速提升！

通过本文的学习，读者应能熟练运用 JavaScript Date 对象的核心功能，并在实际项目中避免常见错误。掌握这些技巧后，你可以进一步探索更复杂的场景，如动态时间范围筛选或跨时区事件调度，让日期处理成为你开发中的得力助手。

最新发布

查看更多文章