如何使用for循环在leaflet中添加多个多边形和图层？

<link rel="stylesheet" href="leaflet.css">
<script src="leaflet.js"></script>

<div id="map" style="width: 800px; height: 600px;"></div>
<script>
    var map = L.map('map').setView([51.505, -0.09], 13);
</script>

<script>
    var polygons = [
        [[51.509, -0.08], [51.503, -0.06], [51.51, -0.047]],
        [[51.51, -0.09], [51.51, -0.05], [51.51, -0.02]]
    ];

    for (var i = 0; i < polygons.length; i++) {
        var polygon = L.polygon(polygons[i], {color: 'red'}).addTo(map);
    }
</script>

<script>
    var polygons = [
        [[51.509, -0.08], [51.503, -0.06], [51.51, -0.047]],
        [[51.51, -0.09], [51.51, -0.05], [51.51, -0.02]]
    ];

    var polygonGroup = L.layerGroup();

    for (var i = 0; i < polygons.length; i++) {
        var polygon = L.polygon(polygons[i], {color: 'red'});
        polygonGroup.addLayer(polygon);
    }

    polygonGroup.addTo(map);
</script>