Javascript 将类似的变量重构为 for 循环

Question

我正在尝试简化代码，其中我定义了很多具有相似结构的变量。即：

要简化：

var monthActual = document.createElement('input');
monthActual.name = "monthActual_" + showrooms[i];
monthActual.value = monthActualData;
fullForm.appendChild(monthActual);

var monthTarget = document.createElement('input');
monthTarget.name = "monthTarget_" + showrooms[i];
monthTarget.value = monthTargetData;
fullForm.appendChild(monthTarget);

var priorYear = document.createElement('input');
priorYear.name = "priorYear_" + showrooms[i];
priorYear.value = priorYearData;
fullForm.appendChild(priorYear);

var priorYearToDate = document.createElement('input');
priorYearToDate.name = "priorYearToDate_" + showrooms[i];
priorYearToDate.value = priorYearToDateData;
fullForm.appendChild(priorYearToDate);

var yearToDateTarget = document.createElement('input');
yearToDateTarget.name = "yearToDateTarget_" + showrooms[i];
yearToDateTarget.value = yearToDateTargetData;
fullForm.appendChild(yearToDateTarget);

var yearToDateActual = document.createElement('input');
yearToDateActual.name = "yearToDateActual_" + showrooms[i];
yearToDateActual.value = yearToDateActualData;
fullForm.appendChild(yearToDateActual);

var YTDVsPYTDSalesCurrency = document.createElement('input');
YTDVsPYTDSalesCurrency.name = "YTDVsPYTDSalesCurrency_" + showrooms[i];
YTDVsPYTDSalesCurrency.value = YTDVsPYTDSalesCurrencyData;
fullForm.appendChild(YTDVsPYTDSalesCurrency);

var YTDVsPYTDSalesinPercent = document.createElement('input');
YTDVsPYTDSalesinPercent.name = "YTDVsPYTDSalesinPercent_" + showrooms[i];
YTDVsPYTDSalesinPercent.value = YTDVsPYTDSalesinPercentData;
fullForm.appendChild(YTDVsPYTDSalesinPercent);

var YTDVsYTDTargetinSalesCurrency = document.createElement('input');
YTDVsYTDTargetinSalesCurrency.name = "YTDVsYTDTargetinSalesCurrency_" + showrooms[i];
YTDVsYTDTargetinSalesCurrency.value = YTDVsYTDTargetinSalesCurrencyData;
fullForm.appendChild(YTDVsYTDTargetinSalesCurrency);

var YTDVsYTDTargetinPercent = document.createElement('input');
YTDVsYTDTargetinPercent.name = "YTDVsYTDTargetinPercent_" + showrooms[i];
YTDVsYTDTargetinPercent.value = YTDVsYTDTargetinPercentData;
fullForm.appendChild(YTDVsYTDTargetinPercent);

我试图通过将变量放入数组然后像这样遍历它们来简化它：

已尝试简化：

var tableColumnData = ['monthActual', 'monthTarget', 'priorYear', 'priorYearToDate', 'yearToDateTarget',
    'yearToDateActual', 'YTDVsPYTDSalesCurrency', 'YTDVsPYTDSalesinPercent', 'YTDVsYTDTargetinSalesCurrency', 'YTDVsYTDTargetinPercent'];

for(var j=0; j<tableColumnData.length; j++){
    var temp = document.createElement('input');
    temp.name = tableColumnData[j]+ "_" + showrooms[i];
    temp.value = (tableColumnData[j] +"Data");
    fullForm.appendChild(temp);
}

然而，当我试图指向同名变量时，这只给我文字字符串的字符串值：tableColumnData[j] +"Data"。我不知道如何使用同名变量。

完整代码：

var fullForm = document.createElement('form');
fullForm.action = '/fpdf/requests/print_fullreport.php?year=' + requestYear + '&month=' + getMonth(requestMonth);
fullForm.id = 'fullForm';
fullForm.target = '_blank';
fullForm.method = 'post';

var showrooms = [1, 3, 4, 24, 27, 29, 34, 36, 37, 8, 21, 25, 26, 28, 31, 33, -1];

for (var i = 0; i <showrooms.length; i++){
    var showroomData = allTargetsData.monthlyDetail[showrooms[i]];

    var currencyData = showroomData.currency;
    var showroomname = showroomData.showroom_name;

    var monthActualData = showroomData.total;
    var monthTargetData = Math.round(allTargetsData.originalTarget[requestYear][showrooms[i]][requestMonth]['amount']);
    var priorYearData = allTargetsData.realFigure[requestYear - 1][showrooms[i]]['figures'][requestMonth];
    var priorYearToDateData = showroomData.ly_ytd;
    var yearToDateTargetData = Math.round(showroomData.ytd_target);
    var yearToDateActualData = showroomData.ytd;

    var calculation1 = (showroomData.ytd - showroomData.ly_ytd).toFixed(2);
    var YTDVsPYTDSalesCurrencyData = calculation1;
    var calculation2 = (parseFloat(showroomData.ytd - showroomData.ly_ytd)/showroomData.ly_ytd).toFixed(2);
    var YTDVsPYTDSalesinPercentData = (calculation2*100);
    if (isNaN(YTDVsPYTDSalesinPercentData) || YTDVsPYTDSalesinPercentData == "Infinity"){
        YTDVsPYTDSalesinPercentData = 0;
    }
    var calculation3 = (showroomData.ytd - showroomData.ytd_target).toFixed(2);
    var YTDVsYTDTargetinSalesCurrencyData = (calculation3*100)/100;
    var calculation4 = (parseFloat(showroomData.ytd - showroomData.ytd_target)/parseFloat(showroomData.ytd_target)).toFixed(2);
    var YTDVsYTDTargetinPercentData = calculation4*100;
    if (isNaN(YTDVsYTDTargetinPercentData) || YTDVsYTDTargetinPercentData == "Infinity"){
        YTDVsYTDTargetinPercentData = 0;
    }


    var showroomCurrency = document.createElement('input');
    showroomCurrency.name = "showroomCurrency_" + showrooms[i];
    showroomCurrency.value = currencyData;
    fullForm.appendChild(showroomCurrency);

    var showroomNameField = document.createElement('input');
    showroomNameField.name = "showroomname_" + showrooms[i];
    showroomNameField.value = showroomname;
    fullForm.appendChild(showroomNameField);

    var tableColumnData = ['monthActual', 'monthTarget', 'priorYear', 'priorYearToDate', 'yearToDateTarget',
        'yearToDateActual', 'YTDVsPYTDSalesCurrency', 'YTDVsPYTDSalesinPercent', 'YTDVsYTDTargetinSalesCurrency', 'YTDVsYTDTargetinPercent'];

    for(var j=0; j<tableColumnData.length; j++){
        var temp = document.createElement('input');
        temp.name = tableColumnData[j]+ "_" + showrooms[i];
        temp.value = (tableColumnData[j] +"Data");
        fullForm.appendChild(temp);
    }
 }

