JavaScript 日期处理是每个前端开发者必须掌握的核心技能。无论是电商平台的倒计时活动、管理系统的数据报表还是社交应用的消息时间显示都离不开日期运算和格式化。这次我们直接切入实战重点讲解如何用 JavaScript 实现日期的复制、加减运算和格式化输出。很多开发者在处理日期时会遇到这些问题日期对象直接赋值导致引用传递问题、加减天数月份计算复杂、不同浏览器下格式化结果不一致。本文将用最简洁的代码解决这些痛点提供可复用的工具函数帮助你在 5 分钟内掌握日期处理的关键技巧。1. 核心能力速览能力项说明日期复制解决引用传递问题实现真正的深拷贝日期加减支持天、月、年等单位的加减运算日期格式化自定义格式输出兼容多种显示需求跨浏览器兼容处理不同浏览器的日期解析差异实战场景覆盖倒计时、日期范围选择、报表生成等2. 日期对象的创建与复制2.1 创建日期对象的多种方式JavaScript 提供了多种创建日期对象的方法每种方式都有其适用场景// 1. 当前时间 const now new Date(); // 2. 指定时间戳 const timestamp new Date(1640995200000); // 3. 指定年月日 const specificDate new Date(2024, 0, 1); // 月份从0开始0代表1月 // 4. 字符串解析注意浏览器兼容性 const stringDate new Date(2024-01-01T00:00:00); // 5. 日期组件方式 const componentDate new Date(2024, 0, 1, 12, 30, 0, 0);2.2 日期复制的常见误区与正确方法很多开发者会犯这样的错误// ❌ 错误方式引用传递 const originalDate new Date(); const copiedDate originalDate; // 这只是引用复制 originalDate.setDate(originalDate.getDate() 1); console.log(copiedDate); // copiedDate 也会被修改正确的深拷贝方法// ✅ 方法1new Date() 构造函数 const originalDate new Date(); const copiedDate1 new Date(originalDate); // ✅ 方法2getTime() 时间戳 const copiedDate2 new Date(originalDate.getTime()); // ✅ 方法3Date.parse() 解析 const copiedDate3 new Date(Date.parse(originalDate)); // ✅ 方法4扩展运算符ES6 const copiedDate4 new Date(...[originalDate.getFullYear(), originalDate.getMonth(), originalDate.getDate(), originalDate.getHours(), originalDate.getMinutes(), originalDate.getSeconds()]); // 验证复制效果 originalDate.setDate(originalDate.getDate() 1); console.log(originalDate); // 日期1天 console.log(copiedDate1); // 保持原日期不变3. 日期加减运算实战3.1 基础加减运算日期的加减运算需要特别注意月份和年份的边界情况class DateCalculator { constructor(date new Date()) { this.date new Date(date); } // 加减天数 addDays(days) { this.date.setDate(this.date.getDate() days); return this; } subtractDays(days) { return this.addDays(-days); } // 加减月份处理跨年边界 addMonths(months) { const newMonth this.date.getMonth() months; const newDate new Date(this.date); newDate.setMonth(newMonth); // 处理日期溢出如1月31日加1个月应该是2月28/29日 if (newDate.getMonth() ! (newMonth % 12 12) % 12) { newDate.setDate(0); // 设置为上个月的最后一天 } this.date newDate; return this; } subtractMonths(months) { return this.addMonths(-months); } // 加减年份 addYears(years) { this.date.setFullYear(this.date.getFullYear() years); return this; } subtractYears(years) { return this.addYears(-years); } // 获取结果 getResult() { return new Date(this.date); } } // 使用示例 const today new Date(); const result new DateCalculator(today) .addDays(7) .addMonths(1) .addYears(1) .getResult(); console.log(今天: ${today.toLocaleDateString()}); console.log(计算结果: ${result.toLocaleDateString()});3.2 复杂日期计算场景实际项目中经常需要处理更复杂的日期计算// 计算两个日期之间的天数差 function getDaysBetween(date1, date2) { const oneDay 24 * 60 * 60 * 1000; // 一天的毫秒数 const firstDate new Date(date1); const secondDate new Date(date2); // 重置时间为同一天开始避免时间部分影响计算结果 firstDate.setHours(0, 0, 0, 0); secondDate.setHours(0, 0, 0, 0); const diffTime Math.abs(secondDate - firstDate); return Math.round(diffTime / oneDay); } // 获取某月的第一天和最后一天 function getMonthRange(year, month) { const firstDay new Date(year, month, 1); const lastDay new Date(year, month 1, 0); // 下个月的第0天即是本月的最后一天 return { firstDay, lastDay, daysInMonth: lastDay.getDate() }; } // 计算工作日排除周末 function addBusinessDays(startDate, days) { const date new Date(startDate); let daysAdded 0; while (daysAdded days) { date.setDate(date.getDate() 1); // 如果是周六或周日跳过 if (date.getDay() ! 0 date.getDay() ! 6) { daysAdded; } } return date; } // 使用示例 const date1 new Date(2024, 0, 1); const date2 new Date(2024, 0, 15); console.log(日期相差: ${getDaysBetween(date1, date2)} 天); const january getMonthRange(2024, 0); console.log(1月有 ${january.daysInMonth} 天); const startDate new Date(2024, 0, 1); // 周一 const after5BusinessDays addBusinessDays(startDate, 5); console.log(5个工作日后: ${after5BusinessDays.toLocaleDateString()});4. 日期格式化全面解析4.1 内置格式化方法JavaScript 提供了基础的格式化方法但功能有限const date new Date(2024, 0, 1, 14, 30, 45); // 内置方法 console.log(date.toString()); // Mon Jan 01 2024 14:30:45 GMT0800 console.log(date.toDateString()); // Mon Jan 01 2024 console.log(date.toTimeString()); // 14:30:45 GMT0800 console.log(date.toLocaleDateString()); // 2024/1/1根据系统区域设置 console.log(date.toLocaleTimeString()); // 下午2:30:45 console.log(date.toISOString()); // 2024-01-01T06:30:45.000Z4.2 自定义格式化函数为了满足各种显示需求我们需要实现更灵活的格式化函数function formatDate(date, format YYYY-MM-DD) { const d new Date(date); const patterns { YYYY: d.getFullYear(), YY: String(d.getFullYear()).slice(-2), MM: String(d.getMonth() 1).padStart(2, 0), M: d.getMonth() 1, DD: String(d.getDate()).padStart(2, 0), D: d.getDate(), HH: String(d.getHours()).padStart(2, 0), H: d.getHours(), hh: String(d.getHours() % 12 || 12).padStart(2, 0), h: d.getHours() % 12 || 12, mm: String(d.getMinutes()).padStart(2, 0), m: d.getMinutes(), ss: String(d.getSeconds()).padStart(2, 0), s: d.getSeconds(), A: d.getHours() 12 ? AM : PM, a: d.getHours() 12 ? am : pm }; return format.replace(/YYYY|YY|MM|M|DD|D|HH|H|hh|h|mm|m|ss|s|A|a/g, match patterns[match]); } // 使用示例 const now new Date(); console.log(formatDate(now, YYYY-MM-DD)); // 2024-01-01 console.log(formatDate(now, YYYY年MM月DD日)); // 2024年01月01日 console.log(formatDate(now, YYYY-MM-DD HH:mm:ss)); // 2024-01-01 14:30:45 console.log(formatDate(now, MM/DD/YYYY hh:mm A)); // 01/01/2024 02:30 PM4.3 高级格式化功能对于更复杂的需求可以实现支持多语言和相对时间的格式化class AdvancedDateFormatter { constructor(locale zh-CN) { this.locale locale; this.relativeTime { zh-CN: { future: %s后, past: %s前, s: 几秒, m: 1分钟, mm: %d分钟, h: 1小时, hh: %d小时, d: 1天, dd: %d天, M: 1个月, MM: %d个月, y: 1年, yy: %d年 }, en-US: { future: in %s, past: %s ago, s: a few seconds, m: a minute, mm: %d minutes, h: an hour, hh: %d hours, d: a day, dd: %d days, M: a month, MM: %d months, y: a year, yy: %d years } }; } // 相对时间格式化如2小时前 formatRelativeTime(targetDate, baseDate new Date()) { const target new Date(targetDate); const base new Date(baseDate); const diffInSeconds Math.floor((base - target) / 1000); const absDiff Math.abs(diffInSeconds); const times [ { limit: 60, key: s }, { limit: 3600, key: m, divisor: 60 }, { limit: 86400, key: h, divisor: 3600 }, { limit: 2592000, key: d, divisor: 86400 }, { limit: 31536000, key: M, divisor: 2592000 }, { limit: Infinity, key: y, divisor: 31536000 } ]; const timeConfig this.relativeTime[this.locale]; const isFuture diffInSeconds 0; for (const time of times) { if (absDiff time.limit) { const value Math.round(absDiff / (time.divisor || 1)); const key value 1 ? time.key : time.key time.key; const template isFuture ? timeConfig.future : timeConfig.past; return template.replace(%s, timeConfig[key].replace(%d, value)); } } return this.formatDate(target, YYYY-MM-DD HH:mm); } // 国际化日期格式化 formatIntl(date, options {}) { const defaultOptions { year: numeric, month: 2-digit, day: 2-digit, ...options }; return new Intl.DateTimeFormat(this.locale, defaultOptions).format(new Date(date)); } } // 使用示例 const formatter new AdvancedDateFormatter(zh-CN); const testDate new Date(Date.now() - 2 * 60 * 60 * 1000); // 2小时前 console.log(formatter.formatRelativeTime(testDate)); // 2小时前 console.log(formatter.formatIntl(new Date(), { year: numeric, month: long, day: numeric, weekday: long })); // 2024年1月1日星期一5. 实战应用场景5.1 倒计时功能实现class CountdownTimer { constructor(targetDate, options {}) { this.targetDate new Date(targetDate); this.options { onUpdate: () {}, onComplete: () {}, interval: 1000, ...options }; this.timer null; } start() { this.update(); this.timer setInterval(() this.update(), this.options.interval); } stop() { if (this.timer) { clearInterval(this.timer); this.timer null; } } update() { const now new Date(); const diff this.targetDate - now; if (diff 0) { this.stop(); this.options.onComplete(); return; } const timeLeft { days: Math.floor(diff / (1000 * 60 * 60 * 24)), hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)), minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)), seconds: Math.floor((diff % (1000 * 60)) / 1000), total: diff }; this.options.onUpdate(timeLeft); } getTimeLeft() { const now new Date(); const diff this.targetDate - now; return { days: Math.floor(diff / (1000 * 60 * 60 * 24)), hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)), minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)), seconds: Math.floor((diff % (1000 * 60)) / 1000) }; } } // 使用示例 const targetDate new Date(Date.now() 5 * 24 * 60 * 60 * 1000); // 5天后 const timer new CountdownTimer(targetDate, { onUpdate: (timeLeft) { console.log(剩余时间: ${timeLeft.days}天 ${timeLeft.hours}小时 ${timeLeft.minutes}分钟 ${timeLeft.seconds}秒); }, onComplete: () { console.log(倒计时结束); } }); // timer.start(); // 开始倒计时5.2 日期范围选择与验证class DateRangeValidator { // 验证日期范围是否有效 static validateRange(startDate, endDate, options {}) { const start new Date(startDate); const end new Date(endDate); const { maxRange 365, minRange 0 } options; if (start end) { return { isValid: false, error: 开始日期不能晚于结束日期 }; } const diffDays Math.floor((end - start) / (1000 * 60 * 60 * 24)); if (diffDays maxRange) { return { isValid: false, error: 日期范围不能超过 ${maxRange} 天 }; } if (diffDays minRange) { return { isValid: false, error: 日期范围不能小于 ${minRange} 天 }; } return { isValid: true, days: diffDays }; } // 生成日期范围数组 static generateDateRange(startDate, endDate, step 1) { const start new Date(startDate); const end new Date(endDate); const dates []; // 重置时间为同一天开始 start.setHours(0, 0, 0, 0); end.setHours(0, 0, 0, 0); const current new Date(start); while (current end) { dates.push(new Date(current)); current.setDate(current.getDate() step); } return dates; } // 检查日期是否在范围内 static isDateInRange(date, startDate, endDate) { const checkDate new Date(date); const start new Date(startDate); const end new Date(endDate); checkDate.setHours(0, 0, 0, 0); start.setHours(0, 0, 0, 0); end.setHours(0, 0, 0, 0); return checkDate start checkDate end; } } // 使用示例 const startDate new Date(2024, 0, 1); const endDate new Date(2024, 0, 10); const validation DateRangeValidator.validateRange(startDate, endDate, { maxRange: 30 }); console.log(validation); // { isValid: true, days: 9 } const dateRange DateRangeValidator.generateDateRange(startDate, endDate); console.log(dateRange.map(d d.toLocaleDateString())); // 生成日期数组 const checkDate new Date(2024, 0, 5); console.log(DateRangeValidator.isDateInRange(checkDate, startDate, endDate)); // true6. 性能优化与最佳实践6.1 日期处理性能优化在处理大量日期数据时性能优化很重要// 1. 避免在循环中重复创建日期对象 function processDatesOptimized(dates) { // ❌ 性能差 // return dates.map(dateStr new Date(dateStr).getTime()); // ✅ 性能好 const results []; for (let i 0; i dates.length; i) { results.push(new Date(dates[i]).getTime()); } return results; } // 2. 使用时间戳进行比较 function compareDatesFast(date1, date2) { // 直接比较时间戳比比较日期对象更快 return date1.getTime() - date2.getTime(); } // 3. 缓存格式化结果 class CachedDateFormatter { constructor() { this.cache new Map(); } format(date, format) { const key ${date.getTime()}-${format}; if (this.cache.has(key)) { return this.cache.get(key); } const result formatDate(date, format); this.cache.set(key, result); // 限制缓存大小 if (this.cache.size 1000) { const firstKey this.cache.keys().next().value; this.cache.delete(firstKey); } return result; } }6.2 错误处理与边界情况健壮的日期处理需要完善的错误处理function safeDateParse(dateInput) { try { if (!dateInput) { throw new Error(日期输入不能为空); } // 处理多种输入类型 let date; if (dateInput instanceof Date) { date new Date(dateInput); } else if (typeof dateInput number) { date new Date(dateInput); } else if (typeof dateInput string) { // 尝试多种格式解析 date new Date(dateInput); if (isNaN(date.getTime())) { // 尝试其他格式 const isoDate dateInput.replace(/(\d{4})-(\d{2})-(\d{2})/, $1/$2/$3); date new Date(isoDate); } } else { throw new Error(不支持的日期格式); } if (isNaN(date.getTime())) { throw new Error(无效的日期格式); } return date; } catch (error) { console.error(日期解析错误:, error.message); return new Date(); // 返回当前日期作为默认值 } } // 使用示例 console.log(safeDateParse(2024-01-01)); // 正常解析 console.log(safeDateParse(invalid-date)); // 返回当前日期 console.log(safeDateParse(1640995200000)); // 时间戳解析7. 常见问题与解决方案7.1 时区问题处理时区是日期处理中最常见的问题// 时区处理工具类 class TimezoneHelper { // 将本地时间转换为UTC时间 static toUTC(date) { const localDate new Date(date); return new Date(localDate.getTime() localDate.getTimezoneOffset() * 60000); } // 将UTC时间转换为本地时间 static toLocal(date) { const utcDate new Date(date); return new Date(utcDate.getTime() - utcDate.getTimezoneOffset() * 60000); } // 获取时区偏移量小时 static getTimezoneOffset() { return new Date().getTimezoneOffset() / 60; } // 格式化带时区的时间 static formatWithTimezone(date, timezone UTC) { return new Intl.DateTimeFormat(en-US, { timeZone: timezone, year: numeric, month: 2-digit, day: 2-digit, hour: 2-digit, minute: 2-digit, second: 2-digit, timeZoneName: short }).format(new Date(date)); } } // 使用示例 const localDate new Date(); console.log(本地时间:, localDate); console.log(UTC时间:, TimezoneHelper.toUTC(localDate)); console.log(纽约时间:, TimezoneHelper.formatWithTimezone(localDate, America/New_York));7.2 浏览器兼容性问题不同浏览器的日期解析存在差异// 跨浏览器日期解析 function crossBrowserDateParse(dateString) { // 统一处理日期字符串格式 const normalized dateString .replace(/-/g, /) // 将 - 替换为 / .replace(/T/, ) // 将 T 替换为空格 .replace(/\../, ); // 移除毫秒部分 const date new Date(normalized); if (isNaN(date.getTime())) { // 备用解析方案 const parts normalized.split(/[/ :]/); if (parts.length 3) { return new Date(parts[0], parts[1] - 1, parts[2], parts[3] || 0, parts[4] || 0, parts[5] || 0); } } return date; } // 测试不同格式 const formats [ 2024-01-01, 2024/01/01, 2024-01-01T14:30:00, 01/01/2024 ]; formats.forEach(format { console.log(${format} → ${crossBrowserDateParse(format)}); });8. 完整工具类封装将上述功能封装成完整的日期工具类class DateUtils { // 日期创建 static create(date new Date()) { return new Date(date); } // 日期复制 static clone(date) { return new Date(date.getTime()); } // 日期加减 static add(date, amount, unit days) { const result new Date(date); switch (unit) { case years: result.setFullYear(result.getFullYear() amount); break; case months: const newMonth result.getMonth() amount; result.setMonth(newMonth); // 处理日期溢出 if (result.getMonth() ! (newMonth % 12 12) % 12) { result.setDate(0); } break; case days: result.setDate(result.getDate() amount); break; case hours: result.setHours(result.getHours() amount); break; case minutes: result.setMinutes(result.getMinutes() amount); break; case seconds: result.setSeconds(result.getSeconds() amount); break; } return result; } static subtract(date, amount, unit days) { return this.add(date, -amount, unit); } // 日期比较 static isBefore(date1, date2) { return new Date(date1) new Date(date2); } static isAfter(date1, date2) { return new Date(date1) new Date(date2); } static isSame(date1, date2, unit day) { const d1 new Date(date1); const d2 new Date(date2); switch (unit) { case year: return d1.getFullYear() d2.getFullYear(); case month: return d1.getFullYear() d2.getFullYear() d1.getMonth() d2.getMonth(); case day: return d1.toDateString() d2.toDateString(); default: return d1.getTime() d2.getTime(); } } // 日期格式化 static format(date, format YYYY-MM-DD) { return formatDate(date, format); } // 获取日期信息 static getDateInfo(date) { const d new Date(date); return { year: d.getFullYear(), month: d.getMonth() 1, day: d.getDate(), hour: d.getHours(), minute: d.getMinutes(), second: d.getSeconds(), weekday: d.getDay(), timestamp: d.getTime(), isoString: d.toISOString() }; } } // 使用示例 const today new Date(); const nextWeek DateUtils.add(today, 7, days); const lastMonth DateUtils.subtract(today, 1, months); console.log(今天:, DateUtils.format(today)); console.log(一周后:, DateUtils.format(nextWeek)); console.log(一月前:, DateUtils.format(lastMonth)); console.log(日期信息:, DateUtils.getDateInfo(today));掌握这些日期处理技巧后你就能应对绝大多数前端开发中的日期相关需求。重点记住日期复制的正确方法、加减运算的边界处理、以及格式化的灵活运用。在实际项目中建议将常用功能封装成工具类提高代码复用性和可维护性。