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

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

当我检查控制台消息和configName的值时，一切看起来都很好，但最终结果只包含带有数组最后一个值的对象值。我应该修正什么以获得正确的结果

{
    "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"
        }
    },
    ...
}

eventsConfigs[configName]=eventsDefaultConfig；

你应该在这里创建一个深度副本。现在发生的是

eventsConfig

对象的所有属性都指向同一引用。

eventsConfigs[configName]=eventsDefaultConfig；

---

你应该在这里创建一个深度副本。现在发生的是

eventsConfig

对象的所有属性都指向同一个引用。

记住，这些对象在JS中是通过引用传递的。因此，当您说

eventsConfigs[configName]=eventsDefaultConfig，它与您在每次迭代中分配的对象相同

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


const eventsByDay={
“5月17日”：[
//一些物体
],
“5月18日”：[
//一些物体
],
“5月19日”：[
//一些物体
]
};
常数时间间隔=[
{timeStart:“10:00”，timeFinish:“11:00”}，
{timeStart:“11:00”，timeFinish:“12:00”}，
{timeStart:“12:00”，timeFinish:“13:00”}，
{timeStart:“13:00”，timeFinish:“14:00”}
];
函数eventsDefaultConfig（）{
返回{
SlideService视图：“自动”，
间隔时间：16，
导航：{
nextEl:“”，
普雷维尔：“
}
}
};
让eventsConfigs={}；
用于（eventsByDay中的const day）{
const dayNumber=day.split（“，1）[0]；
时间间隔。forEach（间隔=>{
const configName=`${dayNumber}-${interval.timeStart}`；
eventsConfigs[configName]=eventsDefaultConfig（）；
eventsConfigs[configName].navigation.nextEl=`${configName}-下一张幻灯片`；
eventsConfigs[configName].navigation.prevEl=`${configName}-prev幻灯片`；
});
}
console.log（事件配置）记住，对象在JS中是通过引用传递的。因此，当您说
eventsConfigs[configName]=eventsDefaultConfig，它与您在每次迭代中分配的对象相同

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


const eventsByDay={
“5月17日”：[
//一些物体
],
“5月18日”：[
//一些物体
],
“5月19日”：[
//一些物体
]
};
常数时间间隔=[
{timeStart:“10:00”，timeFinish:“11:00”}，
{timeStart:“11:00”，timeFinish:“12:00”}，
{timeStart:“12:00”，timeFinish:“13:00”}，
{timeStart:“13:00”，timeFinish:“14:00”}
];
函数eventsDefaultConfig（）{
返回{
SlideService视图：“自动”，
间隔时间：16，
导航：{
nextEl:“”，
普雷维尔：“
}
}
};
让eventsConfigs={}；
用于（eventsByDay中的const day）{
const dayNumber=day.split（“，1）[0]；
时间间隔。forEach（间隔=>{
const configName=`${dayNumber}-${interval.timeStart}`；
eventsConfigs[configName]=eventsDefaultConfig（）；
eventsConfigs[configName].navigation.nextEl=`${configName}-下一张幻灯片`；
eventsConfigs[configName].navigation.prevEl=`${configName}-prev幻灯片`；
});
}
console.log（事件配置），因为您正在使用相同的eventsDefaultConfig对象引用并覆盖其属性值。因此，您需要使用
扩展运算符（…）
克隆eventsDefaultConfig对象，并且还需要创建导航对象，因为扩展运算符创建浅拷贝

修改for循环

您可以参考lodash js库来创建。它还提供了各种有用的方法。
因为您使用的是相同的eventsDefaultConfig对象引用并覆盖其属性值。因此，您需要使用
扩展运算符（…）
克隆eventsDefaultConfig对象，并且还需要创建导航对象，因为扩展运算符创建浅拷贝

修改for循环

您可以参考lodash js库来创建。它还提供了各种有用的方法。
由于
eventsConfigs[configName]=eventsDefaultConfig。每次都需要深度克隆或从头开始创建。of。由于
eventsConfigs[configName]=eventsDefaultConfig，您在每个循环迭代中都使用相同的对象。每次都需要深度克隆或从头开始创建。属于
{
    "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"
        }
    },
    ...
}

{
    "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"
        }
    },
    ...
}

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;
  });
}