私の関数は何らかの形でオブジェクトプロパティの変更を元に戻す

Question

Tic Tac Toeゲームの勝者を計算するには（私は反応のtutorialに従います）、calculateWinner関数を作成/変更しました。これらのオブジェクトの各々が2つの性質を有するのに対し、この関数は、オブジェクトの配列を受け付け（「X」または「O」、デフォルトでnullに設定することができる）

• valueを。および
• isWinner（ブール値、デフォルトでfalse）。この関数は何

は（配列にそのインデックスで区別）3乗の特定の組み合わせが同じvalueを持っているかどうかを確認し、これらの正方形trueにisWinner値を変更することです。

問題は、特定のウィニングコンビネーションで、配列全体を検査するときに、1つ以上のisWinnerプロパティが何らかの形でfalseに設定されているという問題です。問題をより奇妙なものにするために、これはcodepenにしか現れていませんが、ここではStackOverflowのスニペットではありません。 （私はすぐにローカルで試してみます）また、ローカルで間違っています。

doTheTest(); 
 

 
function calculateWinner(squares) { 
 
    const lines = [ 
 
    [0, 1, 2], 
 
    [3, 4, 5], 
 
    [6, 7, 8], 
 
    [0, 3, 6], 
 
    [1, 4, 7], 
 
    [2, 5, 8], 
 
    [0, 4, 8], 
 
    [2, 4, 6], 
 
    ]; 
 

 
    let winner = null; 
 

 
    for (let i = 0; i < lines.length; i++) { 
 
    const [a, b, c] = lines[i]; 
 

 
    let squareA = squares[a]; 
 
    let squareB = squares[b]; 
 
    let squareC = squares[c]; 
 

 
    if (squareA.value && squareA.value === squareB.value && squareA.value === squareC.value) { 
 
     squareA.isWinner = true; 
 
     squareB.isWinner = true; 
 
     squareC.isWinner = true; 
 

 
     winner = squareA.value; 
 

 
     console.log('squares to check:', a, b, c); 
 

 
     // this returns three trues as expected 
 
     console.log('The three winning values just after setting them:', squares[a].isWinner, squares[b].isWinner, squares[c].isWinner); 
 

 
     // but if you'll check the three winning square objects in the array, 
 
     // one or more isWinner property is still set to false 
 
     // and for some reason, this only happens in certain winning combinations 
 
     // e.g. it works just fine with [2, 4, 6] but produces this issue with [0, 4, 8] 
 
     console.log('But the squares array itself still just after setting them', squares); 
 
    } else { 
 
     squareA.isWinner = false; 
 
     squareB.isWinner = false; 
 
     squareC.isWinner = false; 
 
    } 
 
    } 
 

 
    return { 
 
    winner: winner, 
 
    squares: squares 
 
    }; 
 
} 
 

 

 
function doTheTest() { 
 
\t const squaresJSONString = '[{"index":0,"value":"X","coordinates":"1, 1","isWinner":false},{"index":1,"value":"O","coordinates":"2, 1","isWinner":false},{"index":2,"value":"X","coordinates":"3, 1","isWinner":false},{"index":3,"value":"O","coordinates":"1, 2","isWinner":false},{"index":4,"value":"X","coordinates":"2, 2","isWinner":false},{"index":5,"value":"O","coordinates":"3, 2","isWinner":false},{"index":6,"value":null,"coordinates":"1, 3","isWinner":false},{"index":7,"value":null,"coordinates":"2, 3","isWinner":false},{"index":8,"value":"X","coordinates":"3, 3","isWinner":false}]'; 
 

 
\t /* The JSON string above in more readable format: 
 
[ 
 
\t {"value":"X","coordinates":"1, 1","isWinner":false}, 
 
\t {"value":"O","coordinates":"2, 1","isWinner":false}, 
 
\t {"value":"X","coordinates":"3, 1","isWinner":false}, 
 
\t {"value":"O","coordinates":"1, 2","isWinner":false}, 
 
\t {"value":"X","coordinates":"2, 2","isWinner":false}, 
 
\t {"value":"O","coordinates":"3, 2","isWinner":false}, 
 
\t {"value":null,"coordinates":"1, 3","isWinner":false}, 
 
\t {"value":null,"coordinates":"2, 3","isWinner":false}, 
 
\t {"value":"X","coordinates":"3, 3","isWinner":false} 
 
] 
 
\t */ 
 

 
\t const squaresParsed = JSON.parse(squaresJSONString); 
 

 
\t calculateWinner(squaresParsed); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>

Answer 1

あなたが入賞ラインを見つけたときにループから抜け出す必要があります。そうでなければ、他の行をテストし続けます。一致しないので、テストが成功したときに代入を元に戻します。isWinner = false;だから、break文を勝利ラインを見つけるifブロックの最後に置いてください。

すべての入賞ラインを見つけたい場合は、と設定されているelseブロックを除外してください。これはすべてのオブジェクトの初期状態でなければなりません。毎回ループを繰り返す必要はありません。ループが終了すると、入賞ラインに含まれるすべての四角形はisWinner: trueになります。