String concat zu zweiten String arg Ersatz möglich es6 Ausgabe

Question

ich Code schreibe ein Schachbrett in es6 für ein NodeJS Projekt

const XPOSITIONS = [{ 
 
        "name": 'a', 
 
        "index": 0 
 
         }, 
 
        { 
 
        "name": 'b', 
 
        "index": 1 
 
         }, 
 
        { 
 
        "name": 'c', 
 
        "index": 2 
 
         }, 
 
        { 
 
        "name": 'd', 
 
        "index": 3 
 
         }, 
 
        { 
 
        "name": 'e', 
 
        "index": 4 
 
         }, 
 
        { 
 
        "name": 'f', 
 
        "index": 5 
 
         }, 
 
        { 
 
        "name": 'g', 
 
        "index": 6 
 
         }, 
 
        { 
 
        "name": 'h', 
 
        "index": 7 
 
         } 
 
        ]; 
 
const YPOSITIONS = [{ 
 
        "name": '1', 
 
        "index": 1 
 
         }, 
 
        { 
 
        "name": '2', 
 
        "index": 2 
 
         }, 
 
        { 
 
        "name": '3', 
 
        "index": 3 
 
         }, 
 
        { 
 
        "name": '4', 
 
        "index": 4 
 
         }, 
 
        { 
 
        "name": '5', 
 
        "index": 5 
 
         }, 
 
        { 
 
        "name": '6', 
 
        "index": 6 
 
         }, 
 
        { 
 
        "name": '7', 
 
        "index": 7 
 
         }, 
 
        { 
 
        "name": '8', 
 
        "index": 8 
 
         } 
 
        ]; 
 

 
function makeboard() { 
 
    "use strict"; 
 

 
    var boardArray = Array(...Array(...XPOSITIONS)).map(() => Array(...YPOSITIONS)); 
 
    
 
    XPOSITIONS.forEach(function(x, xindex, xarray) { 
 
     // console.log("x" + xindex); 
 
     
 
     YPOSITIONS.forEach(function(y, yindex, yarray) { 
 
      // console.log("y" + yindex); 
 
      // console.log("x check" + xindex, x.index); 
 

 
      boardArray[xindex][yindex].name = x.name.concat(y.name); 
 
      console.log("xindex " + xindex, "yindex " + yindex, "xname " + x.name, "yname " + y.name, boardArray[xindex][yindex].name); 
 
      boardArray[xindex][yindex].xindex = x.index; 
 
      boardArray[xindex][yindex].yindex = y.index; 
 
     }); 
 
     // console.log(boardArray); 
 
    }); 
 
    return boardArray; 
 
} 
 

 
var board = makeboard();

zu erstellen. Ich habe const (Konstanten) für Kanten Namen wie diese

const XPOSITIONS = [{ 
       "name": 'a', 
       "index": 0 
        },... 
const YPOSITIONS = [{ 
       "name": '1', 
       "index": 1 
        },... 

ich ihnen zugeordnet haben eine 8X8 2d Array

var boardArray = Array(...Array(...XPOSITIONS)).map(() => Array(...YPOSITIONS)); 

Dann versuche ich zu schaffen jedes Quadrat in diesem 2D-Array zuweisen seinen Namen in foreach-Schleife

XPOSITIONS.forEach(function(x, xindex, xarray) { 
    YPOSITIONS.forEach(function(y, yindex, yarray) { 

     boardArray[xindex][yindex].name = x.name.concat(y.name); 

    }); 

Aber das Problem ist nach jedem Brett Platz Namensvergabe y.name ändert sich auch wie funktioniert so den Platz Name

yname a1 
yname a2 
yname a3 
yname a4 
yname a5 
yname a6 
yname a7 
yname a8 
yname ba1 
yname ba2 
yname ba3 
yname ba4 
yname ba5 
yname ba6 
yname ba7 
yname ba8 
yname cba1 
yname cba2 
yname cba3 
yname cba4 
yname cba5 
yname cba6 
yname cba7 
yname cba8 
yname dcba1 
yname dcba2 
yname dcba3 
yname dcba4 
yname dcba5 
yname dcba6 
yname dcba7 
yname dcba8 
yname edcba1... 

Was könnte das Problem sein, oder was mache ich falsch. Bitte helfen Sie mir, ich bin neu zu es6 und auch nicht sehr gut mit Javascript.

Siehe Code-Schnipsel in Entwicklerkonsole

Answer 1

Sie vorbei an den gleichen Objektreferenzen wie die Inhalte aller Arrays. Aus diesem Grund sehen Sie die Originalobjekte, die geändert werden, was einen Schneeballeffekt erzeugt, wenn Sie die Objekte .name in den Schleifen verketten.

Insbesondere diese Zeile:

var boardArray = Array(...Array(...XPOSITIONS)).map(() => Array(...YPOSITIONS)); 

entspricht:

var y1 = { name: '1', index: 1 }; 
var y2 = { name: '2', index: 2 }; 
var y3 = { name: '3', index: 3 }; 
var y4 = { name: '4', index: 4 }; 
var y5 = { name: '5', index: 5 }; 
var y6 = { name: '6', index: 6 }; 
var y7 = { name: '7', index: 7 }; 
var y8 = { name: '8', index: 8 }; 
var boardArray = [ 
    [ y1, y2, y3, y4, y5, y6, y7, y8], 
    [ y1, y2, y3, y4, y5, y6, y7, y8], 
    [ y1, y2, y3, y4, y5, y6, y7, y8], 
    [ y1, y2, y3, y4, y5, y6, y7, y8], 
    [ y1, y2, y3, y4, y5, y6, y7, y8], 
    [ y1, y2, y3, y4, y5, y6, y7, y8], 
    [ y1, y2, y3, y4, y5, y6, y7, y8], 
    [ y1, y2, y3, y4, y5, y6, y7, y8] 
]; 

Wie Sie die gleichen Objekte sehen in jeder Reihe verwendet werden. Das heißt, wenn Sie das tun:

boardArray[xindex][yindex].name = x.name.concat(y.name); 

Sie die .name in jeder Spalte für dieses Objekt sind zu ändern. Also, wenn Sie boardArray[0][0].name ändern, ändern Sie auch boardArray[1][0].name, boardArray[2][0].name, boardArray[3][0].name, etc. Sie können dies überprüfen, indem Sie eine console.dir(boardArray) direkt vor der Rückkehr von Ihrer Funktion hinzufügen und Sie werden sehen, dass die Inhalte alle genau gleich sind.

Auch const bedeutet nicht, dass die Eigenschaften für das Objekt wird sich nicht ändern, es bedeutet nur eine Zuordnung zu dieser Variable nur einmal passiert.