使用数组缩短我的jQuery代码？

Question

我有这个脚本（修改devbridge自动完成脚本）工作正常，但它有一个可笑的长代码，看起来很丑，我不是一个专业的程序员，所以请忍受我，我希望能以某种方式，我可以做到这一点更短的使用数组，但我不知道如何实现即时通讯甚至不知道如果数组是解决方案要么大声笑。在我的脚本中，我从2个变量中获取2个值，$ msB变量被分配给分支名称，后面跟着一个数字，$ msT分支电话号码，当然它的后面跟着一个数字。所以如果它的branch1应该是$ msB1和$ msT1and。这里是我的代码：

<script> 
$msB1 = branch_name1; 
$msB2 = branch_name2; 
$msB3 = branch_name3; 
$msB4 = branch_name4; 
$msB5 = branch_name5; 
$msB6 = branch_name6; 
$msB7 = branch_name7; 
$msB8 = branch_name8; 
$msB9 = branch_name9; 
$msB10 = branch_name10; 
$msB11 = branch_name11; 
$msB12 = branch_name12; 
$msB13 = branch_name13; 
$msB14 = branch_name14; 
$msB15 = branch_name15; 
$msB16 = branch_name16; 
$msB17 = branch_name17; 
$msB18 = branch_name18; 
$msB19 = branch_name19; 
$msB20 = branch_name20; 
$msB21 = branch_name21; 
$msB22 = branch_name22; 
$msB23 = branch_name23; 
$msB24 = branch_name24; 
$msB25 = branch_name25; 
$msB26 = branch_name26; 
$msB27 = branch_name27; 
$msB28 = branch_name28; 
$msB29 = branch_name29; 
$msB30 = branch_name30; 
$msB31 = branch_name31; 
$msB32 = branch_name32; 
$msB33 = branch_name33; 
$msB34 = branch_name34; 
$msB35 = branch_name35; 
$msB36 = branch_name36; 
$msB37 = branch_name37; 
$msB38 = branch_name38; 
$msB39 = branch_name39; 
$msB40 = branch_name40; 
$msB41 = branch_name41; 
$msB42 = branch_name42; 
$msB43 = branch_name43; 
$msB44 = branch_name44; 
$msB45 = branch_name45; 
$msB46 = branch_name46; 
$msB47 = branch_name47; 
$msB48 = branch_name48; 
$msB49 = branch_name49; 
$msB50 = branch_name50; 
$msT1 = branch_tel1; 
$msT2 = branch_tel2; 
$msT3 = branch_tel3; 
$msT4 = branch_tel4; 
$msT5 = branch_tel5; 
$msT6 = branch_tel6; 
$msT7 = branch_tel7; 
$msT8 = branch_tel8; 
$msT9 = branch_tel9; 
$msT10 = branch_tel10; 
$msT11 = branch_tel11; 
$msT12 = branch_tel12; 
$msT13 = branch_tel13; 
$msT14 = branch_tel14; 
$msT15 = branch_tel15; 
$msT16 = branch_tel16; 
$msT17 = branch_tel17; 
$msT18 = branch_tel18; 
$msT19 = branch_tel19; 
$msT20 = branch_tel20; 
$msT21 = branch_tel21; 
$msT22 = branch_tel22; 
$msT23 = branch_tel23; 
$msT24 = branch_tel24; 
$msT25 = branch_tel25; 
$msT26 = branch_tel26; 
$msT27 = branch_tel27; 
$msT28 = branch_tel28; 
$msT29 = branch_tel29; 
$msT30 = branch_tel30; 
$msT31 = branch_tel31; 
$msT32 = branch_tel32; 
$msT33 = branch_tel33; 
$msT34 = branch_tel34; 
$msT35 = branch_tel35; 
$msT36 = branch_tel36; 
$msT37 = branch_tel37; 
$msT38 = branch_tel38; 
$msT39 = branch_tel39; 
$msT40 = branch_tel40; 
$msT41 = branch_tel41; 
$msT42 = branch_tel42; 
$msT43 = branch_tel43; 
$msT44 = branch_tel44; 
$msT45 = branch_tel45; 
$msT46 = branch_tel46; 
$msT47 = branch_tel47; 
$msT48 = branch_tel48; 
$msT49 = branch_tel49; 
$msT50 = branch_tel50; 

$(function(){ 
    var areas = [ 
    { value: '".$msB1."', data: '".$msT1."' }, 
{ value: '".$msB2."', data: '".$msT2."' }, 
{ value: '".$msB3."', data: '".$msT3."' }, 
{ value: '".$msB4."', data: '".$msT4."' }, 
{ value: '".$msB5."', data: '".$msT5."' }, 
{ value: '".$msB6."', data: '".$msT6."' }, 
{ value: '".$msB7."', data: '".$msT7."' }, 
{ value: '".$msB8."', data: '".$msT8."' }, 
{ value: '".$msB9."', data: '".$msT9."' }, 
{ value: '".$msB10."', data: '".$msT10."' }, 
{ value: '".$msB11."', data: '".$msT11."' }, 
{ value: '".$msB12."', data: '".$msT12."' }, 
{ value: '".$msB13."', data: '".$msT13."' }, 
{ value: '".$msB14."', data: '".$msT14."' }, 
{ value: '".$msB15."', data: '".$msT15."' }, 
{ value: '".$msB16."', data: '".$msT16."' }, 
{ value: '".$msB17."', data: '".$msT17."' }, 
{ value: '".$msB18."', data: '".$msT18."' }, 
{ value: '".$msB19."', data: '".$msT19."' }, 
{ value: '".$msB20."', data: '".$msT20."' }, 
{ value: '".$msB21."', data: '".$msT21."' }, 
{ value: '".$msB22."', data: '".$msT22."' }, 
{ value: '".$msB23."', data: '".$msT23."' }, 
{ value: '".$msB24."', data: '".$msT24."' }, 
{ value: '".$msB25."', data: '".$msT25."' }, 
{ value: '".$msB26."', data: '".$msT26."' }, 
{ value: '".$msB27."', data: '".$msT27."' }, 
{ value: '".$msB28."', data: '".$msT28."' }, 
{ value: '".$msB29."', data: '".$msT29."' }, 
{ value: '".$msB30."', data: '".$msT30."' }, 
{ value: '".$msB31."', data: '".$msT31."' }, 
{ value: '".$msB32."', data: '".$msT32."' }, 
{ value: '".$msB33."', data: '".$msT33."' }, 
{ value: '".$msB34."', data: '".$msT34."' }, 
{ value: '".$msB35."', data: '".$msT35."' }, 
{ value: '".$msB36."', data: '".$msT36."' }, 
{ value: '".$msB37."', data: '".$msT37."' }, 
{ value: '".$msB38."', data: '".$msT38."' }, 
{ value: '".$msB39."', data: '".$msT39."' }, 
{ value: '".$msB40."', data: '".$msT40."' }, 
{ value: '".$msB41."', data: '".$msT41."' }, 
{ value: '".$msB42."', data: '".$msT42."' }, 
{ value: '".$msB43."', data: '".$msT43."' }, 
{ value: '".$msB44."', data: '".$msT44."' }, 
{ value: '".$msB45."', data: '".$msT45."' }, 
{ value: '".$msB46."', data: '".$msT46."' }, 
{ value: '".$msB47."', data: '".$msT47."' }, 
{ value: '".$msB48."', data: '".$msT48."' }, 
{ value: '".$msB49."', data: '".$msT49."' }, 
{ value: '".$msB50."', data: '".$msT50."' },  
    ]; 

    $('#autocomplete.autocomplete({ 
    lookup: areas, 
    onSelect: function (suggestion) {    
     var thehtml = '<a href=\"tel:+63'+ suggestion.data +'\">' + suggestion.data + '</a><div>' + suggestion.value + ' branch found</div>'; 
     $('#outputcontent.html(thehtml); 
    } 
    }); 

}); 
</script> 

并输出上面的脚本这是代码

<div id="searchfield"> 
     <form><input type="text" name="areas" class="biginput" id="autocomplete"></form> 
     </div>  
    <div> 
     <p id="outputcontent"> 
     </p>   
    </div> 

再次脚本工作，我只是想找到一种方法之间的差异后，使脚本更短变量只是数字

我希望我已经解释得很好，并且我希望有人能帮助我，以及：d

非常感谢

Answer 1

你真的在问什么，你可以动态地创建变量。 幸运的答案是肯定的:)

一个可能的解决方案是使用“eval”，但它有一长串缺点。 我会建议，尝试更改您的代码结构以将所有变量保存为JSON对象中的键。创建对象键动态是很简单的，而且就这么简单：

allBranches = { 
 
\t branch_name1: 'some data 1' \t , 
 
\t branch_name2: 'some data 2' \t , 
 
\t branch_name3: 'some data 3' \t , 
 
\t // etc... 
 
} 
 
var myData = {}; 
 
for (var i = 1; i < Object.keys(allBranches).length; i++){ 
 
\t myData['$msB' + i] = allBranches['branch_name' + i]; 
 
}

Answer 2

嗯，我可以想到一个可能的想法，虽然不是最安全的一个是使用函数将您的代码生成为字符串，然后对其进行评估（使用“eval”）。

对于第一部分的例子是：

function declareVars(varPrefix, varStart, varEnd, valuePrefix, valueStart){ 
 
\t var declaration = '', nextVar = ''; 
 
\t for (var i = varStart; i <= varEnd; i++){ 
 
\t \t nextVar = (varPrefix + i + ' = ' + valuePrefix + valueStart + ';\n'); 
 
\t \t valueStart ++; 
 
\t \t declaration += nextVar; 
 
\t } 
 
\t return declaration; 
 
} 
 

 

 
var finalStatement = 
 
\t declareVars('$msB', 1, 50, 'branch_name', 1) + 
 
\t declareVars('$msT', 1, 50, 'branch_tel', 1); 
 

 
console.log(finalStatement); //replace this with: eval(finalStatement)

但请记住，这种方法有很多注意事项，你可以在这里阅读更多：

Why is using the JavaScript eval function a bad idea?

Is Javascript eval() so dangerous?

但是，有些方法可以保护自己免受“eval”的安全漏洞 - 使用匿名函数隐藏范围和其他内容。