Javascript:循环遍历数组

Question

这让我发疯!我对 javascript 很陌生(可以读，但并不总是写)我的问题有三个。
用户需要输入(提示)“高单拿铁”。
1. 我想在这个问题中添加一个数组来存储 a.) 咖啡字符串和 b.) 咖啡价格。
2.我想使用for循环输出到目前为止订购的咖啡总量。
3.我的输出应该是表格格式，例如

短单拿铁价格是R10
双高咖啡的价格是R15

var coffee = [ ];
var price = [ ];

for (var i = 0; i < 2; i++) {

var coffee = prompt("What coffee do you want:", "");

// Size
if (coffee.indexOf('short') > -1) {
    var size = 7;
}
if (coffee.indexOf('tall') > -1) {
    var size = 9;
}
if (coffee.indexOf('grande') > -1) {
    var size = 11;
} 

// Shots
if (coffee.indexOf('single') > -1) {
    var shots = 1;
}
if (coffee.indexOf('double') > -1) {
    var shots = 2;
}
if (coffee.indexOf('triple') > -1) {
    var shots = 3;
}

// Is cappuccino?
if (coffee.indexOf('cappuccino') > -1) {
    var extra = 2;
} else {
    var extra = 0;
}

var price = (size + (3 * shots) + extra);    
console.log(coffee + "'s price is R" + price);  
}

我想要实现的目标的示例:

var coffee = [ ];
var price = [ ];

coffee.push("short single latte");
price.push(10);

coffee.push("double tall latte");
price.push(15);

var i;
for (i = 0; i < coffee.length ; i++)
{
    console.log(coffee[i] + "'s price is R" + price[i]);
}

Answer 1

我的答案是基于您想要实现的目标(您的第二个代码块)。

-1(通常由有效输出包含 0 的函数/方法返回)被称为“哨兵值”，在 javascript 中可以使用 ~ 捕获它们:所有符合不是 -1 将强制为 true。

代码中注释的进一步解释:

(window.Orders=function(){    // our constructor function
   this.clr();              // init by calling clr.
}).prototype={              // set inherited methods
   clr: function(){         // clear
           this.coffee=[];  // empty array of unknown length
           this.price=[];   // empty array of unknown length
        }
,  add: function(){         // build orders list
           var inp, size, shots, extra;
           while((inp=prompt('What coffee do you want:')) !== null){
             size=0;        // Size
             if(      ~inp.indexOf('short' ) ) size=  7;
             else if( ~inp.indexOf('tall'  ) ) size=  9;
             else if( ~inp.indexOf('grande') ) size= 11;
             shots=0;       // Shots
             if(      ~inp.indexOf('single') ) shots= 1;
             else if( ~inp.indexOf('double') ) shots= 2;
             else if( ~inp.indexOf('triple') ) shots= 3;
             extra= ~inp.indexOf('cappuccino') ? 2 : 0; //cappuccino?
             if( size && shots ){   //abuse price to check input
                this.coffee.push(inp);
                this.price.push(size + 3 * shots + extra);
             } else alert('please enter valid order');
           }
        }
,  get: function(EOL){ //output orders
           var i=0, L=this.coffee.length, r=new Array(L);
           for(; i<L; i++){  //using a for loop as you requested.
             r[i]=this.coffee[i] + "'s price is R" + this.price[i];
           }
           return r.join(EOL || '<br>');  //return string using arg EOL or '<br>'
        }
};

<!-- HTML AND *EXAMPLE* usage -->
<button onclick="
   var orders=new Orders();   // Construct new var orders
   orders.add();              // Start filling it
   document.getElementById('out').innerHTML=orders.get(); //get output
   //orders.clr()  //clears orders if you want to reuse it without spawning a new
">get orders (cancel/escape to quit)</button>
<br>
Output: <div id="out"></div>

现在..真正的挑战是想出解析用户输入字符串的方法，确定什么是有效和完整的，什么不是(谢天谢地，您没有要求解决该问题)。我检查了 size 和 shots 是否已设置。

希望这对您的学习体验有所帮助。