使用数组元素填充提示并为它们编号

Question

（Stack Overflow 没有 'prompt' 的标签，所以我使用了警报，因为我猜它足够相似以吸引正确的回答者。）

您好，我目前正在为大学作业制作一个基于 JavaScript 的游戏。我通常很擅长解决问题，但一直被这个问题难倒。

为了解释，我有一个数组，它命名了玩家可以选择的可能的装甲槽。可以以任何顺序选择这些，每次选择被推送到第二个数组，该数组处理已经选择的内容（以及以什么顺序）并且该项目从原始数组拼接。有一个 while 循环，直到所有 3 个都被选中。

var armourSlotToPick = ["Head", "Chest", "Legs"],    
    armourSlotPicked = [],
    armourLoop = 1,
    indexArmour = 0;

function numInArray() {
    indexArmour++;
    return (indexArmour + ". " + armourSlotToPick[indexArmour - 1] + "\n");
}


function armour() {
    while (armourLoop < 4) {
        var armourPick = prompt("Pick an armour slot to generate an item for:\n" + armourSlotToPick.forEach(numInArray));
        if (armourPick == 1) {
            armourSlotPicked.push(armourSlotToPick[0]);
            armourSlotToPick.splice(0,1);
        } else if (armourPick == 2) {
            armourSlotPicked.push(armourSlotToPick[1]);
            armourSlotToPick.splice(1,1);
        } else if (armourPick == 3) {
            armourSlotPicked.push(armourSlotToPick[2]);
            armourSlotToPick.splice(2,1);
        } else {
            alert("Invalid choice, you suck");
            break;
        }
        armourLoop++;
    }
}

我知道可能无法根据提示在 numInArray() 中完成整个 return，但它显示了一些工作。

现在的问题是：我让它工作了，所以数组中的每个项目都被编号了（var armourSlotToPick = ["1. Head", "2. Chest", "3. Legs"],）但是正如你可以看到，如果玩家选择了2，那么下次它会显示“1. Head (new line) 3. Legs”，当玩家选择3时，就会出现问题，因为他们真的要选择2。如何是否可以在提示中对数组中的项目进行编号？

我可能想多了，但我现在已经痛苦了几个小时。

提前感谢您的任何见解，

丹尼尔.

编辑：已解决。

以下是最终结果，与 Jonathan Brooks 编辑后的答案略有不同。

var armourSlotToPick = [null, "Head", "Chest", "Legs"]
var armourSlotPicked = [null];
var armourLoop = 1;

function armour() {
    while (armourLoop < 4) {
        var message = "Pick an armour slot to generate an item for:\n";
        for (var i = 0; i < armourSlotToPick.length; i++) {
            if (armourSlotToPick[i] !== null) {
                message += "" + i + ". " + armourSlotToPick[i] + "\n"; 
            }            
        }
        var armourPick = prompt(message);
        if (armourPick > armourSlotToPick.length-1 || armourPick < 1) {
            alert("Invalid choice, you suck");
        } else {
            var insert = armourSlotToPick.splice(armourPick, 1);
            armourSlotPicked.push(insert);
        }
        armourLoop++;
    }
    armourSlotPicked.splice(0,1);
}

armour();
alert(armourSlotPicked.join("\n"));

我感谢所有为这次讨论和最终结果做出贡献的人，我希望这是一个很好的例子，可以解决人们将来可能遇到的类似问题。

Answer 1

使用结构/对象作为数组中的内容，而不仅仅是值。

基本概念：

armourSlotPicked.push({ "key": 1, "value":armourSlotToPick[1]})
alert("value: " + armourSlotPicked[0].value)
alert("key: " + armourSlotPicked[0].key)

编辑：回复评论可能需要 space.

恕我直言，提示是完全错误的工具，因为大多数浏览器会询问用户权限以防止多次弹出，并且由于提示只能 return 1 条信息，您只能请求每个弹出窗口 1 件事。相反，您应该使用 div 元素，每个信息都带有复选框..

话虽这么说，它可以很容易地在提示中使用。提示只是一个内置函数，它将一个字符串作为参数（在弹出窗口中显示为文本）并且 return 是一个包含用户输入的字符串。

