Выдвижение объектов в массив

Question

У меня на странице три кнопки html:

<button class="timespanbutton" value="1">1</button>
<button class="timespanbutton" value="2">2</button>
<button class="timespanbutton" value="3">3</button>

Теперь я хочу создать массив, содержащий объект для каждой кнопки:

var timespanObject = {}, timespanArray = [];
countSpecificFacilitySlotAmount = 3;

$('.timespanbutton').each(function() {
 slotName = "timespanbutton" + $(this).val();
  timespanObject.timespanName = slotName;
    timespanArray.push(timespanObject);
});

, чтобы получить массив, содержащий3 объекта с каждым созданным именем, например

timespanbutton1
timespanbutton2
timespanbutton3

Я действительно не знаю, что я делаю неправильно, но все три получают имя

timespanbutton3

Что я делаю не так?

Answer 1

Ну, вы меняете ссылку на тот же объект

Поймите, например, как это работает

let a ={};
let b = a;
a.name = 'xyz';
a.name = 'abc';
console.log(a.name)
console.log(b.name)

Итак, в приведенном выше примере у нас есть две переменные a и b.a является объектом.

1. Каждый раз, когда мы обновляем имя, последнее значение будет перезаписываться новым.
2. Когда мы назначаем объект любой другой переменной, он назначается как ссылка, а не каккопия. Так как мы меняем значение a, вы можете увидеть это изменение, если напечатаете b.

Рабочая версия вашего кода ниже

var timespanArray = [];
countSpecificFacilitySlotAmount = 3;

$('.timespanbutton').each(function() {
 slotName = "timespanbutton" + $(this).val();
 var timespanObject = {};
  timespanObject.timespanName = slotName;
    timespanArray.push(timespanObject);
});

console.log(timespanArray)

<script
			  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
			  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
			  crossorigin="anonymous"></script>
<button class="timespanbutton" value="1">1</button>
<button class="timespanbutton" value="2">2</button>
<button class="timespanbutton" value="3">3</button>

Answer 2

Вам необходимо объявить переменную slotname в цикле, она ссылается на контекст и имеет последнее значение все время.

Так что попробуйте вместо этого

$('.timespanbutton').each(function() {
    var slotName = "timespanbutton" + $(this).val(); // new var declare
    var timespanObject.timespanName = slotName;
    timespanArray.push(timespanObject);
});