Javascript 数组显示单个字符而不是完整项

我不知道该怎么称呼这个标题。几个小时以来我一直在想这个问题，这让我发疯。在我的第一个项目中，我尝试制作一个基于浏览器的文本游戏。问题在于如何将库存项目添加到我的库存列表中。而不是

• 一个
• 两个
• 三

我要走了

• O
• n
• e
• T
• w
• o

等等

它仍然添加该项，但不是作为一个完整的列表条目。该列表与角色拥有的默认项显示得很好，而不是在您拾取某些内容之后

这是我的密码-

JS脚本#1：

//更衣室
if（房间[currentRoom]。项目！==未定义）{
Object.values（房间[currentRoom].items）.forEach（函数（值）{
$（“#游戏文本”）。追加（“”+value+”
”）；
});
}否则{
$（“#游戏文本”）。追加（你什么也找不到。
”；
}
}
//提货
功能拾取（项目）{
if（房间[currentRoom]。项目[item]！==未定义）{
存货=存货+项目；
$（“#游戏文本”）。追加（A“+项目+”已添加到您的库存中。
”；
}否则{
$（“#游戏文本”）。追加（这不是有效项。
”；
}
}
//显示播放器命令
函数showHelp（）{
$（“#游戏文本”）.append（这里是可能的命令：
”；
$（“#游戏文本”）。追加（“
”）；
for（var i=0；i”+命令[i]+“”）；
}
$（“#游戏文本”）。追加（
”；
}
//显示播放器资源清册
函数showInventory（）{
如果（inventory.length==0）{
$（“#游戏文本”）。追加（您没有携带任何东西！
”；
//返回；
}否则{
$（“#游戏文本”）。追加（这是您的库存：
”；
$（“#游戏文本”）。追加（“
”）；
对于（变量i=0；i”+库存[i]+“”）；
}
$（“#游戏文本”）。追加（
”；
}
}
//将玩家输入转换为动作
函数playerInput（输入）{
var命令=input.split（“”[0]；
开关（命令）{
案例“go”：
var dir=input.split（“”[1]；
更衣室（dir）；
打破
案例“帮助”：
showHelp（）；
打破
案例“库存”：
showInventory（）；
打破
案例“审查”：
检查eRoom（）；
打破
“皮卡”案例：
变量项=输入。拆分（“”[1]；
皮卡（项目）；
打破
违约：
$（“#游戏文本”）。追加（无效命令！
”；
}
}
//操纵DOM（屏幕）
$（文档）.ready（函数（）{
$（“#游戏文本”）。追加（“”+rooms.start.description+”
”；
$（文档）。按键（功能（键）{
if（key.which===13&&$（“#用户输入”）是（“：焦点”）{
var value=$（“#用户输入”）.val（）.toLowerCase（）；
$（“#用户输入”）.val（“”）；
playerInput（值）；
}
})
})

在前面的脚本中，我相当确定问题在于拾取 功能、展示库存功能或“收货”箱。它是从这个画出来的 脚本-

JS脚本#2：

var房间={
“开始”：{
“描述”：“你在一个黑暗、寒冷的地方，你看到了一盏灯
北\
你会听到西边流水的声音“，
“指示”：{
“北”：“清理1”，
“西部”：“布里奇1”
},
“项目”：{
“匕首”：“你发现了一把生锈的旧匕首。总比什么都没有好。”
假设。”，
},
},
“清理1”：{
“描述”：“当你到达一片空地时，你会看到一座灯塔
北\
从东方传来一股奇怪的气味“，
“指示”：{
“南”：“开始”，
“北”：“灯塔”，
“东方”：“巨魔”
},
“项目”：{
“盾牌”：“你发现一个磨损的皮革盾牌。”
},
},
“灯塔”：{
“描述”：“你到达灯塔，走到门口
奇怪的老太太\
打开门，你做什么，
“指示”：{
“南”：“清理1”
}
},
“巨魔”：{
“描述”：“你到达另一个空地，那里有一些巨魔
烤一些神秘的肉\
他们还没见到你。你干什么，
“指示”：{
“西部”：“清理1”
}
},
“桥梁1”：{
“描述”：“你看到一条河，有一座桥通向
西“，
“指示”：{
“east”：“开始”，
“西部”：“布里奇2”
}
},
“桥梁2”：{
“描述”：“你试图过桥，但一个巨魔跳了出来
“咬你的腿！”，
“指示”：{
“东”：“布里奇1”
}
}
}

---

如有任何帮助或指导，将不胜感激。提前谢谢

您的库存是一个

