Welche Funktion würden Sie verwenden - Javascript

Question

ich javascript bin neu und ich habe den folgenden Code:

<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> 

Es gibt eine Liste von coordinates aus:

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

Die Frage, sobald es ist wird zu 8,1 Was würdest du verwenden, um es zu erhalten?

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

dann 1,3 und so weiter, bis es 3,4 erreicht (dies könnte variabel sein), dann stoppt es.

In einer idealen Welt könnte ich es bis zu einem Maximum von 8,12 gehen.

Answer 1

Sie könnten eine andere while-Struktur für den sekundären Wert verwenden.

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

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

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

Oder Sie könnten eine for statement

Die for Anweisung erstellt eine Schleife, die durch ein Semikolon von drei optionalen Ausdrücke, die in Klammern eingeschlossen und getrennt besteht, gefolgt von eine Anweisung (normalerweise eine Blockanweisung), die in der Schleife ausgeführt werden soll.

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;

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

Answer 2

schreiben es so:

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; 
 

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

Answer 3

können Sie nisten Loops. Die beste Lösung ist hier zwei verschachtelte for Schleifen zu verwenden:

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;

<output id="demo"></output>

Wie Sie sehen können, ist es bei 8,12 stoppt, genau wie Sie :)

Sie wollten mehr über finden verschiedene types of loops and iteration on MDN.

Answer 4

Hier ist eine lustige Lösung. Es ist nicht das, was ich tun würde, außer für Bildungszwecke, also nimm es für das, was es ist.

Es verwendet Array.prototype.reduce auf inneren und äußeren Arrays. Das akkumulierte Ergebnis des inneren Arrays bei jeder Iteration wird dem Akkumulator des äußeren Arrays hinzugefügt. Die innere Reduzierung ist, wo alle tatsächlichen Daten hinzugefügt werden. Die äußere Reduktion akkumuliert nur die inneren Ergebnisse.

Es verwendet einige ECMAScript 2015-Funktionen wie die Spreadsyntax und die Pfeilfunktionen.

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

 
console.log(str);

benutzte ich "\n" statt "<br>", so dass es in der Konsole erscheint.

Verwenden Sie das nicht tatsächlich. Es ist einfach anders zu zeigen. Ich würde eine verschachtelte Schleife in der Praxis verwenden.

Viel Spaß!