如何通过存储在数组中来制作对象列表

如何解决如何通过存储在数组中来制作对象列表

我正在从我的 firebase 数据库中获取一些数据并将数据构建到一个对象中并将每个对象存储在一个数组中，但它只多次存储第一个对象，而不存储第二个第三个......或我正在使用的第 N 个对象用于存储它们的循环，但无法找出问题所在，请查看下面的函数

 function dataHandler(deviceList,roomList) {
          var data = {
            roomName: "",devicesAssigned: [],};           
          
         for (let i = 0; i < roomList.length; i++) {

          data.devicesAssigned = deviceList[i]; 
          data.roomName = roomList[i]; 

          console.log(data);//printing object getting from database
          
          
          dataArray.push(data);// storing each object in an array
        }
         console.log(dataArray);// printing after array is filled 
        }

这是我得到的输出，请注意，我成功地从我的数据库中获取了不同的对象，但它并没有将它们全部推送两次，它唯一的打印对象编号为 1

解决方法

您每次都将相同的 data 对象推送到数组上。每次循环都需要创建一个新对象。

function dataHandler(deviceList,roomList) {
  for (let i = 0; i < roomList.length; i++) {
    var data = {
      roomName: roomList[i],devicesAssigned: deviceList[i],};

    console.log(data); //printing object getting from database
    dataArray.push(data); // storing each object in an array
  }
  console.log(dataArray); // printing after array is filled 
}

您还可以摆脱 for 循环，在一次调用 map() 中完成所有操作。

dataArray = roomList.map((room,i) => ({
    roomName: room,devicesAssigned: deviceList[i]
}))

要了解这里的问题，您必须了解引用和值之间的区别。

在 JavaScript 中，对象和数组通过它们的引用存储到内存中。原始数据类型如 Number、String、Boolean 是按值存储的。

假设我正在创建一个对象

myObj = {firstName: "First",lastName: "last"}

在这种情况下，myObj 将存储 myObj 的内存引用而不是值。如果你把这个对象赋值给另一个变量，它不会复制对象的值，而只是复制对另一个变量的引用。

copyObj = myObj

以下操作不仅会更改 copyObj 还会更改 myObj，因为这两个变量都指向内存中完全相同的对象（哈希映射）。 copyObj.firstName = "New First Name

现在来解决您的问题

for (let i = 0; i < roomList.length; i++) {
data.devicesAssigned = deviceList[i];
data.roomName = roomList[i];

console.log(data); //printing object getting from database
dataArray.push(data); // storing each object in an array
}

您的 for 循环指向同一个数据对象，为其分配一些值并将其放入数组中。

在第一次迭代中，它将更新数据对象并将其推送到数组中。（记住它只会推送引用）。

在第二次和后续迭代中，您只更新已经存在的数据对象，而不是创建新的数据对象，因此数组中指向同一数据对象的所有变量都将具有相同的值。

每次在数组内创建一个新对象（对新 HashMap 的新引用）将解决您的问题。

for (let i = 0; i < roomList.length; i++) {
const data = {};
data.devicesAssigned = deviceList[i];
data.roomName = roomList[i];

console.log(data); //printing object getting from database
dataArray.push(data); // storing each object in an array
}

我真的建议你阅读一篇关于复制对象和数组的文章。浅拷贝 vs 深拷贝。

您在循环中使用了相同的对象。使用以下代码使其工作：

let roomList = ['r1','r2','r3'];
let deviceList = ['d1','d2','d3'];

const data = dataHandler(deviceList,roomList);
console.log(data);

function dataHandler(deviceList,roomList) {
  return roomList.map((room,i) => ({
    devicesAssigned: deviceList[i],roomName: room
  }));
}