你会使用哪个功能 - Javascript答案

【问题标题】：Which function would you use - Javascript你会使用哪个功能 - Javascript
【发布时间】：2017-02-12 14:36:42
【问题描述】：

我是javascript 的新手，我有以下代码：

<p id="demo"></p>

<script>
    var text = "";
    var x = 1;
    var y = 1;
    while(x < 9) {
       text += "<br>" + x +"," + y;
       x++;
    }
    document.getElementById("demo").innerHTML = text;
</script>

它打印出coordinates的列表：

1,1
2,1
3,1
4,1
5,1
6,1
7,1
8,1

问题是一旦达到 8,1，你会用什么来让它继续：

1,2
2,2
3,2
4,2
5,2
6,2
7,2
8,2

那么 1,3 依此类推，直到达到 3,4（这可能是可变的）然后停止。

在理想的世界中，我最多可以达到 8,12。

【问题讨论】：

您可能需要第二个循环来封装另一个循环。想想看，应该很容易想出来。
嵌套循环 FTW！
您应该将其中一个答案标记为有帮助

标签： javascript coordinates

【解决方案1】：

您可以使用另一个 while 结构作为 seconde 值。

var text = "",
    x,
    y = 1;

while (y <= 12) {
    x = 1;
    while (x <= 8) {
        text += "<br>" + x + "," + y;
        x++;
    }
    y++;
}
document.getElementById("demo").innerHTML = text;

&lt;p id="demo"&gt;&lt;/p&gt;

或者你可以使用for statement

for 语句创建一个循环，该循环由三个可选表达式组成，用括号括起来并用分号分隔，然后是要在循环中执行的语句（通常是块语句）。

var text = "",
    x,
    y;

for (y = 1; y <= 12; y++) {
    for (x = 1; x <= 8; x++) {
        text += "<br>" + x + "," + y;
    }
}

document.getElementById("demo").innerHTML = text;

&lt;p id="demo"&gt;&lt;/p&gt;

【讨论】：

你为什么要把它弄得这么复杂，而不是简单地使用for循环？
@MichałMiszczyszyn，我保留了 while 循环的精神来寻找答案。
不良做法的精神？ ?
没有。 while 是一个不错的选择。你可能不喜欢它，但它是一个运行良好的结构。
@MichałMiszczyszyn，我有不同的看法。两者都有效，但 op 与 while 合作过。

【解决方案2】：

这样写：

var text = "", x,y;
    
for (y=1; y<= 12; y++) {
  for (x=1; x<= 8; x++) {
    text += "<br>" + x + "," + y;
  }
}
document.getElementById("demo").innerHTML = text;

 &lt;p id="demo"&gt;&lt;/p&gt;

【讨论】：

【解决方案3】：

您可以嵌套循环。这里最好的解决方案是使用两个嵌套的for 循环：

let text = '';
for (let y = 1; y <= 12; ++y) {
    for (let x = 1; x <= 8; ++x) {
        text += "<br>" + x + "," + y;
    }
}
document.getElementById("demo").innerHTML = text;

&lt;output id="demo"&gt;&lt;/output&gt;

如您所见，它停在8,12，完全符合您的要求:)

您可以找到更多关于不同的types of loops and iteration on MDN。

【讨论】：

【解决方案4】：

这是一个有趣的解决方案。这不是我会做的，而是出于教育目的，所以就这样吧。

它在内部和外部数组上使用Array.prototype.reduce。每次迭代的内部数组的累加结果被添加到外部数组的累加器中。内部减少是添加所有实际数据的地方。外部reduce只是累积内部结果。

它使用了一些 ECMAScript 2015 特性，如展开语法和箭头函数。

str = [...Array(12)].reduce((s, _, i) =>
        s + [...Array(8)].reduce((ss, _, j) =>
              ss + (j + 1) + ',' + (i + 1) + "\n", ""),
      "");

console.log(str);

我使用 "\n" 而不是 "<br>" 以便它显示在控制台中。

实际上不要使用它。它只是为了展示不同的方式。我会在实践中使用嵌套循环。

玩得开心！

【讨论】：