Array als Variabel einer Klasse

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Array als Variabel einer Klasse

    Hallo Leute,

    kann mir jemand sagen warum das array nur 1 als Länge hat?

    Quellcode

    1. //var Figure = require('/javascripts/figure.js');
    2. function Board() {
    3. //this.field = [8][8];
    4. this.field = [8];
    5. //this.elem = document.getElementById('board');
    6. //this.Zahl = 234;
    7. this.showBoard = function() {
    8. console.log(this.field.length);
    9. //document.write(this.Zahl+5);
    10. /*for( y = 0; y < this.field.length; y++ ){
    11. //document.write('geht');
    12. console.log(y);
    13. //this.elem.innerHMTL = 'geht';
    14. }*/
    15. }
    16. }
    Alles anzeigen
  • Weil das Array nur ein Element enthält. Nämlich die Zahl 8. ;)

    Mit [8] hast du ein neues Array mit dem Element "Number(8)" auf dem Index 0 erzeugt. [1, 2, 3] hätte beispielsweise die Länge 3.

    Ich nehme an, du wolltest ein Array mit einer vordefinierten Länge erzeugen (in JS ziemlich sinnlos, da die Länge dynamisch ist). Das geht mit dieser Schreibweise: new Array(8).

    PS: Noch zur Erklärung der Zeile 5 ([8][8]). Du legst hier das bekannte Array mit der 8 auf Index 0 an und wertest danach den Index 8 aus. Das Ergebnis dürfte verständlicherweise "undefined" sein.
  • Ach so. Jetzt verstehe ich das. Ich wollte eigentlich probieren ob ich ein Schachspiel hinbekomme und wollte erst mal ein mehrdimensionales Array erzeugen für die Felder... Ich denke einen Schach-Computer werde ich nicht hinbekommen aber eines bei dem zwei Menschen gegen einander spielen können. Hat mir sehr weiter geholfen deine Antwort, danke. Wie würdest du ein mehrdimensionales Array erzeugen? Muss ich in jedem Feld ein neues Array mit new Array erzeugen oder eine Schleife im Konstruktor? Obwohl kann ich auch einfach this.field = [][]; schreiben und es später initalisieren?

    Grüße v.
    Felix K.
  • Quellcode

    1. //var Figure = require('/javascripts/figure.js');
    2. function Board() {
    3. this.field = makeBoard();
    4. this.elem = document.getElementById('board');
    5. //this.Zahl = 234;
    6. function makeBoard() {
    7. var field = new Array(8);
    8. for( i = 0; i < field.length; i++ ){
    9. field[i] = new Array(8);
    10. }
    11. return field;
    12. }
    13. this.showBoard = function() {
    14. //console.log(this.field.length);
    15. for( y = 0; y < this.field.length; y++ ){
    16. for( x = 0; x < this.field[y].length; x++ )
    17. //console.log(y);
    18. this.elem.innerHTML += x;
    19. this.elem.innerHTML += "<br>";
    20. }
    21. }
    22. }
    Alles anzeigen
    So geht's :thumbup:
  • Sorry, mir ist gerade eingefallen, das es bei dieser Lösung ein Problem gibt. Das äußere Array wird mit identischen Referenzen auf das Innere gefüllt.

    D. h. field[0][0] wäre z.B. immer identisch mit field[1][0].

    Das lässt sich beheben mit Array(8).fill(null).map(() => Array(8)).


    Das sieht nicht nur nicht schön aus, sondern ist auch ineffizient.


    Da ist ein einfacher for-Loop wohl noch am besten:

    JavaScript-Quellcode

    1. function makeBoard() {
    2. const field = []
    3. for(let i = 0; i < 8; i++ ) {
    4. field.push(new Array(8))
    5. }
    6. return field
    7. }

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Lichtjaeger ()

  • Oh, Danke. Schau ich mir gleich an. Ich komme gerade an einer Stelle nicht weiter... ich hatte mir das so gedacht das ich die Figuren auch als Objekte gestalte und dem Feld eine Figuren Variabel gebe. Aber diese Variabel sollte ja mal da sein und mal nicht... Je nach dem ob eine Figur auf dem Feld steht oder nicht und da weiss noch nicht genau wie ich das ausdrücken soll...

    Quellcode: field.js

    1. function Field() {
    2. this.status = false;
    3. this.figure;
    4. this.showStatus = function() {
    5. if(this.status == false) {
    6. return "leer";
    7. } else {
    8. return "nicht leer";
    9. }
    10. }
    11. this.getFigure = function(obj) {
    12. this.figure = obj;
    13. this.status = true;
    14. return 0;
    15. }
    16. }
    Alles anzeigen

    Quellcode: board.js

    1. function Board() {
    2. this.board = makeBoard();
    3. this.elem = document.getElementById('board');
    4. //this.Zahl = 234;
    5. function makeBoard() {
    6. var board = new Array(8);
    7. for( i = 0; i < board.length; i++ ){
    8. board[i] = new Array(8);
    9. for( j = 0; j < board[i].length; j++ ){
    10. board[i][j] = new Field();
    11. }
    12. }
    13. return board;
    14. }
    15. this.showBoard = function() {
    16. //console.log(this.field.length);
    17. for( y = 0; y < this.board.length; y++ ){
    18. for( x = 0; x < this.board[y].length; x++ ){
    19. //console.table(this.board[y]);
    20. this.elem.innerHTML += this.board[y][x].showStatus();
    21. }
    22. this.elem.innerHTML += "<br>";
    23. }
    24. }
    25. this.initGame = function() {
    26. this.board[1][1].getFigure(new Figure('Turm'));
    27. /*for( y = 0; y < this.board.length; y++){
    28. for( x = 0; x < this.board[y].length; x++){
    29. }
    30. }*/
    31. }
    32. }
    Alles anzeigen

    HTML-Quellcode: starseite.html

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
    6. <script src="/javascripts/figure.js"></script>
    7. <script src="/javascripts/field.js"></script>
    8. <script src="/javascripts/board.js"></script>
    9. <title>Startseite</title>
    10. </head>
    11. <body>
    12. <header>
    13. <h1>Schach 0.1</h1>
    14. </header>
    15. <nav>
    16. </nav>
    17. <content>
    18. <div id="board"></div>
    19. <script type="text/javascript">
    20. var Board = new Board();
    21. Board.showBoard();
    22. </script>
    23. <button id="initgamebutton">initgame</button>
    24. <script type="text/javascript">
    25. var elem = document.getElementById('initgamebutton');
    26. elem.addEventListener("click", /*Board.initGame()*/);
    27. </script>
    28. </content>
    29. <footer>
    30. </footer>
    31. </body>
    32. </html>
    Alles anzeigen

    Quellcode: figure.js

    1. function Figure(name) {
    2. this.name = name;
    3. }

    Wobei ich auch nicht genau weiss warum der eventlistener in der startseiten.html nicht richtig funktioniert...

    Grüße v. Felix K.