为什么具有生成值的对象只有最后一个值？

Question

const eventsByDay = {
  "17 May": [
    // some objects
  ],
  "18 May": [
    // some objects
  ],
  "19 May": [
    // some objects
  ]
};

const timeIntervals = [
  { timeStart: "10:00", timeFinish: "11:00" },
  { timeStart: "11:00", timeFinish: "12:00" },
  { timeStart: "12:00", timeFinish: "13:00" },
  { timeStart: "13:00", timeFinish: "14:00" }
];

const eventsDefaultConfig = {
  slidesPerView: "auto",
  spaceBetween: 16,
  navigation: {
    nextEl: "",
    prevEl: ""
  }
};

let eventsConfigs = {};

for (const day in eventsByDay) {
  const dayNumber = day.split(" ", 1)[0];
  timeIntervals.forEach(interval => {
    const configName = `${dayNumber}-${interval.timeStart}`;
    console.log(configName);
    eventsConfigs[configName] = eventsDefaultConfig;
    eventsConfigs[configName].navigation.nextEl = `${configName}-next-slide`;
    eventsConfigs[configName].navigation.prevEl = `${configName}-prev-slide`;
  });
}

console.log(eventsConfigs);

我正在尝试创建具有自动生成值的对象。我使用for...of来迭代主对象(eventsByDay)，使用嵌套的forEach循环来迭代具有时间间隔的数组。我的目标是包含以下结构和命名的对象(导航对象中的每个元素根据eventByDay的日期和数组的时间间隔有唯一的名称)

{
    "17-10:00": {
        "slidesPerView": "auto",
        "spaceBetween": 16,
        "navigation": {
            "nextEl": "17-10:00-next-slide",
            "prevEl": "17-10:00-prev-slide"
        }
    },
    "17-11:00": {
        "slidesPerView": "auto",
        "spaceBetween": 16,
        "navigation": {
            "nextEl": "17-11:00-next-slide",
            "prevEl": "17-11:00-prev-slide"
        }
    },
    "17-12:00": {
        "slidesPerView": "auto",
        "spaceBetween": 16,
        "navigation": {
            "nextEl": "17-12:00-next-slide",
            "prevEl": "17-12:00-prev-slide"
        }
    },
    ...
}

当我检查控制台消息和configName的值时，一切似乎都很好，但最终结果只包含来自数组的最后一个值的对象值。我该怎么做才能得到正确的结果？

{
    "17-10:00": {
        "slidesPerView": "auto",
        "spaceBetween": 16,
        "navigation": {
            "nextEl": "19-13:00-next-slide",
            "prevEl": "19-13:00-prev-slide"
        }
    },
    "17-11:00": {
        "slidesPerView": "auto",
        "spaceBetween": 16,
        "navigation": {
            "nextEl": "19-13:00-next-slide",
            "prevEl": "19-13:00-prev-slide"
        }
    },
    "17-12:00": {
        "slidesPerView": "auto",
        "spaceBetween": 16,
        "navigation": {
            "nextEl": "19-13:00-next-slide",
            "prevEl": "19-13:00-prev-slide"
        }
    },
    ...
}

Answer 1

因为您使用相同的eventsDefaultConfig对象引用并重写其属性值。因此，您需要使用eventsDefaultConfig克隆spread operator (...)对象，还需要创建导航对象，因为spread创建了浅拷贝。

改进型循环

for (const day in eventsByDay) {
  const dayNumber = day.split(" ", 1)[0];
  timeIntervals.forEach(interval => {
    const configName = `${dayNumber}-${interval.timeStart}`;
    const navigation = {
      nextEl: `${configName}-next-slide`,
      prevEl:  `${configName}-prev-slide`
    } // create new object
    console.log(configName);
    eventsConfigs[configName] = {...eventsDefaultConfig}; //use spread operator
    eventsConfigs[configName].navigation = navigation;
  });
}

您可以参考lodash库来创建深拷贝对象。它还提供了各种有用的方法。

Answer 2

eventsConfigs[configName] = eventsDefaultConfig;

你应该在这里创建一个很深的副本。现在发生的情况是，eventsConfig对象的所有属性都指向相同的引用。

Answer 3

记住，对象是在JS中通过引用传递的。因此，当您说eventsConfigs[configName] = eventsDefaultConfig;时，它是您在每次迭代中分配的相同对象。

您的所有eventsConfigs[configName]属性都指向单个内存位置，最后放置的任何内容都将保持不变。您需要为每个eventConfig创建一个单独的对象。

​

const eventsByDay = {
  "17 May": [
    // some objects
  ],
  "18 May": [
    // some objects
  ],
  "19 May": [
    // some objects
  ]
};

const timeIntervals = [
  { timeStart: "10:00", timeFinish: "11:00" },
  { timeStart: "11:00", timeFinish: "12:00" },
  { timeStart: "12:00", timeFinish: "13:00" },
  { timeStart: "13:00", timeFinish: "14:00" }
];

 function eventsDefaultConfig() { 
 
 return {
    slidesPerView: "auto",
    spaceBetween: 16,
    navigation: {
      nextEl: "",
      prevEl: ""
    }
  }
  
};


let eventsConfigs = {};

for (const day in eventsByDay) {
  const dayNumber = day.split(" ", 1)[0];
  timeIntervals.forEach(interval => {
    const configName = `${dayNumber}-${interval.timeStart}`;
    eventsConfigs[configName] = eventsDefaultConfig();
    eventsConfigs[configName].navigation.nextEl = `${configName}-next-slide`;
    eventsConfigs[configName].navigation.prevEl = `${configName}-prev-slide`;
  });
}

console.log(eventsConfigs);

​