Массив объектов не принимает только последний не устанавливает значение

Question

let roomsData = new Array(5).fill({
    room: {
        id: undefined,
        title: undefined,
        users: [{nickname: 'Вася'},{nickname: 'Серёжа'},{nickname: 'Петя'}],
        messages:
            [{
                msg: 'Сообщение васи',
                date: getLocalTime(),
                nickname: 'Вася'
            }]
    }
});

initRoomData()

function initRoomData(){
    const rooms = new Array(5).fill('').map((_, i) => ({id:`${i}`, title:`Room ${i+1}` }))
    roomsData.forEach((value, index ,array) => {
        value.room.id = rooms[index].id
        value.room.title = rooms[index].title
        console.log(rooms[index])
    })
    console.log(roomsData)
}

{ id: '0', title: 'Room 1' }
{ id: '1', title: 'Room 2' }
{ id: '2', title: 'Room 3' }
{ id: '3', title: 'Room 4' }
{ id: '4', title: 'Room 5' }
[
  {
    room: { id: '4', title: 'Room 5', users: [Array], messages: [Array] }
  },
  {
    room: { id: '4', title: 'Room 5', users: [Array], messages: [Array] }
  },
  {
    room: { id: '4', title: 'Room 5', users: [Array], messages: [Array] }
  },
  {
    room: { id: '4', title: 'Room 5', users: [Array], messages: [Array] }
  },
  {
    room: { id: '4', title: 'Room 5', users: [Array], messages: [Array] }
  }
]

В чём причина сего поведения ума не приложу.

Answer 1

Вы заполняете массив пятью ссылками на один и тот же объект.

let roomsData = new Array(5).fill({
    room: {
        id: undefined,
        title: undefined,
        users: [{nickname: 'Вася'},{nickname: 'Серёжа'},{nickname: 'Петя'}]
    }
});
roomsData[2].room.title = "test";
console.log(roomsData[0].room.title);
console.log(roomsData[1].room.title);
console.log(roomsData[2].room.title);
console.log(roomsData[3].room.title);
console.log(roomsData[4].room.title);

БЛОГ НА HUSL

Массив объектов не принимает только последний не устанавливает значение

Ответы (1 шт):