javascript - Tick Tack Toe:在 JavaScript 中过滤多维数组

我正在学习过滤 javascript 中的嵌套 arrays ,我相信这个例子可以帮助我更好地理解它。下面是对象。

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

我只坚持过滤这个板多维数组。

感谢您在这方面的帮助。

回答1

您也可以使用 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);

这有点复杂,但它可以在没有循环的情况下工作

回答2

一种方法是遍历每一行以创建一个数组,其中包含玩家拥有自己符号的所有位置。

使用https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce,我们可以https://stackoverflow.com/a/20798754/5625547,然后在循环之后,使用https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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

回答3

所以这是我的解决方案,它对我有用。

首先,null 总是呈现为 0。所以我必须更新我的数组,如下所述

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

其次,在更新数组中的板 value 后,以下解决方案对我有用。

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

感谢大家的帮助。但是,我仍然在寻找我们如何提高其性能并避免循环?

再次感谢。

相似文章

svg - 缩放另一个 svg 内的 svg 元素

我想在嵌套在另一个svg中的悬停3svgs上放大。这3个svgs是在此地址的第一张图中可见的行星:http://68.183.74.150:3000/planet。因此,总而言之,代码如下所示:<sv...

最新文章