数组推送 'Different Info' 结果是每次迭代都推送相同的第一次迭代

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

编辑：

答案无效后我正在使用的 Same Snipped

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

Answer 1

发生这种情况是因为您使用相同的力矩对象来推动所以这应该有帮助

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 2

由于 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)

Answer 3

逐步引导您完成代码：

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

数组推送 'Different Info' 结果是每次迭代都推送相同的第一次迭代

Array Push 'Different Info' Results in Pushing Same First Iteration For Every Iteration

javascript

arrays

momentjs

pass-by-rvalue-reference

angular