字符串

您将其视为一个数组

使用

push

并将您的库存声明为一个数组（它是一个全局数组）

字符串具有

length

属性，它告诉我们字符串中有多少个字符。您可以对它们进行迭代。这会导致代码中出现不必要的行为：

console.log（“--String--”）；
var inventory=“你好世界”；
对于（变量i=0；i”）；
var存货=[“第一串”、“第二串”、“第三串”]；
库存推送（“字符串四”）//使用推送扩展阵列
对于（变量i=0；i}

库存在哪里定义？它的初始值是多少？有吗？根据它的初始值，您认为它的作用是什么？根据您的代码和预期的输出，您希望

库存

是一个数组。你的意思是做一些类似于

库存.推送（物品）

？就是这样。谢谢你的帮助。很高兴为你服务。深入研究MDN文档：，它将真正帮助您理解该语言的概念。

//change rooms
if (rooms[currentRoom].items !== undefined) {
Object.values(rooms[currentRoom].items).forEach(function(value) {
  $('#game-text').append("<p>" + value + "</p>");
});
} else {
$('#game-text').append("<p>You find nothing.</p>");
   }
}

//pick up items
function pickUp(item){
if (rooms[currentRoom].items[item] !== undefined) {
    inventory = inventory + item;
    $('#game-text').append("<p>A " + item + " has been added to your inventory.</p>");
} else {
    $('#game-text').append("<p>That is not a valid item.</p>");
}
}

//displays player commands
function showHelp() {
$('#game-text').append("<p>Here are the possible commands: </p>");
$('#game-text').append("<p><ul>");
for (var i = 0; i < commands.length; i++) {
    $('#game-text').append("<li>" + commands[i] + "</li>");
}
$('#game-text').append("</ul></p>");
}
//displays player inventory
function showInventory() {
if (inventory.length === 0) {
    $('#game-text').append("<p>You are not carrying anything!</p>");
    //return;
} else {
$('#game-text').append("<p>Here is your inventory: </p>");
$('#game-text').append("<p><ul>");
for (var i = 0; i < inventory.length; i++) {
    $('#game-text').append("<li>" + inventory[i] + "</li>");
}
$('#game-text').append("</ul></p>");
}
}

//converts player input to actions
function playerInput(input) {
var command = input.split(" ")[0];
switch (command) {
    case "go":
        var dir = input.split(" ")[1];
        changeRoom(dir);
        break;
    case "help":
        showHelp();
        break;
    case "inventory":
        showInventory();
        break;
    case "examine":
        examineRoom();
        break;
    case "pickup":
        var item = input.split(" ")[1];
        pickUp(item);
        break;
    default:
        $('#game-text').append("<p>Invalid command!</p>");
}
}

//Manipulates DOM (screen)
$(document).ready(function() {
$('#game-text').append("<p>" + rooms.start.description + "</p>");

$(document).keypress(function(key) {
    if (key.which === 13 && $('#user-input').is(':focus')) {
        var value = $('#user-input').val().toLowerCase();
        $('#user-input').val("");
        playerInput(value);

    }
})
})

var rooms = {
"start": {
    "description": "You are in a dark, cold place and you see a light to 
<b>north</b>\
 and you hear the sound of running water to the <b>west</b>",
    "directions": {
        "north": "clearing1",
        "west": "bridge1"
    },
    "items": {
        "dagger": "You spot a rusty old dagger. Better than nothing I 
suppose.",
    },
},
"clearing1": {
    "description": "You arrive to a clearing, you see a lighthouse to the 
<b>north</b>\
 and there is a strange smell coming from the <b>east</b>",
    "directions": {
        "south": "start",
        "north": "lighthouse",
        "east": "trolls"
    },
    "items": {
        "shield": "You spot a worn leather shield."
    },
},
"lighthouse": {
    "description": "You arrive to the lighthouse and walk up to the door. A 
strange old lady\
 opens the door. What do you do?",
    "directions": {
        "south": "clearing1"
    }
},
"trolls": {
    "description": "You arrive to another clearing, there are some trolls 
roasting some mysterious meat\
 They haven't seen you yet. What do you do?",
    "directions": {
        "west": "clearing1"
    }
},
"bridge1": {
    "description": "You see a river and there is a bridge to the 
<b>west</b>",
    "directions": {
        "east": "start",
        "west": "bridge2"
    }
},
"bridge2": {
    "description": "You try to cross the bridge but a troll jumps out and 
bites your leg!",
    "directions": {
        "east": "bridge1"
    }
}
}

inventory.push(item);