数组推送“不同信息”导致每次迭代都推送相同的第一次迭代

Question

我试图每天 3 次通知用户他的药物，所以我创建了：

let timesPerDay = []

const today = moment();
//not working
for (let i = 0; i < 3; i++) {
  timesPerDay.push(today.add(8 * i, "hour"));
}
//working normally
for (let i = 0; i < 3; i++) {
  console.log(today.add(8 * i, "hour"));
}

console.log(timesPerDay)

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

但是有一个奇怪的错误，当推送到数组时，它保存每次迭代的第一个日期而不是每次都增加 8 小时，这太奇怪了！

Array.push 是如何工作的？

JavaScript 创建数组的速度是否太快，所以第一个循环不工作但第二个循环工作？

代码笔： https://codepen.io/microsmsm-the-flexboxer/pen/BaypYVO

编辑：

答案不起作用后我正在使用的相同片段

https://codepen.io/microsmsm-the-flexboxer/pen/KKwaoeM

Answer 1

逐步引导您完成代码：

let timesPerDay = [] // create an array

const today = moment(); // create a moment object

for (let i = 0; i < 3; i++) {
  // add hours to moment object
  // push a reference to that moment object into your array
  // it's always a reference to the SAME moment object, so the same object is referenced in your array multiple times
  // mutations to that object will show everywhere it is referenced
  timesPerDay.push(today.add(8 * i, "hour")); 
}

for (let i = 0; i < 3; i++) {
  // add hours to same moment object
  // log the string representation of that object AT EACH ITERATION
  // once transformed to a string, the string representation will not change as it is no longer part of the object
  console.log(today.add(8 * i, "hour"));
}

console.log(timesPerDay) // log string representation of your array, which is just 3 references to the same object

Answer 2

这是因为您使用相同的时刻对象来推动 所以这应该会有所帮助

let timesPerDay = []

for (let i = 0; i < 3; i++) {
  timesPerDay.push(moment().add(8*i,"hour"));
}

for (let i = 0; i < 3; i++) {
  console.log(moment().add(8*i,"hour"));
}

console.log(timesPerDay)

Answer 3

由于 momentjs .add 正在改变 today 变量，所有日期都将相同（等于开始日期 + 0 + 8 + 16 小时），因为您一直在推送相同的参考。

您必须复制日期才能重新开始。

const today = moment()
console.log(`Today: ${today}`)
// Today: Wed Dec 18 2019 17:14:11 GMT+0100
// Loop 0: Wed Dec 18 2019 17:14:11 GMT+0100
// Loop 1: Thu Dec 19 2019 01:14:11 GMT+0100
// Loop 2: Thu Dec 19 2019 09:14:11 GMT+0100
const times = [0, 1, 2].map(offset => {
    const date = moment(today) // clone
    date.add(8*offset,"hour")
    console.log(`Loop ${offset}: ${date}`)
    return date
})

编辑：不是 + 8 + 16 + 24 而是 0 + 8 + 16

编辑 2：证明 console.log 的第二次迭代没有输出 OP 想要的内容：

let timesPerDay = []

const today = moment();
console.log(`today: ${today}`)

// today: Wed Dec 18 2019 17:03:02 GMT+0100
// Loop 0: Wed Dec 18 2019 17:03:02 GMT+0100
// Loop 1: Thu Dec 19 2019 01:03:02 GMT+0100
// Loop 2: Thu Dec 19 2019 17:03:02 GMT+0100
// Last loop is 24 hours later than the initial date!
for (let i = 0; i < 3; i++) {
  // Mutates your start date
   const newDate = today.add(8*i,"hour");
   timesPerDay.push(newDate);
   console.log(`Loop ${i}: ${newDate}`);
}

console.log(timesPerDay)