Question

我在javascript中有数组：arrayOne，arrayTwo，arrayThree，arrayFour ...每个数据中包含可变数量的数据

现在用户在输入框One / Two / Three ...和数组索引中输入。

例如，如果用户将One和3作为输入插入，我的任务就是从arrayOne[3]

返回值

我无法从数组中检索数据。我的代码返回字符串＆＃34; arrayOne＆＃34;中的第3个字母。即。＆＃34;＆＃34 ;.

a= arrayOne
Index= 3
a[index] : a

如何检索arrayOne [3]数据？

＆＃13;

var arrayOne = ['mango', 'banana', 'pine', 'orange'];
var arrayTwo = ['adobe', 'microsoft', 'apple', 'yahoo'];
var arrayThree = ['england', 'china', 'nepal', 'japan', 'usa', 'india'];
// suppose i have many more arrayFour,arrayFive,....,arrayFifty

function fun() {
  var index = document.getElementById('index').value;
  var name = document.getElementById('name').value;
  var a = 'array' + name;
  var b = a[index];
  document.getElementById('para').innerHTML = b;
  document.getElementById('para3').innerHTML = index;
  document.getElementById('para2').innerHTML = a;
}

＆＃13;

p {
  border: 1px dotted black;
}

＆＃13;

<!-- Try with One and 3 -->
Choose one,two,three,..,fifty:<br>
<input type='text' id='name'><br> Choose index:<br>
<input type='number' id='index'><br>
<input type='button' onclick='fun();' value='Go'>

<p>a=
  <span id='para2'></span>
</p>
<p>Index=
  <span id='para3'></span>
</p>
<p>
  a[index] :
  <span id='para'></span>
</p>

＆＃13;

我在http://jsfiddle.net/wh0q21bL/

上创建了Fiddle中的HTML，Js，Css

Answer 1

快速解决方法是使用eval()，我不是它的忠实粉丝。

  var b = eval(a)[index];

注意：输入首字母大写的数组名称，如One。

var arrayOne = ['mango', 'banana', 'pine', 'orange'];
var arrayTwo = ['adobe', 'microsoft', 'apple', 'yahoo'];
var arrayThree = ['england', 'china', 'nepal', 'japan', 'usa', 'india'];

function fun() {
  var index = document.getElementById('index').value;
  var name = document.getElementById('name').value;
  var a = 'array' + name;
  var b = eval(a)[index];
  document.getElementById('para').innerHTML = b;
  document.getElementById('para3').innerHTML = index;
  document.getElementById('para2').innerHTML = a;
}

p {
  border: 1px dotted black;
}

<!-- Try with One and 3 -->
Choose one,two,three,..,fifty:<br>
<input type='text' id='name'><br> Choose index:<br>
<input type='number' id='index'><br>
<input type='button' onclick='fun();' value='Go'>

<p>a=
  <span id='para2'></span>
</p>
<p>Index=
  <span id='para3'></span>
</p>
<p>
  a[index] :
  <span id='para'></span>
</p>

更强大的解决方案是将数组存储在对象中：

var arrays = {
  arrayOne : ['mango', 'banana', 'pine', 'orange'],
  arrayTwo : ['adobe', 'microsoft', 'apple', 'yahoo'],
  arrayThree : ['england', 'china', 'nepal', 'japan', 'usa', 'india']
}

...

var b = arrays[a][index];

var arrays = {
	arrayOne : ['mango', 'banana', 'pine', 'orange'],
	arrayTwo : ['adobe', 'microsoft', 'apple', 'yahoo'],
	arrayThree : ['england', 'china', 'nepal', 'japan', 'usa', 'india']
}

function fun() {
  var index = document.getElementById('index').value;
  var name = document.getElementById('name').value;
  var a = 'array' + name;
  var b = arrays[a][index];
  document.getElementById('para').innerHTML = b;
  document.getElementById('para3').innerHTML = index;
  document.getElementById('para2').innerHTML = a;
}

p {
  border: 1px dotted black;
}

<!-- Try with One and 3 -->
Choose one,two,three,..,fifty:<br>
<input type='text' id='name'><br> Choose index:<br>
<input type='number' id='index'><br>
<input type='button' onclick='fun();' value='Go'>

<p>a=
  <span id='para2'></span>
</p>
<p>Index=
  <span id='para3'></span>
</p>
<p>
  a[index] :
  <span id='para'></span>
</p>

Answer 2

要获得预期结果，请对索引和变量进行以下更改

输入的值是字符串，因此使用parseInt
将其更改为整数
var index = parseInt（document.getElementById（'index'）。value）;
变量保存数组名称的字符串格式，因此从窗口对象中获取它，因为它似乎是全局对象的一部分

var arrayOne=['mango','banana','pine'];
var arrayTwo=['adobe','microsoft','apple','yahoo'];
var arrayThree=['england','china','nepal','japan','usa','india'];
// suppose i have many more arrayFour,arrayFive,....,arrayFifty

function fun(){
var index=parseInt(document.getElementById('index').value);
var name=document.getElementById('name').value;
var a=window['array'+name];
console.log(index, a, a[index])
var b=a[index];
document.getElementById('para').innerHTML=b;
document.getElementById('para3').innerHTML=index;
document.getElementById('para2').innerHTML=a;

}

p{
  border:1px dotted black;
}

<!-- Try with One and 3 -->
Choose one,two,three,..,fifty:<br>
<input type='text' id='name'><br>
Choose index:<br>
<input type='number' id='index'><br>
<input type='button' onclick='fun();' value='Go'>

<p>a=
<span id='para2'></span>
</p>
<p>Index=
<span id='para3'></span>
</p>
<p>
a[index] :
<span id='para'></span>
</p>

 var a=window['array'+name];

代码示例 - https://codepen.io/nagasai/pen/qoLevR

Answer 3

编辑：请参阅上面使用window['array'+name]的{{3}}。它比下面的版本更具可扩展性。

原始答案：

改为使用开关案例：

var arrayOne = ['mango', 'banana', 'pine', 'orange'];
var arrayTwo = ['adobe', 'microsoft', 'apple', 'yahoo'];
var arrayThree = ['england', 'china', 'nepal', 'japan', 'usa', 'india'];
// suppose i have many more arrayFour,arrayFive,....,arrayFifty

function fun() {
  var index = document.getElementById('index').value;
  var name = document.getElementById('name').value;
  var a;
  switch (name) {
    case 'one':
      a = arrayOne;
      break;
      
    case 'two':
      a = arrayTwo;
      break;
      
    case 'three':
      a = arrayThree;
      break;
  };
  var b = a[index];
  document.getElementById('para').innerHTML = b;
  document.getElementById('para3').innerHTML = index;
  document.getElementById('para2').innerHTML = a;
}

p {
  border: 1px dotted black;
}

<!-- Try with One and 3 -->
Choose one,two,three,..,fifty:<br>
<input type='text' id='name'><br> Choose index:<br>
<input type='number' id='index'><br>
<input type='button' onclick='fun();' value='Go'>

<p>a=
  <span id='para2'></span>
</p>
<p>Index=
  <span id='para3'></span>
</p>
<p>
  a[index] :
  <span id='para'></span>
</p>

如何从变量名来自用户输入的数组中动态检索数据

3 个答案: