JavaScript内の二重ループのエラー

Question

私はデータベース内のテーブルを選択し、そのデータをリーフレットマップに表示できるアプリケーションを作成しました。データには一致する凡例があります。

私のアプリケーションでは、さまざまなデータセットを受け入れ、プログラミングの変更を最小限に抑えて地図上に表示できるようにしたいと考えています。これは新しい需要であり、以前のコードを変更しましたが、最適ではありません。

コードでは、特定の値に色を割り当てるためにデータセットをループしていますが、データセットをループして唯一の値を抽出して凡例に使用することもできます。

これは私のアプリケーションにループのループをさせ、不要な計算を引き起こします。これは小さなデータセットでは問題ありません.19レコードx19は実行可能ですが、8062x8062 ...

getColor()関数のforループが問題です。私は新しい関数（getColor v2）にforループを再配置しようとしましたが、私はいつも最後には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") 
} 

我々はまだgetArray()たびに電話を持っている固定その一つには、私たちgetColor()に電話してください。今、私たちは少し私達の機能getColor()変更することができます

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... 

} 

：

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

をそして、我々がしなければならない最後のものは、すぐにgetArray()を呼び出すことです。しかし最初のはgetArray()の少し改良版を見てみましょう私たちはgeojson_dataTableオブジェクトを手にしています。送信したコードにはその部分がありませんので、ここに入れてみましょう：

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

これは楽しいことでした。私はそれが助けてくれることを願っています...;-)