for循环中的动态变量名称

Question

我正在使用需要从Cookie提取的值填充的表单。 表单元素的ID与Cookie名称相对应：

<label>ABC: </label>
<input type="text" id="ABC" />
<br />

<label>DEF: </label>
<input type="text" id="DEF" />
<br />

<label>GHI: </label>
<input type="text" id="GHI" />
<br />

<label>JKL: </label>
<input type="text" id="JKL" />
<br />

最初，我只是编写了一个单独的代码段来获取每种表单的Cookie值：

  var ABCdata = getCookie("ABC");
  var ABCfield = document.getElementById('ABC');
  ABCfield.value = ABCdata; 

  var DEFdata = getCookie("DEF");
  var DEFfield = document.getElementById('DEF');
  DEFfield.value = DEFdata;

  var GHIdata = getCookie("GHI");
  var GHIfield = document.getElementById('GHI');
  GHIfield.value = GHIdata;

  var JKLdata = getCookie("JKL");
  var JKLfield = document.getElementById('JKL');
  JKLfield.value = JKLdata; 

但是后来我想到了将其重写为数组和循环：

var cookienames = new Array();

cookienames[0] = "ABC";
cookienames[1] = "DEF";
cookienames[2] = "GHI";
cookienames[3] = "JKL";

for (var i=0; i<cookienames.length; i++) {
var cookienames[i]+"data" = getCookie(cookienames[i]);
var cookienames[i]+"field" = document.getElementById(cookienames[i]);
cookienames[i]+"field".value = cookienames[i]+"data";
}

不知何故，数组解决方案不起作用：表单字段中没有填充数据。 我怀疑，动态变量名称应受谴责。

处理此问题的正确方法是什么？

Answer 1

您是否尝试过这个：

document.getElementById(cookienames[i]).value = getCookie(cookienames[i]);

Answer 2

无需在循环内使用其他变量。 简单尝试

var cookienames = ["ABC", "DEF", "GHI", "JKL"],
    field,
    data, 
    cn;

for (var i = 0, cl = cookienames.length; i < cl; i++) {
   cn = cookienames[i];                  // get cookie name
   data = getCookie(cn);                 // read cookie value
   field = document.getElementById(cn);  // retrieve field
   field.value = data;                   // set field value
}

（作为一个旁注，事先缓存数组的长度是一个好习惯）

Answer 3

您不能以这种方式使用var关键字动态地“创建”变量。

但是，由于每个全局变量都是window一个属性，因此您可以这样做：

window[cookienames[i]+"data"] = getCookie(cookienames[i]);

Answer 4

不知道为什么要使用中间变量，这应该工作

var cookienames = new Array();

cookienames[0] = "ABC";
cookienames[1] = "DEF";
cookienames[2] = "GHI";
cookienames[3] = "JKL";

for (var i=0; i<cookienames.length; i++) {
  var data = getCookie(cookienames[i]);
  document.getElementById(cookienames[i]).value = data;
}