string concat也替换第二个字符串arg,可能是es6问题

时间:2016-03-27 11:48:29

标签: javascript node.js

我正在编写代码以在es6中为nodejs项目创建国际象棋棋盘

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();

。我有 const (常量)这样的边缘名称

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

我已将它们映射为创建8X8 2d阵列

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

然后我尝试在forEach循环

中为这个2d数组分配它的名字
XPOSITIONS.forEach(function(x, xindex, xarray) {
    YPOSITIONS.forEach(function(y, yindex, yarray) {

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

    });

但问题是在每个棋盘方格名称分配y.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...

可能是什么问题,或者我做错了什么。请帮助我是es6的新手,也不是很好用javascript。

请参阅开发者控制台中的代码段

1 个答案:

答案 0 :(得分:1)

您将相同的对象引用作为所有数组的内容传递。这就是为什么你看到原始对象被修改,当你连接对象时会产生雪球效果的原因。循环中.name

具体来说,这一行:

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

相当于:

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

正如您所看到的,每行都使用了相同的对象。这意味着当你这样做:

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

您要在每列中更改该对象的.name。因此,当您更改boardArray[0][0].name时,您还要更改boardArray[1][0].nameboardArray[2][0].nameboardArray[3][0].name等。您可以通过添加{{1}来验证是否属于这种情况在您从函数返回之前,您将看到内容完全相同。

此外,console.dir(boardArray)并不意味着对象上的属性不会发生变化,只是意味着赋值只会发生变量一次。