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，因为它从来没有真正发挥作用。您只需要使用本机hasOwnProperty函数检查locations对象是否具有与用户输入同名的属性。喜欢的东西：

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

那么你的饮食构造也变得简单，只需要名称和位置属性：

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

您还可以，然后直接用它的名字叫任何特定的位置（如果你是或者更恰当地（如果您在对象中声明数组，如SGD代码中所示）locations[location]，其中location只是一个字符串，它持有“冰箱”或“储藏室”或“冰箱”。您也可以通过locations[someFood.location]来调用该阵列。

反正我没有太多的提示和提醒（更不用说EVAL），所以我使用的输入字段创建一个jsBin，您可以点击此处查看：http://jsbin.com/pamoquwuhu/1/edit

编辑补充： 如果目标是你后来想在其保存的所有地点找到其名称的食物，最好在locations[location]中增加/推动foodObj.name而不是整个foodObj。然后，您可以使用位置对象上的原生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属性将变得不那么重要（或可能无用）。

Answer 2

您正在使用Food作为函数/构造函数和参数名称（但不应该成为问题，但可能会导致以后出现问题），并且您从不打电话给insertFood。此外，位置应该比数组更适合对象，以便您可以像访问代码一样访问子数组。

var locations = {fridge : [], freezer:[], pantry:[]]; 
 

 

 
function Food(name, locationName){ 
 
    this.name = name; 
 
    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:") 
 

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

 
    var x = new Food(name, locationName) 
 

 
    function insertFood(food){ 
 
     locations[food.locationName].push(food); 
 

 
     var list = document.getElementById(food.locationName + "_items"); 
 
     var li = document.createElement("li"); 
 
     li.innerHTML = food.name; 
 
     list.insertBefore(li, list.lastChild); 
 
    }; 
 
    // call the method now? 
 
    insertFood(x); 
 
}; 
 
createFood();