javascript - 仅当项目存在时才定义变量

Question

在本网站上几位好心人的帮助下，我能够获得以下脚本的变体，以根据他们在下拉菜单中所做的选择来填充一些文本字段。基本上，他们从下拉列表中选择位置，然后用他们的地址 (input_19) 以及城市、州和邮政编码 (input_21) 填充文本字段。当将此扩展到多种用途时，我意识到有时套房号需要位于单独的字段中，因此我添加了两个附加变量来分割地址(input_26)和套房号(input_21)。如果没有 input_21，则脚本会失败。有没有办法仅在字段存在时才使用脚本部分？

// JavaScript Document

// Pre populated array of data
var myData1 = new Array();
myData1['Addison'] = '14295 Midway Road, Suite 100';
myData1['Arlington'] = '1241 W. Green Oaks Blvd., Suite 101';
myData1['Colleyville'] = '1210 Hall Johnson Road, Suite 150';
myData1['Fire Wheel'] = '650 Beebalm Lane, Suite 260';
myData1['Flower Mound'] = '3020 Corporate Court, Suite 400';
myData1['Fort Worth'] = '4421 Oak Park Lane, Suite 102';
myData1['Legacy'] = '7500 Dallas Pkwy., Suite 175';
myData1['Mansfield'] = '1405 N. Highway 287, Suite 101';
myData1['McDermott'] = '3915 McDermott Road, Suite 2000';
myData1['Preston Center'] = '8201 Preston Road, Suite 450';
var myData2 = new Array();
myData2['Addison'] = 'Addison, TX 75001';
myData2['Arlington'] = 'Arlington, TX 76013';
myData2['Colleyville'] = 'Colleyville, TX 76034';
myData2['Fire Wheel'] = 'Garland, TX 75040';
myData2['Flower Mound'] = 'Flower Mound, TX 75028';
myData2['Fort Worth'] = 'Fort Worth, TX 76109';
myData2['Legacy'] = 'Plano, TX 750241';
myData2['Mansfield'] = 'Mansfield, TX 76063';
myData2['McDermott'] = 'Plano, TX 75025';
myData2['Preston Center'] = 'Dallas, TX 75225';
var myData3 = new Array();
myData3['Addison'] = 'Suite 100';
myData3['Arlington'] = 'Suite 101';
myData3['Colleyville'] = 'Suite 150';
myData3['Fire Wheel'] = 'Suite 260';
myData3['Flower Mound'] = 'Suite 400';
myData3['Fort Worth'] = 'Suite 102';
myData3['Legacy'] = 'Suite 175';
myData3['Mansfield'] = 'Suite 101';
myData3['McDermott'] = 'Suite 2000';
myData3['Preston Center'] = 'Suite 450';
var myData4 = new Array();
myData4['Addison'] = '14295 Midway Road';
myData4['Arlington'] = '1241 W. Green Oaks Blvd.';
myData4['Colleyville'] = '1210 Hall Johnson Road';
myData4['Fire Wheel'] = '650 Beebalm Lane';
myData4['Flower Mound'] = '3020 Corporate Court';
myData4['Fort Worth'] = '4421 Oak Park Lane';
myData4['Legacy'] = '7500 Dallas Pkwy.';
myData4['Mansfield'] = '1405 N. Highway 287';
myData4['McDermott'] = '3915 McDermott Road';
myData4['Preston Center'] = '8201 Preston Road';




var element = document.querySelector('form.cart');
element.input_1.onchange = updateText;
function updateText() {
var obj_sel = element.input_1;
element.input_19.value = myData1[obj_sel.value];
var obj_sel = element.input_1;
element.input_21.value = myData2[obj_sel.value];
var obj_sel = element.input_1;
element.input_26.value = myData3[obj_sel.value];
var obj_sel = element.input_1;
element.input_31.value = myData4[obj_sel.value];
}

谢谢!

Answer 1

如果该对象不存在，您的脚本将抛出错误，因为您正在尝试将属性分配给未定义。既然你不catch出现该错误时，脚本将在此时停止运行。在尝试设置对象的值之前，您可以使用 if 语句来确认该对象不是未定义。您也不需要每次使用时都重复 var obj_sel = element.input_1;:

function updateText() {
  var obj_sel_value = element.input_1.value;

  if(element.input_19)
    element.input_19.value = myData1[obj_sel_value];
  if(element.input_21)
    element.input_21.value = myData2[obj_sel_value];
  if(element.input_26)
    element.input_26.value = myData3[obj_sel_value];
  if(element.input_31)
    element.input_31.value = myData4[obj_sel_value];
}

这应该可以解决您的问题，但是您还可以采取其他措施来改进代码并在将来节省时间。例如，您可以使用对象数组，而不是为每个 myData 对象使用一个变量。如果您发现自己在变量名称中添加了数字后缀，则这是一个很好的迹象，表明您应该考虑用一个数组替换所有这些变量。

var myData = [];
myData[0] = {};
myData[0]['Addison'] = '14295 Midway Road, Suite 100';
...
myData[0]['Preston Center'] = '8201 Preston Road, Suite 450';
myData[1]['Addison'] = 'Addison, TX 75001';
...
myData[1]['Preston Center'] = 'Dallas, TX 75225';
myData[2] = {};
...
...

另请注意，我用 {} 替换了您的 new Array() 调用。这是有道理的，因为您将它用作对象而不是数组。 Javascript 数组是一个有序集合，通过数字键进行索引。如果您有字符串键，那么您正在使用一个对象，而不是一个数组。对象是(键，值)对的无序集合。