如何將這些重複的JavaScript代碼縮短爲循環？

Question

我有10行，其中每行包含4列，現在我想要得到我使用localStorage導入的值。我找到了一種獨立的方式來放置所有這些值，但代碼全部重複。這些會導致代碼冗餘。我想知道是否有一種方法可以縮短使用循環的代碼？

這裏是我的代碼

var res = {}; 
    $(function(){ 
    $('#subbtn').click(function() { 
     console.log($('#tab').find('tr')) 
     $('tr').each(function(){ 
      var tmp = []; 
      var cl ; 
      $(this).find('select').each(function(){ 
      cl = $(this).attr('class'); 
      //console.log(cl); 
      tmp.push($(this).val()); 
      }) 

      res[cl] = tmp 
     }) 
     console.log(res); 
     localStorage.setItem("testingvalue",JSON.stringify(res)); 
     document.getElementById("results__display").innerHTML = (localStorage.getItem("testingvalue")); 
    }) 

    }) 
    $(document).ready(function(){ 
    var res = {}; 
    try { 
    console.log('existed'); 
     res = JSON.parse(localStorage.getItem("testingvalue")); 

    //alert(res.r1[2]); 
    document.getElementsByClassName("r1")[0].selectedIndex=res.r1[0]; 
    document.getElementsByClassName("r1")[1].selectedIndex=res.r1[1]; 
    document.getElementsByClassName("r1")[2].selectedIndex=res.r1[2]; 
    document.getElementsByClassName("r1")[3].selectedIndex=res.r1[3]; 

    document.getElementsByClassName("r2")[0].selectedIndex=res.r2[0]; 
    document.getElementsByClassName("r2")[1].selectedIndex=res.r2[1]; 
    document.getElementsByClassName("r2")[2].selectedIndex=res.r2[2]; 
    document.getElementsByClassName("r2")[3].selectedIndex=res.r2[3]; 

    document.getElementsByClassName("r3")[0].selectedIndex=res.r3[0]; 
    document.getElementsByClassName("r3")[1].selectedIndex=res.r3[1]; 
    document.getElementsByClassName("r3")[2].selectedIndex=res.r3[2]; 
    document.getElementsByClassName("r3")[3].selectedIndex=res.r3[3]; 

    document.getElementsByClassName("r4")[0].selectedIndex=res.r4[0]; 
    document.getElementsByClassName("r4")[1].selectedIndex=res.r4[1]; 
    document.getElementsByClassName("r4")[2].selectedIndex=res.r4[2]; 
    document.getElementsByClassName("r4")[3].selectedIndex=res.r4[3]; 

    document.getElementsByClassName("r5")[0].selectedIndex=res.r5[0]; 
    document.getElementsByClassName("r5")[1].selectedIndex=res.r5[1]; 
    document.getElementsByClassName("r5")[2].selectedIndex=res.r5[2]; 
    document.getElementsByClassName("r5")[3].selectedIndex=res.r5[3]; 

    document.getElementsByClassName("r6")[0].selectedIndex=res.r6[0]; 
    document.getElementsByClassName("r6")[1].selectedIndex=res.r6[1]; 
    document.getElementsByClassName("r6")[2].selectedIndex=res.r6[2]; 
    document.getElementsByClassName("r6")[3].selectedIndex=res.r6[3]; 

    document.getElementsByClassName("r7")[0].selectedIndex=res.r7[0]; 
    document.getElementsByClassName("r7")[1].selectedIndex=res.r7[1]; 
    document.getElementsByClassName("r7")[2].selectedIndex=res.r7[2]; 
    document.getElementsByClassName("r7")[3].selectedIndex=res.r7[3]; 

    document.getElementsByClassName("r8")[0].selectedIndex=res.r8[0]; 
    document.getElementsByClassName("r8")[1].selectedIndex=res.r8[1]; 
    document.getElementsByClassName("r8")[2].selectedIndex=res.r8[2]; 
    document.getElementsByClassName("r8")[3].selectedIndex=res.r8[3]; 

    document.getElementsByClassName("r9")[0].selectedIndex=res.r9[0]; 
    document.getElementsByClassName("r9")[1].selectedIndex=res.r9[1]; 
    document.getElementsByClassName("r9")[2].selectedIndex=res.r9[2]; 
    document.getElementsByClassName("r9")[3].selectedIndex=res.r9[3]; 

    document.getElementsByClassName("r10")[0].selectedIndex=res.r10[0]; 
    document.getElementsByClassName("r10")[1].selectedIndex=res.r10[1]; 
    document.getElementsByClassName("r10")[2].selectedIndex=res.r10[2]; 
    document.getElementsByClassName("r10")[3].selectedIndex=res.r10[3]; 

    } 

    catch (error){ 
     console.log(error.message); 
    } 


}); 

Answer 1

望着這重複行：

document.getElementsByClassName("r1")[0].selectedIndex=res.r1[0]; 

...一個簡單的第一遍的改進是隻使用嵌套循環for用變量代替"r1"和0：

for (var r = 1; r <= 10; r++) { 
    for (var i = 0; i < 4; i++) { 
    document.getElementsByClassName("r" + r)[i].selectedIndex = res["r" + r][i]; 
    } 
} 

否蒂斯，雖然，這意味着.getElementsByClassName("r" + r)調用發生四個時間爲r每個值，這是不是很高效 - 這將是更好的以移動到外循環：

var els; 
for (var r = 1; r <= 10; r++) { 
    els = document.getElementsByClassName("r" + r); 
    for (var i = 0; i < 4; i++) { 
    els[i].selectedIndex = res["r" + r][i]; 
    } 
} 

在第二個版本內循環可能會說i < els.length而不是i < 4，但請注意，無論哪種方式，您都需要確保將HTML元素的數量與res對象中的項目數匹配。下面

Answer 2

代碼將工作，無論你的數據的大小存儲：

res = JSON.parse(localStorage.getItem("testingvalue")); 
    // Let's start with checking 'res' type. 
    // - if it's an Array, get the the length from .length 
    // - if it's Object, get the the length from Object.keys().length 
    var resLength = Array.isArray(res) ? res.length : typeof res === 'object' ? Object.keys(res).length : 0; 
    // loop throw the rows. 
    for (var i = 0; i < resLength; i++) { 
    // Do the same as above: get type of the row and calculate it length for the loop. 
    var rowLength = Array.isArray(res[i]) ? res.length : typeof res[i] === 'object' ? Object.keys(res[i]).length : 0; 
    // loop throw the columns on the row. 
    for (var j = 0; j < rowLength; j++) { 
     document.getElementsByClassName('r'+i)[j].selectedIndex=res['r'+i][j]; 
    } 
} 

Answer 3

您已經似乎jQuery庫加載。使用jQuery使這更容易。

下面是一個例子：

var res = JSON.parse(localStorage.getItem("testingvalue")); 
$("tr select").each(function(){ 
    $(this).val(res[$(this).attr("class")][$(this).index()]); 
}); 

當然，如果select元素只有一個類名和res對象包含所有select元素都在裏面tr元素的值，這隻會工作。基於你的問題似乎是這種情況下的jQuery代碼。

這是一個更安全的方法

Object.keys(res).forEach(function(key){ 
    res[key].forEach(function(val, index){ 
     $("tr select." + key).eq(index).val(val); 
    }); 
});