Express+Pug迭代数组传值失败：路由渲染无法获取对应元素

我正在为大学课程开发一个小型Web项目，使用Express框架并以Pug作为视图引擎。我希望遍历气象站数组，为每个气象站创建路由，并在详情页展示对应数组元素的值。

后端代码 #

var i = 0;
while(stations[i]!= null){
    app.get('/'+stations[i]["name"], (req, res) => {
        res.render("DetailsTemplate", {Station: stations[i]})
    });
    console.log(`detailsPageRunning on ` + '/' + stations[i]["name"] + ' '+ i);
    i++;
}

Pug模板代码 #

block content
    div(class="details")

        div(class="station")
            div(class="station-element")
                h2 #{Station.name}
                p
            div(class="station-element")
                h2 Wetter
                p #{Station.readings.at(0).wetter}
            div(class="station-element")
                h2 Temperatur
                p #{Station.readings.at(0).temp} Grad
            div(class="station-element")
                h2 Wind
                p #{Station.readings.at(0).wind} bft.
            div(class="station-element")
                h2 Luftdruck
                p #{Station.readings.at(0).luftdruck} bpa

当前路由已按预期创建，当固定传递Station: stations[0]时页面可正常渲染，但使用Station: stations[i]迭代传值时无法显示对应内容。尝试过其他数组，仍存在相同问题。

问题原因 #

这是闭包陷阱导致的。while循环中创建的所有路由回调函数，都共享同一个全局变量i。当用户访问路由时，循环早已执行完毕，此时i的值已经等于数组的长度（stations[i]变为undefined），所以传递给Pug视图的Station是undefined，页面自然无法渲染出内容。

解决方法 #

方法1：使用块级作用域变量保存当前迭代的元素

在循环内部用const声明当前的气象站元素，形成独立的块级作用域，让每个回调函数捕获自己作用域内的元素：

let i = 0;
while(stations[i] != null){
    const currentStation = stations[i];
    app.get('/' + currentStation.name, (req, res) => {
        res.render("DetailsTemplate", { Station: currentStation })
    });
    console.log(`detailsPageRunning on /${currentStation.name} ${i}`);
    i++;
}

方法2：使用forEach遍历数组（更简洁推荐）

forEach的每次迭代都会创建独立的作用域，每个回调函数捕获的都是当前迭代的station变量，从根源避免闭包共享变量的问题：

stations.forEach((station, index) => {
    app.get('/' + station.name, (req, res) => {
        res.render("DetailsTemplate", { Station: station })
    });
    console.log(`detailsPageRunning on /${station.name} ${index}`);
});

内容的提问来源于stack exchange，提问作者Melontree productions