javascript - 将字符串传递给函数但需要一个数组

Question

我有一个选择下拉列表，在更改时我希望它运行一个函数并将选择的值传递给该函数。但是，该函数需要一个包含数组的变量，而传入的是一个字符串(选择的值)。

您可以在下面的代码中看到它工作(或不工作)。所选值应代表其对应的变量。

我怎样才能做到这一点？

var str = ["Paul", "John", "Melissa", "Mike"];
var int = [8, 4, 55, 7];
var mix = ["Paul", 9, "John", 5, "Melissa", 67, "Mike", 2];

var main = document.querySelector('#main');
var sel = document.querySelector('select');


function testFunc(arr){
  arr.forEach((i) => {
    var p = document.createElement('p');
    p.innerHTML = i;
    main.appendChild(p);
  });
}

testFunc(mix);

sel.addEventListener('change', testFunc(sel.value));

<select>
  <option value="str">String</option>
  <option value="int">Integer</option>
  <option value="mix">Mixed</option>
</select>

<div id="main"></div>

编辑:

我应该注意到数据数组是动态传入的，我真的很想避免操纵它们，以免在未来的编辑中造成额外的代码和困惑。

Answer 1

您的代码中有两个问题:

1. 在事件处理函数中，通过在函数后面指定括号，您将在页面加载时调用该函数。只需在函数体内调用函数即可。这将使该函数仅在事件触发时被调用。

2. sel.value 是一个字符串，但该函数需要一个数组。要动态评估数组，请将 testFunc(mix) 更改为 testFunc('mix')(用引号将参数值括起来)并使用 window 对象喜欢:

   arr = window[arr]
   

替换:

sel.addEventListener('change', testFunc(sel.value));

与

sel.addEventListener('change', function (){testFunc([sel.value])});

var str = ["Paul", "John", "Melissa", "Mike"];
var int = [8, 4, 55, 7];
var mix = ["Paul", 9, "John", 5, "Melissa", 67, "Mike", 2];

var main = document.querySelector('#main');
var sel = document.querySelector('select');


function testFunc(arr){
  arr = window[arr]
  arr.forEach((i) => {
    var p = document.createElement('p');
    p.innerHTML = i;
    main.appendChild(p);
  });
}

testFunc('mix');

sel.addEventListener('change', function (){testFunc(sel.value)});

<select>
  <option value="str">String</option>
  <option value="int">Integer</option>
  <option value="mix">Mixed</option>
</select>

<div id="main"></div>