Vergleichen array in javascript

Was ich versuche zu machen ist eine check-Liste für ein lotto-Spiel, das ist eine Art bingo für meine Familie.
Ich werde zuerst versuchen zu erklären, was die check-Liste tut und warum, entschuldigen Sie mein technisches Deutsch, ich bin Niederländisch, so dass einige Wörter können falsch sein 🙂

Habe ich eine Liste mit ein paar Menschen, die spielen, der lotto/bingo-Spiel. Alle Spieler wählen Sie 10 zahlen und einmal die Woche gibt es eine Ziehung von 6 zahlen, ich versuche, Schritt für Schritt zu erklären, was der code zu tun hat.

1 - 10 Personen zahlen sollten überprüft werden,

2 - 6 zahlen werden jede Woche Hinzugefügt, die verglichen werden sollen mit den Nummern der Personen.

3 - Schrift sollte grün sein, wenn es eine übereinstimmung gibt.

4 - Schrift sollte bleiben rot, wenn es keine übereinstimmung

Hier ist der code, den ich habe, so weit, eine live-version ist unter dem link.

Den code unter die großen Werke, aber das problem ist, dass der code ist entworfen, um zu vergleichen var mit var B, das ist ein Flaschenhals, denn es ist eine 1 auf 1 Aktion. Ich kann nicht hinzufügen mehr Menschen, die ohne ein Ziehen Tag.

Nun meine Frage. Was sollte getan werden, um weitere Personen hinzuzufügen (A1, A2, A3 etc etc.) ohne eine Verlosung wie B2.

Ich hoffe das ist klar genug. 🙂

<script type = "text/javascript">


var a1 = ["2","3","8","12","23", "37", "41", "45", "48"]
var a2 = ["2","14","3","12","24", "37", "41", "46", "48"]

var b1 = ["2","5", "11","16","23","45", "46"];
var b2 = ["1","23", "11","14","23","42", "46"];




for (var i = 0; i< a1.length; i++) 
{
    for (var j = 0; j< b1.length; j++) 
    {
        if (a1[i] == b1[j]) 
        {
            a1[i]= "g"+ a1[i];
        }
    }
}

for (var i = 0; i< a2.length; i++)
{
    for (var j = 0; j< b2.length; j++)
    {
        if (a2[i] == b2[j]) {
            a2[i]= "g"+ a2[i];
        }
    }
}

//john
document.write("<font color = '#FFFFFF'>" + "<b>" + "John &nbsp&nbsp " + "</b>");
for (var i = 0; i< a1.length; i++) 
{
    if (a1[i].substr(0,1) == "g") 
    {
        a1[i] = a1[i].substr(1,20);
        document.write("<font color = '#00FF00'>", a1[i] + " &nbsp&nbsp ");
    }
    else
    {
        document.write("<font color = '#FF0000'>", a1[i] + " &nbsp&nbsp ");
    }
}

//Michael
document.write("<br><br>");
document.write("<font color = '#FFFFFF'>" + "<b>" + "Michael &nbsp&nbsp " + "</b>");
for (var i = 0; i< a2.length; i++) 
{
    if (a2[i].substr(0,1) == "g") 
    {
        a2[i] = a2[i].substr(1,20);

        //The Draw    
        document.write("<font color = '#00FF00'>", a2[i] + " &nbsp&nbsp ");
    }
    else
    {
        document.write("<font color = '#FF0000'>", a2[i] + " &nbsp&nbsp ");
    }
}
document.write("<br><br>");
document.write("<br><br>");
document.write("<font color = '#FFFFFF'>" + "<b>" + "Draw day 1 " + "</b>");
document.write("<br>");
document.write("<font color = '#FFFFFF'>" + "<b>" + "Sat 08-08-2009 " + "</b>");
document.write("<br><br>");
for (var j = 0; j< b1.length; j++) 
{
    document.write("<font color = '#FFFFFF'>", b1[j] + " &nbsp&nbsp ");    
}
document.write("<br><br>");
document.write("<br><br>");
document.write("<font color = '#FFFFFF'>" + "<b>" + "Draw day 2 " + "</b>");
document.write("<br>");
document.write("<font color = '#FFFFFF'>" + "<b>" + "Sat 15-08-2009 " + "</b>");
document.write("<br><br>");

for (var j = 0; j< b2.length; j++) 
{
    document.write("<font color = '#FFFFFF'>", b2[j] + " &nbsp&nbsp ");
}
</script>