Answer 1

你真的很接近，但只需要采取下一步。您需要将变量存储在数组或对象中，以便您可以动态引用它们，而不是通过文字。

在这个例子中，我使用了您的代码并将所有额外数据放入 otherData 对象中。这允许您为它们提供人类可读的名称，而且还能够使用方括号表示法来查找属性。即 otherData.monthActualData == otherData["monthActualData"].

无法保证我是否完美地做到了这一点，但概念仍然存在。

var fullForm = document.createElement('form');
fullForm.action = '/fpdf/requests/print_fullreport.php?year=' + requestYear + '&month=' + getMonth(requestMonth);
fullForm.id = 'fullForm';
fullForm.target = '_blank';
fullForm.method = 'post';

var showrooms = [1, 3, 4, 24, 27, 29, 34, 36, 37, 8, 21, 25, 26, 28, 31, 33, -1];

for (var i = 0; i <showrooms.length; i++){
    var showroomData = allTargetsData.monthlyDetail[showrooms[i]];

    var currencyData = showroomData.currency;
    var showroomname = showroomData.showroom_name;


    var otherData = {};
    
    otherData.monthActualData = showroomData.total;
    
    otherData.monthTargetData = Math.round(allTargetsData.originalTarget[requestYear][showrooms[i]][requestMonth]['amount']);
    
    otherData.priorYearData = allTargetsData.realFigure[requestYear - 1][showrooms[i]]['figures'][requestMonth];
    
    otherData.priorYearToDateData = showroomData.ly_ytd;
    
    otherData.yearToDateTargetData = Math.round(showroomData.ytd_target);
    
    otherData.yearToDateActualData = showroomData.ytd;

    var calculation1 = (showroomData.ytd - showroomData.ly_ytd).toFixed(2);
    
    otherData.YTDVsPYTDSalesCurrencyData = calculation1;
    
    var calculation2 = (parseFloat(showroomData.ytd - showroomData.ly_ytd)/showroomData.ly_ytd).toFixed(2);
    
    otherData.YTDVsPYTDSalesinPercentData = (calculation2*100);
    
    if (isNaN(otherData.YTDVsPYTDSalesinPercentData) || otherData.YTDVsPYTDSalesinPercentData == "Infinity"){
        otherData.YTDVsPYTDSalesinPercentData = 0;
    }
    
    var calculation3 = (showroomData.ytd - showroomData.ytd_target).toFixed(2);
    
    otherData.YTDVsYTDTargetinSalesCurrencyData = (calculation3*100)/100;
    
    var calculation4 = (parseFloat(showroomData.ytd - showroomData.ytd_target)/parseFloat(showroomData.ytd_target)).toFixed(2);
    
    otherData.YTDVsYTDTargetinPercentData = calculation4*100;
    
    if (isNaN(otherData.YTDVsYTDTargetinPercentData) || otherData.YTDVsYTDTargetinPercentData == "Infinity"){
        otherData.YTDVsYTDTargetinPercentData = 0;
    }


    var showroomCurrency = document.createElement('input');
    showroomCurrency.name = "showroomCurrency_" + showrooms[i];
    showroomCurrency.value = currencyData;
    fullForm.appendChild(showroomCurrency);

    var showroomNameField = document.createElement('input');
    showroomNameField.name = "showroomname_" + showrooms[i];
    showroomNameField.value = showroomname;
    fullForm.appendChild(showroomNameField);

    var tableColumnData = ['monthActual', 'monthTarget', 'priorYear', 'priorYearToDate', 'yearToDateTarget',
        'yearToDateActual', 'YTDVsPYTDSalesCurrency', 'YTDVsPYTDSalesinPercent', 'YTDVsYTDTargetinSalesCurrency', 'YTDVsYTDTargetinPercent'];

    for(var j=0; j<tableColumnData.length; j++){
        var temp = document.createElement('input');
        temp.name = tableColumnData[j]+ "_" + showrooms[i];
        temp.value = otherData[tableColumnData[j] +"Data"];
        fullForm.appendChild(temp);
    }
 }

Javascript 将类似的变量重构为 for 循环

Javascript refactoring similar variables into a forloop

javascript

variables

pass-by-reference