javascript - JavaScript杂货 list

我正在尝试创建一个杂货清单程序。现在，我正在从事一些基本功能。将商品添加到我的购物清单中，从购物清单中删除一个商品，查看购物清单，并标记我是否已将其捡起。我一直在坚持如何使“标记”功能正常工作，这是我的代码：

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。我想知道是否有人对如何解决这个问题有建议？

最佳答案

您已经从能够将项目存储为简单的字符串转变为也需要存储有关项目的一些上下文数据，即是否标记了它们。您可以开始将项目存储为带有名称和标记标志的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;
        }
    }
}