Machen Sie die "a"s halten die Spieler nimmt und die "b"s halten Sie die gezogenen zahlen für die Woche?
Ich habe eine paar code-snippets, die ich hoffe, wird Ihnen helfen. Bitte lassen Sie mich wissen, wenn Sie brauchen Klarheit über alle von Ihnen..
Sind die Spieler tauschen Ihre picks? Wenn ja, möchten Sie halten eine Geschichte der früheren picks?
ist das ein Projekt für selbstgesteuertes lernen, Hausaufgaben oder hast du Sie nur ausführen wollen, ein bingo-Spiel?
Outis Hallo, es ist für meine Familie, es ist ein lotto/bingo-check-Formular. Ich muss sagen, ich bin Total verloren, jetzt, mit all den Antworten. Können Sie kompilieren es für mich? @ Miky Oh, dachte ich, könnte ich kopieren, einfügen, entschuldigen Sie mich nicht verstehen. Ich mag zum lern javascript, aber das ist so boven meinem Kopf 🙂
Ich weiß, es ist für Ihre Familie, was aber nicht ausschließen, dass Sie in Erster Linie tun, um zu lernen JS.
Was ist die Argumentation hinter Vergleich der einzelnen player ' s picks zu verschiedenen Gewinnzahlen? Nicht jeder Vergleich repräsentieren die Woche einen einzelnen Spieler ein? Das ist, John gewinnen, Unentschieden 1 und Michael win draw 2?
Outis, Ein hält in der Tat Spieler und B hält in der Tat die gezeichneten, für 1 Woche, wenn alle Spieler Hinzugefügt werden (15 insgesamt), pro Woche sollte es sein, eine gezeichnete Hinzugefügt.
alle, ich bin ein wenig verwirrt darüber, wie die Dinge funktionieren hier, es ist so anders mit dem, was ich normalerweise in Hilfe-Foren, ich lese zuerst die FAQ 🙂
+1 für das Lesen von FAQs.
wenn Sie wollen eine schnelle 100 rep, melden Sie sich mit meta.stackoverflow.com oder serverfault.com und verknüpfen es mit Ihrem Konto SO.
Outis, danke für die führenden mich durch diesen Wald, habe ich assoziierte mit diesen zwei, sind jene Punkte, instant oder dauert es eine Weile.
Outis, sind Sie immer noch Intresse mir zu helfen?
möglich dup stackoverflow.com/questions/1296198/...

InformationsquelleAutor Chris | 2009-08-15

javascript

Zusätzlich zu umschreiben des Codes (refactoring), so dass die array-Vergleich in einer Funktion als Miky D haben, können Sie den Vergleich vornehmen effizienter durch ein Objekt, halten Sie die Gewinnzahlen. Beachten Sie, dass dieser code ist nicht die Finale version; es gibt noch weitere Verfeinerungen.

var guesses = [["2","3","8","12","23", "37", "41", "45", "48"],
               ["2","14","3","12","24", "37", "41", "46", "48"]];
var draws = [ {2:1, 5:1, 11:1, 16:1, 23:1, 45:1, 46:1},
                {1:1, 23:1, 11:1, 14:1, 23:1, 42:1, 46:1}];

function checkArray(guesses, draw) {
    for (var i = 0; i< guesses.length; ++i) {
        if (draw[guesses[i]]) {
            guesses[i] = 'g' + guesses[i];
        }
    }
}
checkArray(guesses[0], draws[1]);

Durch drehen der Gewinnzahlen in den Indizes eher als die Werte, die Sie loswerden können Sie eine Schleife. Auch 'a' und 'b' sind nicht sehr aussagekräftigen Namen. Kurze Namen gewinnen Sie nichts, sondern Verschleierung.

Durch markieren erfolgreiche und erfolgreiche Vermutungen anders (derzeit prepend 'g' zu erfolgen), können Sie auch den code vereinfachen, um die Ergebnisse anzuzeigen. Die <font> - tag ist veraltet und für eine Weile, so dass diese Verfeinerung verwendet <span>s mit einer Klasse, Sie können Stil.

function checkArray(guesses, draw) {
    var results = {}
    for (var i = 0; i< guesses.length; ++i) {
        if (draw.picks[guesses[i]]) {
            results[guesses[i]] = 'win';
        } else {
            results[guesses[i]] = 'loss';
        }
    }
    return results;
}
...
document.write('<span class="name">John</span>');
var results = checkArray(guesses[0], draws[1]);
for (var p in results) {
    document.write('<span class="'+results[i]+'">'+p+'</span>');
}

