javascript - JavaScript 中的意外双循环

Question

我构建了一个应用程序，您可以在其中选择数据库中的一个表，然后在 Leaflet map 上显示数据。数据具有匹配的图例。

我希望我的应用程序能够接受各种数据集并能够将它们显示在 map 上，并且只需对编程进行最少的改动。这是一个新的需求，我已经改变了我以前的代码，但它不是最优的。

我现在的代码循环遍历数据集以将颜色分配给特定值，但它也循环遍历数据集以提取唯一值，以便我可以在图例中使用它们。

这导致我的应用程序在循环中有一个循环，生成不必要的计算。这对于小数据集没有问题，19 条记录 x19 是可行的，但是 8062x8062...

getColor() 函数中的 for 循环是问题所在。我尝试将 for 循环重新定位到一个新函数 (getColor v2)，但我总是以缺少 arrayMetKetens 告终。我认为 getColor() 在 getArray() 可以返回它的值之前运行，但是因为一旦我选择了一个表很多函数就开始运行，我不能真的强制 getArray() 以更快地返回它。或者有吗？

为标记/多边形添加颜色的代码:

window["mapDataLayer"] = L.geoJson(geojson_dataTable, {
    pointToLayer: function (feature, latlng) {
        var markerStyle = { 
            fillColor: getColor(feature.properties.Fastfoodketen),
            color: "#696969",
            fillOpacity: 0.6,
            opacity: 0.9,
            weight: 1,
            radius: 8
        };
        return L.circleMarker(latlng, markerStyle);
    },

     style: function (feature){
         if(feature.geometry.type === 'MultiPolygon'){
             var polygonStyle = {
            fillColor: getColor(feature.properties.Naam),
            color: "grey",
            weight: 5,
            opacity: 1
            };
         }
         else{
             return null;
         }
         return polygonStyle;
     }
}).addTo(map);

getColor 函数:

function getColor(keten) {
    checkTable();
    var ketens = [];

    for(i=0;i<(geojson_dataTable.features).length;i++){
        ketens = ketens.concat(Object.byString(geojson_dataTable, 'features['+i+'].properties.'+featureVoorSorteer))
    }
    console.log(ketens);
    arrayMetKetens = (jQuery.unique( ketens ));
    var i = arrayMetKetens.indexOf(keten);

    if (i !== -1) {
        return arrayKleur[ i ];
        } 
    else {
        return '#999999';
    } 
}

getColor v2:

function getArray(){
    var ketens = [];
    for(i=0;i<(geojson_dataTable.features).length;i++){
        ketens = ketens.concat(Object.byString(geojson_dataTable, 'features['+i+'].properties.'+featureVoorSorteer))
        console.log(ketens);
    }
    arrayMetKetens = (jQuery.unique( ketens ));
    return arrayMetKetens.
}

function getColor(keten) {
    checkTable();
    getArray();
    yMetKetens.indexOf(keten);
    if (i !== -1) {
        return arrayKleur[ i ];
        } 
    else {
        return '#999999';
    } 
    console.log("hij doet het")
}

Answer 1

首先，如果您不介意我评论 JS 编程风格，那么这段代码……好吧……远非完美:-) 特别是全局变量的间接使用使它难以阅读。我会尝试试一试并提出一些不暗示“重写整个事情”的建议。

我将遵循函数中全局变量的用法，尽管它通常被认为是一种反模式。

首先 - 如果您作为“getColor v2”提交的代码是实际代码，那么其中有一个明显的错误:

function getColor(keten) {
    checkTable();
    getArray();
    //yMetKetens.indexOf(keten);<-- looks like partialy copied code :-)
    // SHOULD BE THIS:
    var i = arrayMetKetens.indexOf(keten);
    if (i !== -1) {
        return arrayKleur[ i ];
        } 
    else {
        return '#999999';
    } 
    console.log("hij doet het")
}

在修复了这个问题后，我们每次调用 getColor() 时仍然会调用 getArray()。但首先让我们看一下 getArray() 的略微改进版本:

function getArray(){
    var ketens = [];
    //for(i=0;i<(geojson_dataTable.features).length;i++){
    //    ketens = ketens.concat(Object.byString(geojson_dataTable, 'features['+i+'].properties.'+featureVoorSorteer))
    //    console.log(ketens);
    //}
    //THE CODE ABOVE CAN BE SIMPLY EXPRESSED AS
    for(i=0;i < geojson_dataTable.features.length;i++){
       ketens = keten.concat(geojson_dataTable.features[i].properties[featureVoorSorteer])
    }
    //lets use global variable arrayMetKetens explicitly 
    window.arrayMetKetens = jQuery.unique( ketens );
    //return arrayMetKetens <-- we never use the return value of the function anyway...

}

现在我们可以稍微修改我们的函数 getColor():

function getColor(keten) {
    checkTable();
    //getArray(); <--REMOVE CALL TO getArray()
    var i = window.arrayMetKetens.indexOf(keten);//<-- explicit use of global variable we initialise in getArray()
    if (i !== -1) {
        return arrayKleur[ i ];
        } 
    else {
        return '#999999';
    } 
    console.log("hij doet het")
}

我们要做的最后一件事是在手头有 geojson_dataTable 对象后立即调用 getArray()。您提交的代码没有该部分，所以让我们把它放在这里:

getArray();//<-- calling getArray() here will initialise (once) the array arrayMetKetens 
           //    which then can be used in the function getColors()
window["mapDataLayer"] = L.geoJson(geojson_dataTable, {
    pointToLayer: function (feature, latlng) {
        var markerStyle = { 
            fillColor: getColor(feature.properties.Fastfoodketen),
            color: "#696969",
            fillOpacity: 0.6,
            opacity: 0.9,
            weight: 1,
            radius: 8
        };

这很有趣! :-) 希望对您有所帮助... ;-)