JavaScript 杂货清单

Question

我正在尝试创建一个购物清单程序。现在，我只是在处理一些基本功能。将一个项目添加到我的购物清单，从购物清单中删除一个项目，查看购物清单，并标记我是否已经拿起了该项目。我坚持如何让“标记”功能正常工作，这是我的代码：

var groceryList = [];

function add_item(item){
    groceryList.push(item);
}

function remove_item(item){
    for (var i = 0; i <= groceryList.length; i++){
        if (groceryList[i] === item) groceryList.splice(i, 1);
    }
}

function view_list(){
    for (var i = 0; i < groceryList.length; i++){
        if (groceryList.length == 0)
        return;
        else
        console.log("- " + groceryList[i]);
    }
}

function mark_item(item){
    for (var i = 0; i <= groceryList.length; i++){
        if (groceryList[i] == item) console.log("X " + groceryList[i]);
    }
}

view_list();
add_item('banana');
add_item('apple');
view_list();
add_item('testies');
view_list();
remove_item('testies');
view_list();
mark_item('apple');

显然，当我运行mark_item 函数时，它只会打印我放入的项目，并在其旁边加上X。我想知道是否有人对我如何解决这个问题有建议？

Answer 1

您正在从能够将您的项目存储为简单的字符串转变为需要存储有关您的项目的一些上下文数据，即您是否已标记它们。您可以开始将您的项目存储为带有名称和标记标志的 javascript 对象。

function add_item(item){
    groceryList.push({
        name: item, 
        marked: false
    });
}
function view_list(){
    for (var i = 0; i < groceryList.length; i++){
        if (groceryList.length == 0)
        return;
        else
        // let's display marked off items differently 
        if (groceryList[i].marked){
            console.log("X " + groceryList[i].name);
        } else {
            console.log("- " + groceryList[i].name);
        }

    }
}
function mark_item(item){
    for (var i = 0; i <= groceryList.length; i++){
        if (groceryList[i].name == item) {
            // when we mark an item, we just set its flag
            groceryList[i].marked = true;
        }
    }
}