Javascript:使用用户输入搜索数组数组

Question

也许我错误地构建了这段代码(第一次使用 Javascript)，但我想获取用户输入并搜索数组数组以检查是否存在具有该名称的数组。

我首先尝试使用 eval() 函数，有人告诉我它不好，但它在有匹配项时有效，但在匹配项不存在时失败。

该程序的基本前提是有一个包含位置的数组，该数组随后是包含食物的数组。用户输入食物的名称和他们想要放置的位置，它会创建一个食物对象，将该对象插入数组中的正确位置，并将该项目输入到以 html 显示的列表中。

这是目前所有的代码:

var fridge = [];
var freezer = [];
var pantry = [];

var locations = [fridge, freezer, pantry];


function Food(name, location, locationName){
    this.name = name;
    this.location = location;
    this.locationName = locationName;
    this.displayName = function(){
        alert(this.name);
    };
};
function createFood(){
    var name = prompt("Enter the items name:");
    var locationName = prompt("Enter a location to store it:")
    var location = eval(locationName);

    while(locations.indexOf(location) == -1){
        alert("This is not an actual location.");
        locationName = prompt("Please enter another location:");
        location = eval(locationName);
    };

    var x = new Food(name, location, locationName)

    function insertFood(Food){
        var a = locations.indexOf(Food.location);
        locations[a].push(Food);

        var list = document.getElementById(Food.locationName + "_items");
        var li = document.createElement("li");
        li.innerHTML = Food.name;
        list.insertBefore(li, list.lastChild);
    };

    insertFood(x);
};

如果结构有误，请告诉我，因为乍一看这是我的结构想法。

谢谢!

Answer 1

如上所建议，最好使 locations 成为一个对象，这样您就可以有一个指向同名数组的键(字符串)。

    var fridge = [];
    var freezer = [];
    var pantry = [];

    var locations = {
        "fridge":fridge, 
        "freezer":freezer, 
        "pantry":pantry
    };

这样做的好处是您不需要 locationName，因为它从来没有真正发挥作用。您只需要使用 native hasOwnProperty 函数检查 locations 对象是否具有与用户输入同名的属性。像这样的东西:

    if(!locations.hasOwnProperty(userInputLocation)) 
        alert("That is not a designated location");

然后你的 Food 构造函数也变得更简单，只需要 name 和 location 属性:

    function Food(name, location){
        this.name = name;
        this.location = location;
    }

然后您还可以通过名称直接调用任何特定位置(如果您要像在代码中那样全局声明它)，或者更合适(如果您像在 SGD 的代码中那样在对象内部声明数组)通过 locations[location]，其中 location 只是一个包含“freezer”或“pantry”或“fridge”的字符串。您还可以通过 locations[someFood.location] 调用数组。

无论如何，我不太喜欢提示和警报(更不用说 eval)，所以我使用输入字段创建了一个 jsBin，您可以在这里查看:http://jsbin.com/pamoquwuhu/1/edit

编辑添加: 如果您的目标是您以后想要在保存食物的所有位置按其名称查找食物，最好添加/推送 foodObj.name 而不是整个 foodObj 在 locations[location] 中。然后，您可以在 locations 对象上使用 native for(property in object) 循环来查看可能存储所有给定食物的位置，并将其推送到 results 数组中。因此，您的 findFood 函数可能包含以下内容(假设 food 是要搜索的食物名称的用户输入字符串:

    var results = [];

    for(var loc in locations){ // loops through the property names in `locations`
        if(locations[loc].indexOf(food)>=0)
            results.push(loc);
    }

    if(!results.length){
        alert(food+' was not found');
    else
        alert(food+' was found in '+results.toString());

假设相同的食物可以存储在多个位置，并且您想通过其名称查找给定的食物，您的食物对象的 location 属性将变得不那么重要(或者可能无用)。