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

时间:2015-04-02 17:23:31

标签: javascript arrays user-input

也许我正在构造这个代码错误(第一次使用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);
};

如果结构错误,请告诉我,因为这是我第一眼看到结构化的想法。

谢谢!

2 个答案:

答案 0 :(得分:1)

如上所述,最好使locations成为一个对象,这样你就可以得到一个指向具有相同名称的数组的键(一个字符串)。

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

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

这样做的好处是你不需要拥有locationName,因为它从未真正发挥作用。您所需要的只是使用本机locations函数检查hasOwnProperty对象是否具有与用户输入相同名称的属性。类似的东西:

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

然后您的Food构造函数也变得更简单,只需要名称和位置属性:

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

然后,您也可以直接通过其名称调用任何特定位置(如果您要像在代码中那样全局声明它),或者更恰当地(如果您在SGD中声明对象内的数组) locations[location]的{​​{1}}只是一个字符串,其中包含" freezer"或"食品室"或"冰箱"。您也可以通过location调用数组。

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

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

findFood

假设相同的食物可以存放在多个地方,并且您希望通过其名称找到给定的食物,您的食物对象food属性将变得不那么重要(或可能无用)。 / p>

答案 1 :(得分:0)

您正在使用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();