JavaScript循环数组并推入对象数组问题排查求助

你的代码与预期 #

你尝试循环数组生成包含key属性的对象数组，代码如下：

const past7Days = [...Array(7).keys()].map(index => {
  var date = new Date();

  const local = new Date();
  local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
  local.setDate(date.getDate() - index);

  return local.toJSON().slice(0, 10);
});
let data={};
let arr=[]
for (var i = 0; i < past7Days.length; i++) {
    console.log(past7Days[i]);
  return arr.push(data["key"] = past7Days[i]) 
}

预期得到的结果：

[{key:"date"},{key:"date2"}, ...]

错误点分析 #

• 循环提前终止：for循环里的return语句会直接结束当前执行上下文（如果在函数内则跳出函数，全局环境下直接终止代码），导致循环只执行一次，数组里只会有第一个日期字符串，而非对象数组。
• 复用同一个对象：你始终修改的是同一个data对象的key值，即便循环能跑完，数组里的所有元素都会指向同一个对象，最终所有key都会是最后一次循环的日期。
• push的内容错误：data["key"] = past7Days[i]的返回值是赋值后的日期字符串，所以arr.push()实际推入的是字符串，不是你想要的对象。

修正后的代码 #

方案1：修复原for循环 #

const past7Days = [...Array(7).keys()].map(index => {
  const date = new Date();
  const local = new Date();
  local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
  local.setDate(date.getDate() - index);
  return local.toJSON().slice(0, 10);
});
let arr = [];
for (var i = 0; i < past7Days.length; i++) {
  console.log(past7Days[i]);
  // 每次循环创建新对象，推入数组
  arr.push({ key: past7Days[i] });
}
console.log(arr);

方案2：用map简化代码（更推荐） #

既然past7Days本身是通过map生成的，直接用map转换为目标数组更简洁高效：

const past7Days = [...Array(7).keys()].map(index => {
  const date = new Date();
  const local = new Date();
  local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
  local.setDate(date.getDate() - index);
  return local.toJSON().slice(0, 10);
});
const arr = past7Days.map(date => ({ key: date }));
console.log(arr);

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