JS存储当月周末日期到数组后索引访问返回undefined如何解决

问题根因 #

这是控制台对引用类型的延迟求值特性和代码执行顺序错位共同导致的：

• 你在声明arr = []后立刻执行了console.log(arr)和console.log(arr[0])，此时renderDay函数还没有被调用，arr确实是空数组，所以当时取arr[0]返回undefined是符合实际状态的。
• 浏览器控制台打印数组、对象这类引用类型时，存储的是内存引用，你后续点击展开打印结果时，浏览器才会读取该引用指向的最新值，所以你看到的是已经被renderDay填充后的数组内容，和打印执行时刻的数组状态并不一致。

解决方法 #

只要保证访问数组索引的操作在renderDay执行、数组填充完成之后进行即可，常用方案如下：

方案1：调整代码执行顺序 #

把数组访问逻辑挪到renderDay调用之后：

let arr = [];

const renderDay = () => {
  // 原有逻辑保持不变
};

// 先调用renderDay完成数组填充
renderDay();
// 再访问数组索引即可拿到正确值
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);

方案2：把访问逻辑放到renderDay内部末尾 #

如果renderDay的调用时机不受你控制，可以在函数最后、返回值之前加打印，此时数组已经完成填充：

const renderDay = () => {
  let td = [];
  for (let i = 1; i <= d; i++) {
    // 原有循环逻辑保持不变
  }
  // 此处数组已经填充完成，访问索引正常
  console.log(arr[0]);
  return td;
};

方案3：React场景下监听数组变化 #

如果你是在React项目中使用，renderDay是组件渲染阶段执行的，可以用useEffect监听arr的变化，等填充完成后再访问：

useEffect(() => {
  if(arr.length > 0) {
    console.log(arr[0]);
  }
}, [arr]);

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