事实上，对您来说神奇的是： array.foreach(): forEach() 方法为每个数组元素执行一次提供的函数。

在您的情况下，这意味着它调用一个函数，该函数 return 为数组中的每个元素设置一个字符串，然后连接这些字符串。

在过去你会这样写：

var messageText= "Pick an armour slot to generate an item for:\n"
for(var i = 1; i < armourSlotToPick.length; i++){
    messageText += i + ". " + armourSlotToPick[i- 1] + "\n";
}
var armourPick = prompt(messageText);

但是在这个现代，你定义了一个打印函数，并用它来生成循环：

function numInArray() {
    indexArmour++;
    return (indexArmour + ". " + armourSlotToPick[indexArmour - 1] + "\n");
}

//more code before we get to where the function is used....

indexArmour = 0;
var messageText = "Pick an armour slot to generate an item for:\n" + armourSlotToPick.forEach(numInArray);
var armourPick = prompt(messageText);

或在您的代码中的一行中： indexArmour = 0; //你忘了这个 - 否则列表只会完成一次？ var armourPick = prompt("Pick an armour slot to generate an item for:\n" + armourSlotToPick.forEach(numInArray));

它产生相同的输出，因为它做同样的事情，只是写法大不相同！

如果数组包含 "object literals" 而不是简单的值，正如我建议的那样，老式代码看起来像这样：

function contains(a, value) {
    try{
        for (var i = 0; i < a.length; i++) {
            if (a[i].value == value) {
                return true;
            }
        }
    }
    catch(err) {
       // do nothing 
    };
    return false;
}

以后..

for(var j = 0; j < 4; j++){
    for(var i = 0; i < Math.min(armourSlotToPick.length); i++){
        if( contains(armourSlotPicked, armourSlotToPick[i- 1]) )

继续； var messageText = "Generate an item for armour in slot: " + i + "\n" messageText += armourSlotToPick[i- 1] + "\n"; }

    var armourPick = prompt(messageText);
    if (armourPick > 0 && armourPick < armourSlotToPick.length) {
        armourSlotPicked.push({"key":j, "value":armourSlotToPick[armourPick]);
    }
    ...
}
//now we have an array that holds information about when what was picked..

或类似的东西..这是bt.w完全未经测试的，仅供说明

Answer 2

您想使用数组索引为项目编号。由于您的数字是从一开始的，而索引是从零开始的，因此在输出和解释响应时需要在两者之间进行转换。

这种方法还允许您消除 if-else 语句中除两种情况之外的所有情况。

Answer 3

查看我的 fiddle，我想我有一个可行的解决方案。

您真正想要使用的是具有您自己的索引的对象文字（从 1 开始）- 如果是我，我会通过向对象的原型添加一个方法来创建自己的方法来迭代此自定义索引，但我离题了。

您使用 while 循环使您的代码过于复杂，并且不需要大量的 if 语句：相反，您所需要的只是对输入进行一些基本验证，然后您可以只相信通过此验证的任何输入。此处演示了这一点：

if ( armourPick > armourSlotToPick.length || armourPick < 1 ) {
    alert("Invalid choice, you suck");
}
else {
    armourSlotPicked.push( armourSlotToPick[armourPick-1] )
    alert (armourSlotPicked[armourSlotPicked.length-1].value);
}

仔细阅读我的代码，你应该对如何处理某些问题有更好的理解。

编辑：

根据您的要求，我认为我有适合您需求的解决方案。基本上，要使数组 "start" 的索引为 1，您只需用 null 值填充第零个元素，如下所示：

var armourSlotToPick = [null, "Head", "Chest", "Legs"]
var armourSlotPicked = [null];

您只需要记住在您的代码中考虑这个 null 对象，例如：

if (armourSlotToPick[i] !== null) {
    message += "" + i + "\n"; 
}

索引会自动更新。有关详细信息，请参阅此 updated fiddle。

使用数组元素填充提示并为它们编号

Populate a prompt with elements of an array and number them off

javascript

arrays

alert