Seit document.write ist auch veraltet, werde ich ersetzen Sie es mit den modernen Entsprechungen, Dokument.createElement und - Knoten.appendChild. Wenn Sie denken, dass der resultierende code ist allzu wortreich, Sie können stattdessen innerHTML, obwohl seine Verwendung ist umstritten. Da die Namen der Spieler sind eng mit Spieler nimmt, werde ich auch index wählt der Spieler von Spieler-Namen.

Legen Sie die folgenden in einer Datei mit dem Namen "lotto.js" im gleichen Ordner wie die Webseite.

function Result(guesses) {
    for (var i = 0; i< guesses.length; ++i) {
        this[guesses[i]] = '';
    }
}
function checkDraw(guesses, draw, results) {
    for (var i = 0; i< guesses.length; ++i) {
        if (draw.picks[guesses[i]]) {
            results[guesses[i]] = 'picked';
        }
    }
    return results;
}

function appendTo(elt, parent) {
    if (parent) {
        document.getElementById(parent).appendChild(elt);
    } else {
        document.body.appendChild(elt);
    }
}

function printResults(name, results, parent) {
    var resultElt = document.createElement('div');
    resultElt.appendChild(document.createElement('span'));
    resultElt.firstChild.appendChild(document.createTextNode(name));
    resultElt.firstChild.className='name';
    var picks = document.createElement('ol');
    picks.className='picks';
    for (var p in results) {
        picks.appendChild(document.createElement('li'));
        picks.lastChild.appendChild(document.createTextNode(p));
        picks.lastChild.className = results[p];
    }
    resultElt.appendChild(picks);
    appendTo(resultElt, parent);
}

function printResultsFor(name, draws, parent) {
    var player = players[name];
    var results = new Result(player);
    for (var i=0; i<draws.length; ++i) {
        checkDraw(player, draws[i], results);
    }
    printResults(name, results, parent);
}

function printDraw(which, draw, parent) {
    var drawElt = document.createElement('div');
    drawElt.className='draw';
    drawElt.appendChild(document.createElement('h3'));
    drawElt.lastChild.appendChild(document.createTextNode('Draw '+which));
    drawElt.lastChild.className='drawNum';
    drawElt.appendChild(document.createElement('div'));
    drawElt.lastChild.className='date';
    drawElt.lastChild.appendChild(document.createTextNode(draw.when));
    var picks = document.createElement('ol');
    picks.className='picks';
    for (var p in draw.picks) {
        picks.appendChild(document.createElement('li'));
        picks.lastChild.appendChild(document.createTextNode(p));
    }
    drawElt.appendChild(picks);
    appendTo(drawElt, parent);
}

Hier ist der entsprechende HTML-Seite:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
      body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: white;
        background-color: #333;
      }
      .picks, .picks * {
        display: inline;
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      .picks * {
        margin: auto 0.25em;
      }
      #Results .picks * { color: red; }
      .name, .picks .name {
        color: white;
        font-weight: bold;
        margin-right: 0.5em;
      }
      #Results .picked { color: lime; }
      .drawNum, #Draws H3 {
          margin-bottom: 0;
      }
    </style>
    <script type="text/javascript" src="lotto.js"></script>
  </head>
  <body>
    <div id="Results"></div>
    <div id="Draws"></div>
    <script type="text/javascript">
    var players = {John:    [2,  3, 8, 12, 23, 37, 41, 45, 48],
                   Michael: [2, 14, 3, 12, 24, 37, 41, 46, 48]};

    var draws = [ {when: 'Sat 08-08-2009',
                   picks:{2:1, 5:1, 11:1, 16:1, 23:1, 45:1, 46:1}},
                  {when: 'Sat 15-08-2009',
                   picks:{1:1, 23:1, 11:1, 14:1, 23:1, 42:1, 46:1}}];

    for (name in players) {
      printResultsFor(name, draws, 'Results');
    }
    for (var i=0; i<draws.length; ++i) {
      printDraw(i+1, draws[i]);
    }
    </script>
  </body>
</html>

Verfeinern Sie die CSS, um die genaue styling Sie wollen. Der code könnte noch weiter umgestaltet werden, zu verwenden, OOP, das würde vereinfachen Sie das erstellen neuer Spieler und zieht, aber es ist mehr beteiligt, so dass ich gewonnen ' T gehen in Sie hier.

