如何用JavaScript获取未来4天的「Month Day」格式日期？

你遇到的问题主要来自两个核心错误，我来一步步拆解并给出修复方案：

核心问题1：setDate()会修改原Date对象 #

Date.setDate()方法会直接修改调用它的Date实例，并且返回的是毫秒级时间戳。你的代码里反复复用同一个now对象，导致每次调用setDate()后，now本身已经变成了新的日期，后续的计算都是基于修改后的日期，自然会出现累加错误。

核心问题2：时间戳单位混淆 #

setDate()返回的是毫秒级时间戳，但你的timeConverter函数里又把它乘以1000，相当于把时间戳放大了1000倍，这会得到一个极其遥远的未来时间，也就是你看到的随机奇怪日期的原因。

修复后的代码方案 #

我优化了代码逻辑，避免修改原日期对象，同时简化了日期格式化的过程：

// 保存原始当前日期，不修改它
const now = new Date();

// 格式化日期为「Month Day」格式的函数
function formatDate(date) {
  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  const monthName = months[date.getMonth()];
  const day = date.getDate();
  return `${monthName} ${day}`;
}

// 获取未来1-4天的日期，每次基于原始日期创建新对象
// 第1天
const tomorrow = new Date(now);
tomorrow.setDate(now.getDate() + 1);
document.querySelector(".next1").textContent = formatDate(tomorrow);

// 第2天
const dayAfterTomorrow = new Date(now);
dayAfterTomorrow.setDate(now.getDate() + 2);
document.querySelector(".next2").textContent = formatDate(dayAfterTomorrow);

// 第3天
const thirdDay = new Date(now);
thirdDay.setDate(now.getDate() + 3);
document.querySelector(".next3").textContent = formatDate(thirdDay);

// 第4天
const fourthDay = new Date(now);
fourthDay.setDate(now.getDate() + 4);
document.querySelector(".next4").textContent = formatDate(fourthDay);

关键优化点说明 #

1. 不修改原日期对象：每次通过new Date(now)创建一个原始日期的副本，确保所有后续计算都基于初始的当前日期。
2. 简化日期格式化：直接接收Date对象作为参数，避免时间戳转换的错误，同时函数名formatDate更语义化。
3. 使用textContent替代innerHTML：只是设置纯文本内容，textContent比innerHTML更安全，性能也更好。

进一步简化：用循环减少重复代码 #

如果需要生成更多天数的日期，可以用循环来避免重复代码：

const now = new Date();
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

function formatDate(date) {
  return `${months[date.getMonth()]} ${date.getDate()}`;
}

// 循环生成未来1-4天的日期
for (let i = 1; i <= 4; i++) {
  const futureDate = new Date(now);
  futureDate.setDate(now.getDate() + i);
  const targetElement = document.querySelector(`.next${i}`);
  if (targetElement) {
    targetElement.textContent = formatDate(futureDate);
  }
}

现在你再运行代码，就能得到正确的未来4天日期了，而且console.log(now)会显示正确的当前日期，不会再出现和实际日期不符的情况。

内容的提问来源于stack exchange，提问作者mfs