Javascript Date ведет себя двумя разными способами

Question

У меня есть внешний интерфейс Vue js, где у меня есть следующий цикл while со следующим:

while (this.day.getDay() != 0) {
  console.log(this.day)
  this.days.push(this.day)
  this.dates.push(this.day.toDateString())
  this.day.setDate(this.day.getDate() + 1)
}

Цикл выводит в консоли следующее.

Я создаю переменные следующим образом:

day: new Date(Date.now()),
dates: [],
days:[]

Мне интересно, почему массив дат работает правильно и содержит sep 6, sep7 и sep 8, номассив дней имеет только сентябрь 09 три раза?Также странно, что когда я регистрирую this.day, он записывает правильные дни, но затем не добавляет их в массив days.Что здесь происходит?

Answer 1

При выполнении этой строки:

this.days.push(this.day)

Вы продолжаете нажимать один и тот же объект Date каждый раз . Вы никогда не переназначаете this.day, вы изменяете его только с setDate, и каждый раз, когда вы делаете это, все ссылки в этом массиве обновляются.

Но когда вы запустите эту строку:

this.dates.push(this.day.toDateString())

Вы фиксируете состояние в момент нажатия, строки неизменны.

Для более простого примера того, что вы получаете, посмотрите на это

const foo = {bar: 3};
const arr = [foo, foo, foo]; // all the same foo
arr.map(x => x.bar); // 3, 3, 3
foo.bar = 5;
arr.map(x => x.bar); // 5, 5, 5