如何在Javascript中将输入值与数组名称进行比较

Question

我正在考虑创建一个主题随机化器，通过菜单下拉的类别。每个类别都有一个关联的项目数组。例如，我有一个充满哺乳动物的数组，如果用户从下拉列表中选择Mammal，他们就会从哺乳动物数组中随机获得一种哺乳动物。

我可以用一堆if语句来做这件事，检查一个值是否为哺乳动物，使用哺乳动物数组。问题是会有很多类别/数组。所以我试图找到一种方法来获取值，然后获取具有相同名称的数组。

下面是使用if语句的工作代码：

<form class="firstItem">
        <select name="firstName" id="firstName">
            <option value="animals">---Animals---</option>
            <option value="mammals">Mammals</option>
            <option value="insects">Insects</option>
            <option value="birds">Birds</option>
            <option value="reptiles">Reptiles</option>
            <option value="fish">Fish/Aquatic</option>
            <option value="prehistoric">Prehistoric</option>
        </select>
    </form>
    <button class="button" id="submitBtn" onclick="submit()">Submit</button>

    <div class="results">
        <p id="resultsp"></p>
    </div>

<script>
    var mammals = ["Cow", "Horse", "Pig", "Donkey", "Elephant"];

    var insects = ["Weevil", "Hercules Beetle", "Ladybug", "Tarantula", "Moth"];

    function submit() {
        var firstName = document.getElementById("firstName");
        var firstTemp = firstName.value;
        var whatVar;

        if (firstTemp == "mammals") {
            whatVar = mammals.slice(0);
        } else if (firstTemp == "insects") {
            whatVar = insects.slice(0);
        } 
        random_items(whatVar);

        var resultsp = document.getElementById("resultsp");
        resultsp.innerText = random_items(whatVar);

        function random_items(firstName)
        {
            return whatVar[Math.floor(Math.random()*whatVar.length)];
        }
    }
</script>

我想将所有的if语句替换为，无论firstName的值是什么，都可以获取该变量。

我尝试将所有的if语句替换为：

var whatVar = firstTemp; 

但由于firstTemp是一个值，它将其视为字符串，因此如果选择了哺乳动物，它将输出单词“哺乳动物”中的一个字母，而不是哺乳动物数组中的一项。

我是不是以一种完全错误的方式来做这件事？

Answer 1

试着做你想做的事情。使用eval()函数很容易。我想这对你很有效！

<form class="firstItem">
      <select name="firstName" id="firstName">
        <option value="animals">---Animals---</option>
        <option value="mammals">Mammals</option>
        <option value="insects">Insects</option>
        <option value="birds">Birds</option>
        <option value="reptiles">Reptiles</option>
        <option value="fish">Fish/Aquatic</option>
        <option value="prehistoric">Prehistoric</option>
      </select>
    </form>
    <button class="button" id="submitBtn" onclick="submit()">Submit</button>

    <div class="results">
      <p id="resultsp"></p>
    </div>

    <script>
      var mammals = ["Cow", "Horse", "Pig", "Donkey", "Elephant"];

      var insects = ["Weevil", "Hercules Beetle", "Ladybug", "Tarantula", "Moth"];

      function submit() {
        var firstName = document.getElementById("firstName");
        var firstTemp = firstName.value;
        var whatVar = eval(firstTemp).slice(0);

        random_items(whatVar);

        var resultsp = document.getElementById("resultsp");
        resultsp.innerText = random_items(whatVar);

        function random_items(firstName) {
          return firstName[Math.floor(Math.random() * whatVar.length)];
        }
      }
</script>

只需在要将字符串转换为变量的位置添加此行

eval(firstTemp).slice(0);