TickTackToe：在JavaScript中過濾多維陣列

我正在學習在 javascript 中過濾嵌套陣列，我相信這個例子可以幫助我更好地理解它。下面是物件。

const game = () => {
return {
    player1: {
        username: 'ABC',
        playingAs: 'X'
    },
    player2: {
        username: 'XYZ',
        playingAs: '0'
    },
    board: 
        [
            ['?', null, 'X'],
            ['X', '?', null],
            ['?', null, 'X']
        ]   

   }
};

我的代碼在下面

const {player1: {username: PlayerA, playingAs:PlayerAMark}, player2: {username: PlayerB, playingAs:PlayerBMark}} = game();
const {board: board} = game();

//is there any efficient way to do it without a loop using a filter?
for (const item in board) {
    //One approach which comes to my mind is to loop. but that is what I don't think would be a learning curve for me.

}

我正在嘗試這樣的事情

const array = board;
for (const item in board) {
    console.log(array.filter(innerArray => innerArray[item] !== 'X'));
}

我專注于實施一些可以幫助我回傳的有效方法

Player1 marked 'X' at 3,1,3 and
Player 2 marked '0' at location at 0,2,1

我只堅持過濾這個板多維陣列。

感謝您在這方面的幫助。

uj5u.com熱心網友回復：

你也可以使用reduce函式。我們可以使用以下代碼獲得所需的輸出：

function printForPlayer(player, board) {
var indexes = board.reduce((acc,row)=>[...row.reduce((acc2,item,index) => item==player.playingAs ? [...acc2,index 1] : acc2, []),...acc], [])
console.log(`${player.username} marked ${player.playingAs} at ${indexes.join(',')}`)
}

printForPlayer(game().player1, game().board);
printForPlayer(game().player2, game().board);

這有點復雜，但它可以在沒有回圈的情況下作業

uj5u.com熱心網友回復：

一種方法是遍歷每一行以創建一個陣列，其中包含玩家擁有自己符號的所有位置。

使用reduce()，我們可以找到當前播放器的符號的所有索引，然后在回圈之后，使用join()來顯示它。

const data = {player1: {username: 'ABC', playingAs: 'X'}, player2: {username: 'XYZ', playingAs: '0'}, board: [['0', null, 'X'], ['X', '0', null], ['0', null, 'X'] ] };
const logPlayer = (player) => {
    const ox = data[player].playingAs;
    let indexes = [];
    
    for (let row in data.board) {
        const ii = data.board[row].reduce((prev, cur, i) => (cur === ox) ? [ ...prev, i ] : prev,[]);
        if (ii.length > 0) ii.map(i => indexes.push(`${ row   1}-${i   1}`));
    }
    console.log(`${player} has placed an '${ox}' on the following places (row-column)`, indexes.join(", "));
}

logPlayer('player1');
logPlayer('player2');

player1 has placed an 'X' on the following places (row-column) 1-3, 2-1, 3-3
player2 has placed an '0' on the following places (row-column) 1-1, 2-2, 3-1

uj5u.com熱心網友回復：

所以這是我的解決方案，它對我有用。

首先，null 總是呈現為 0。所以我不得不更新我的陣列，如下所述

    board: 
        [
            ['?', null, 'X'],
            ['X', '?', null],
            ['?', null, 'X']
        ] 

其次，在更新陣列中的板值后，以下解決方案對我有用。

const {
        player1: {username: PlayerA, playingAs:PlayerAMark}, 
        player2: {username: PlayerB, playingAs:PlayerBMark}, 
        board: GameBoard
    } = game();

let array = GameBoard.entries();
let tick = [];
let cross = [];
for (const [index,element] of array) {
    tick.push(element.indexOf(PlayerBMark)  1);
    cross.push(element.indexOf(PlayerAMark)  1);
}
 
console.log('Player ', PlayerA, ' Clicked ', PlayerAMark ,' at '  cross);
console.log('Player ',PlayerB, ' Clicked ', PlayerBMark ,' at '  tick);

這是結果。

Player  ABC  Clicked  X  at 3,1,3
Player  XYZ  Clicked  ?  at 1,2,1

感謝大家的幫助。但是，我仍然在尋找我們如何提高其性能并避免回圈？

再次感謝。

標籤：javascript 数组 javascript 对象

上一篇：從羅馬數字轉換為阿拉伯數字的程式總是給出無效引數

下一篇：展開一維numpy陣列