Update: Der obige code wurde umgeschrieben, so dass jeder Spieler seine Vermutungen ist im Vergleich zu jeder Ziehung. Die live-Probe-version der code wurde umgestaltet werden, fast bis zur Unkenntlichkeit zu verwenden OOP. Sie nutzt auch die Funktionen, die Sie wahrscheinlich noch nicht gesehen haben, wie JS-Verschlüsse, höherer Ordnung Funktionen und CSS -erstellte Inhalte und Zähler. Es ist länger und schwieriger zu verstehen ist aber flexibler und etwas leichter zu bedienen.

Outis, fühlen Sie sich langweilen, wenn Sie wollen, das ist toll, ich bin mir nicht ganz sicher, aber ich glaube, ich sah, einen winzigen Fehler. Zeichnen 1 a 2 ausgewählt wird, ist aber nicht grün, ist das normal, oder muss ich mis sowas??? Greate Hilfe so weit!
es ist by design. Ich check jeder Spieler seine Vermutungen gegen den Strom zu ziehen, anstatt zu checken player N gegen ziehen N. ich bin mir immer noch nicht sicher, ob die Seite soll, ein Spiel zu spielen und die Anzeige der Ergebnisse (was deiner Beschreibung scheint zu sagen, und mein code ist) oder die Anzeige des Gewinners Ergebnisse für jedes Spiel (das ist, was es sieht aus wie Ihre ursprüngliche code war zu tun versuchen).
outis Das design war in der Tat prüfen N gegen zeichnen N, dies wurde gemacht, indem jemand an codingforums, das ist nicht richtig. Der code sollte sein, prüfen Sie alle zahlen, die durch all das zieht, was bedeutet, dass 5 Personen aufnehmen kann "5" als eine gewählte Nummer, kann aber sein Treffer in draw 3. Woche. Kurz gesagt, alle ziehen Wochen sollten im Vergleich mit allen Spielern und geprüft (damit es grün), wenn die zahlen getroffen wird. Es ist nicht ein Spiel, sondern einfach nur ein check-Formular für ein Spiel, das wir spielen zu Hause. Normalerweise haben wir es mit einem Stück Papier mit allen zahlen, die auf es, und wir schlagen über diese zahlen ("bingo". Es kann Wochen dauern, um zu füllen Sie das Formular aus
Outis @ wenn eine person hat alle seine zahlen Durchgestrichen (auf dem Papier) gewinnt er den Topf voll gold 😀 ich möchte diese auf einer website, so dass wir nicht bekommen, die Frage für ein neues Stück Papier becausethe dog eat form oder jemand verloren.

InformationsquelleAutor outis

0

sollten Sie verwenden === als Vergleichsoperator

Zum Beispiel let x = 5:
```
x == 8     //yield false
```
in der Erwägung, dass:
```
x == "5"   //yield **true**
```
=== ist wie zu sagen, "ist genau gleich" (nach Wert und Typ)
```
x === 5    //yield true
x === "5"  //yield false
```
InformationsquelleAutor dfa

Ich, sieht sehr schön aus danke!!! Ich bin mir nicht sicher, ob ich es richtig gemacht habe, aber das ist, was ich habe.
Aber es funktioniert nicht in FireFox.

head-Bereich:

<script language="javascript">

//then call like this
checkValues(a1, b1);

var a = [["2","3","8","12","23", "37", "41", "45", "48"],
     ["2","14","3","12","24", "37", "41", "46", "48"]];

var b = [["2","5", "11","16","23","45", "46"],
     ["1","23", "11","14","23","42", "46"]];

var Players = ["John", "Michael"];

//Add a new player:
Players[2] = "Adam";
a[2] = ["9","3","7","12","23", "37", "40", "45", "24"];

function checkArray(myValues, winningValues)
{
for (var i = 0; i< myValues.length; i++) 
{
  for (var j = 0; j< winningValues.length; j++) 
  {
    if (myValues[i] == winningValues[j]) 
    {
      myValues[i] = "g"+ myValues[i];
    }
  }
}
}

 function displayNumbers(playerName, myNumbers)
{
document.write("<font color = '#FFFFFF'>" + "<b>" + playerName + " &nbsp&nbsp " + "</b></font>");
for (var i = 0; i< myNumbers.length; i++) 
{
   if (myNumbers[i].substr(0,1) == "g") 
   {
      myNumbers[i] = myNumbers[i].substr(1,20);
      document.write("<font color = '#00FF00'>", myNumbers[i] + "</font> &nbsp&nbsp ");
   }
   else
   {
      document.write("<font color = '#FF0000'>", myNumbers[i] + "</font> &nbsp&nbsp ");
    }
  } 
 }

</script>

Körper Abschnitt:

<body onload="checkValues(a1, b1);">

Aktualisieren Sie die details Ihrer Umsetzung sollte bearbeitet werden, in der ursprünglichen Frage und nicht als neue Antworten. Sobald Sie bei 50 rep, können Sie Antworten, andere Antworten auf Fragen als Kommentar hinterlassen. Bis dahin bitte fügen Sie die Fragen zu Ihrem original. Es ist nur, wie die SO aufgebaut ist.
bitte entweder ändern Sie den Aufruf checkValues zu "checkArray" oder ändern Sie den Namen der Funktion übereinstimmen ("checkValues"). In meinem Beispiel habe ich einen Fehler gemacht, der die Benennung der Funktion checkArray und nannte es mit checkValues. @outis wies darauf hin, und ich habe meinen Beitrag korrigiert. Bitte sehen Sie unten, und korrigieren Sie Ihre code als auch..
Ich habe bis-abgestimmt auf Ihre Frage.. Wenn Sie mitmachen und gewinnen 30 mehr Punkte werden Sie in der Lage, um Kommentare zu posten.
Ich möchte nicht unhöflich sein, aber ich weiß wirklich nicht, was als Nächstes zu tun ist, habe ich versucht, den Schnipsel, den Sie, aber ich bin Total verloren, können Sie mir helfen wieder in der Spur?

InformationsquelleAutor Chris

Hier ein paar Dinge, die mir aufgefallen ist:

Sie könnte verwenden Arrays von arrays zum speichern der Anzahl picks und die Gewinnzahlen
Sie könnte wirklich einige Funktionen zu tun, die wiederholte Arbeit
den HTML-code, machen Sie von Ihrem JS wird nicht richtig gebildet

Funktionen verwenden zu führen wiederholte code

function checkArray(myValues, winningValues)
{
   for (var i = 0; i< myValues.length; i++) 
   {
      for (var j = 0; j< winningValues.length; j++) 
      {
        if (myValues[i] == winningValues[j]) 
        {
          myValues[i] = "g"+ myValues[i];
        }
      }
   }
}

function displayNumbers(playerName, myNumbers)
{
    document.write("<font color = '#FFFFFF'>" + "<b>" + playerName + " &nbsp&nbsp " + "</b></font>");
    for (var i = 0; i< myNumbers.length; i++) 
    {
       if (myNumbers[i].substr(0,1) == "g") 
       {
          myNumbers[i] = myNumbers[i].substr(1,20);
          document.write("<font color = '#00FF00'>", myNumbers[i] + "</font> &nbsp&nbsp ");
       }
       else
       {
          document.write("<font color = '#FF0000'>", myNumbers[i] + "</font> &nbsp&nbsp ");
       }
    } 
}

//then call like this
checkArray(a1, b1);

Verwenden Sie arrays zum speichern von Nummern und die Gewinnzahlen

var a = [["2","3","8","12","23", "37", "41", "45", "48"],
         ["2","14","3","12","24", "37", "41", "46", "48"]];

var b = [["2","5", "11","16","23","45", "46"],
         ["1","23", "11","14","23","42", "46"]];

var Players = ["John", "Michael"];

//Now you can do this:
// for each player
for(var k = 0; k < Players.length; k++)
{
    //compare his numbers with each draw
    for(var c = 0; c < b.length; c++)
    {
       checkArray(a[k], b[c]);
       displayNumbers(Players[k], a[k]);
    }
}

Und das hinzufügen von einem neuen Spieler ist so einfach wie

var a = [["2","3","8","12","23", "37", "41", "45", "48"],
         ["2","14","3","12","24", "37", "41", "46", "48"]];

var b = [["2","5", "11","16","23","45", "46"],
         ["1","23", "11","14","23","42", "46"]];

var Players = ["John", "Michael"];

//Add a new player:
Players[2] = "Adam";
a[2] = ["9","3","7","12","23", "37", "40", "45", "24"];

Natürlich Sie müssen nicht fügen Sie die Menschen und zieht gleichzeitig..

Die Vergleich-Funktion ist definiert als checkArray, sondern nennt als checkValues(a1, b1). Meinten Sie schreiben ein checkValues Funktion?
ja, natürlich.. ich habe es behoben

InformationsquelleAutor Mike Dinescu

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.