Question

我已经在Vue实例中创建了一个大型的正方形对象数组，如下所示：

new Vue({
el: '#application',
data:
{
    title : 'Conways Game of Life',
    squaresClassVar : 'squares',
    userColor : '#453BCC',
    startBool : true,
    squaresFromServer:[],
    squares:
    [
        { row: 0, column: 0, color:'#D3D3D3'},
        { row: 0, column: 1, color:'#D3D3D3'},
        { row: 0, column: 2, color:'#D3D3D3'},
        { row: 0, column: 3, color:'#D3D3D3'},
        { row: 0, column: 4, color:'#D3D3D3'},
        { row: 0, column: 5, color:'#D3D3D3'},
        ...
     ]

在我的HTML和CSS中，每个正方形都与一个实际的正方形画布相关联。当我向服务器发出请求时，我正在填充squaresFromServer[]数组，该数组的填充方式与squares数组相同。我正在尝试遍历两个数组以更新从服务器发送的正方形的颜色。

当前算法如下：

this.squares.forEach(indexLocalSquares => {
    this.squaresFromServer.forEach(indexServerSquares => {
        if(indexLocalSquares.row == indexServerSquares.row  && indexLocalSquares.column == indexServerSquares.column )
        {
            console.log('entered')
            indexLocalSquares.color = indexServerSquares.color 
        }
        else
        {
            indexLocalSquares.color = '#D3D3D3'
        }
    });
});

问题是indexLocalSquares.color实际上没有使用服务器正方形发送的颜色进行更新。

有人知道我如何遍历这两个数组，以便可以使用从服务器发送的正方形更新正方形数组的颜色。

在大多数其他语言中，我只会做这样的事情：

for(int i = 0, i <= squares.length - 1, i++)
{
    for(int j = 0, j <= squaresFromServer.length - 1, j++)
    {
        if(squares[i].row == squaresFromServer[j].row && squares[i].column == squaresFromServer[j].column)
        {
            squares[i].color == squaresFromServer[j].color
        }
    }
}

Answer 1

您将在循环的不同迭代中覆盖颜色。首先将所有颜色设置为默认颜色，然后仅更新服务器响应中存在的那些颜色

this.squares.forEach(indexLocalSquares => {
            indexLocalSquares.color = '#D3D3D3'
});

this.squares.forEach(indexLocalSquares => {
    this.squaresFromServer.forEach(indexServerSquares => {
        if(indexLocalSquares.row == indexServerSquares.row  && indexLocalSquares.column == indexServerSquares.column )
        {
            indexLocalSquares.color = indexServerSquares.color 
            console.log(indexLocalSquares);
        }
    });
});

请注意，嵌套迭代的复杂度为O（rows * cols）。

嵌套循环遍历Vue实例中的对象数组

1 个答案: