使用数组缩短我的 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 = {
	branch_name1: 'some data 1'	, 
	branch_name2: 'some data 2'	, 
	branch_name3: 'some data 3'	, 
	// etc...
}
var myData = {}; 
for (var i = 1; i < Object.keys(allBranches).length; i++){
	myData['$msB' + i] = allBranches['branch_name' + i];
}

Answer 2

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

第一部分的一个例子是：

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


var finalStatement = 
	declareVars('$msB', 1, 50, 'branch_name', 1) + 
	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”的安全漏洞的影响——使用匿名函数来隐藏你的作用域和其他人。