javascript - Array.from 不执行深复制

Question

我正在尝试制作一款战舰游戏。我到处找，研究了大约 10 个小时后还是没能弄清楚。

问题是，即使我尝试使用 Array.from 进行深层复制，更改 plateauAfter 数组也会更改 plateauBefore数组。

//function which make a two-dimensional array
function plateau() {
let plateau = new Array();
    for (let i = 0; i < 10; i++) {
        plateau[i] = new Array();
        for (let j = 0; j < 10; j++) {
            plateau[i][j] = '[]';enter code here
        }
    }
    return plateau;
}


let CPU = {
    navire: [
        {
            PorteAvion: 5,
            Position: ['B', 3],
            Direction: 'bas',
            Symbol: '[P]'
        },
        {
            SousMarin: 4,
            Position: ['D', 1],
            Direction: 'droite',
            Symbol: '[S]'
        },
        {
            Fregate: 3,
            Position: ['E', 4],
            Direction: 'gauche',
            Symbol: '[F]'
        }
    ]
}

function placementBateau(plateau, typeNavire, position, direction, symbol) {

    let plateauBefore = Array.from(plateau);
    let plateauAfter = Array.from(plateau);

    let letter = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];
    let row = position[1] - 1;
    let column = letter.indexOf(position[0]);

    for (i = 0; i < typeNavire; i++) {

        if (-1 in plateauAfter[row]) {
            console.log('Le navire dépasse du plateau ! recommancer svp');
            return plateauBefore;
        } else {
            switch (direction) {
                case 'haut':
                    try {
                        plateauAfter[row - i][column] = symbol;
                        break;
                    } catch (error) {
                        console.log('Le navire dépasse du plateau ! recommancer svp');
                        return plateauBefore;
                    }
                case 'bas':
                    try {
                        plateauAfter[row + i][column] = symbol;
                        break;
                    } catch (error) {
                        console.log('Le navire dépasse du plateau ! recommancer svp');
                        return plateauBefore;
                    }
                case 'gauche':
                    try {
                        plateauAfter[row][column - i] = symbol;
                        break;
                    } catch (error) {
                        console.log('Le navire dépasse du plateau ! recommancer svp');
                        return plateauBefore;
                    }
                case 'droite':
                    try {
                        plateauAfter[row][column + i] = symbol;
                        break;
                    } catch (error) {
                        console.log('Le navire dépasse du plateau ! recommancer svp');
                        return plateauBefore;
                    }
            };
        }
    }
    return plateauAfter;
}


let plateauCPU = plateau();

plateauCPU = placementBateau(plateauCPU, CPU.navire[0].PorteAvion, CPU.navire[0].Position, CPU.navire[0].Direction, CPU.navire[0].Symbol);
plateauCPU = placementBateau(plateauCPU, CPU.navire[1].SousMarin, CPU.navire[1].Position, CPU.navire[1].Direction, CPU.navire[1].Symbol);
plateauCPU = placementBateau(plateauCPU, CPU.navire[2].Fregate, CPU.navire[2].Position, CPU.navire[2].Direction, CPU.navire[2].Symbol);

console.log(plateauCPU);

Answer 1

看看像这样使用 ES6 数组传播进行复制是否会有帮助:

let plateauBefore = [...plateau];
let plateauAfter = [...plateau];

或通过 Array.concat如果使用 ES6 是一个问题:

let plateauBefore = [].concat(plateau);
let plateauAfter = [].concat(plateau);