用javascript壓縮開關盒

Question

我創建了一個國際象棋棋盤，我不喜歡我的switch case語句。 我認為必須有一種方法來壓縮它，但我找不到一個。 也許有些人可以幫助我。

額外的解釋，棋子是二維數組（ arr2 ）：

[
    ["R", "N", "B", "Q", "K", "B", "N", "R"],
    ["P", "P", "P", "P", "P", "P", "P", "P"],
    ["0", "0", "0", "0", "0", "0", "0", "0"],
    ["0", "0", "0", "0", "0", "0", "0", "0"],
    ["0", "0", "0", "0", "0", "0", "0", "0"],
    ["0", "0", "0", "0", "0", "0", "0", "0"],
    ["p", "p", "p", "p", "p", "p", "p", "p"],
    ["r", "n", "b", "q", "k", "b", "n", "r"]
];

棋盤的每個區域都有自己的id形式“00”到“77”，其中第一個數字是行，第二個是列。

innerHTML代碼只是棋子的unicode，如下所示： https ： //en.wikipedia.org/wiki/Chess_symbols_in_Unicode#Unicode_code_points_and_HTML

for (let r = 0; r < arr2.length; r++) {
    for (let c = 0; c < arr2.length; c++) {
        div = document.getElementById(r + "" + c)
        switch (arr2[r][c]){
            //black piece
            case 'k':
                div.innerHTML = "&#9818";
                break;
            case 'q':
                div.innerHTML = "&#9819";
                break;
            case 'r':
                div.innerHTML = "&#9820";
                break;
            case 'b':
                div.innerHTML = "&#9821";
                break;
            case 'n':
                div.innerHTML = "&#9822";
                break;                
            case 'p':
                div.innerHTML = "&#9823";
                break;
            //white piecec
            case 'K':
                div.innerHTML = "&#9812";
                break;
            case 'Q':
                div.innerHTML = "&#9813";
                break;
            case 'R':
                div.innerHTML = "&#9814";
                break;
            case 'B':
                div.innerHTML = "&#9815";
                break;
            case 'N':
                div.innerHTML = "&#9816";
                break;                
            case 'P':
                div.innerHTML = "&#9817";
                break;
        }
    }
}

Answer 1

由於國際象棋棋子的字符代碼是連續的，你可以這樣做：

div.innerHTML = "&#" + (9812 + "KQRBNPkqrbnp".indexOf(arr2[r][c])) + ";";

請注意，即使瀏覽器是寬容的，HTML實體也需要終止分號。

如果使用textContent甚至不必將字符代碼轉換為HTML實體：

div.textContent = String.fromCharCode(9812 + "KQRBNPkqrbnp".indexOf(arr2[r][c]));

您還需要考慮空方塊，至少在您開始移動碎片並使用相同的代碼更新顯示時。 這種情況不在您的代碼中處理，但您可以使用三元運算符來隔離該情況，如本演示中所示：

 function showBoard(arr2) { for (let r = 0; r < arr2.length; r++) { for (let c = 0; c < arr2.length; c++) { const div = document.getElementById(r + "" + c) div.textContent = arr2[r][c] === "0" ? "" : String.fromCharCode(9812 + "KQRBNPkqrbnp".indexOf(arr2[r][c])); } } } const arr2 = [ ["R", "N", "B", "Q", "K", "B", "N", "R"], ["P", "P", "P", "P", "P", "P", "P", "P"], ["0", "0", "0", "0", "0", "0", "0", "0"], ["0", "0", "0", "0", "0", "0", "0", "0"], ["0", "0", "0", "0", "0", "0", "0", "0"], ["0", "0", "0", "0", "0", "0", "0", "0"], ["p", "p", "p", "p", "p", "p", "p", "p"], ["r", "n", "b", "q", "k", "b", "n", "r"] ]; showBoard(arr2); 

 table { border-collapse: collapse; border-spacing: 0; } #chessboard { border: 1px solid; } #chessboard tr td { width: 20px; height: 20px; } #chessboard tr:nth-child(2n) td:nth-child(2n+1), #chessboard tr:nth-child(2n+1) td:nth-child(2n) { background: silver; } 

 <table id="chessboard"> <tr><td id="00"></td><td id="01"></td><td id="02"></td><td id="03"></td><td id="04"></td><td id="05"></td><td id="06"></td><td id="07"></td></tr> <tr><td id="10"></td><td id="11"></td><td id="12"></td><td id="13"></td><td id="14"></td><td id="15"></td><td id="16"></td><td id="17"></td></tr> <tr><td id="20"></td><td id="21"></td><td id="22"></td><td id="23"></td><td id="24"></td><td id="25"></td><td id="26"></td><td id="27"></td></tr> <tr><td id="30"></td><td id="31"></td><td id="32"></td><td id="33"></td><td id="34"></td><td id="35"></td><td id="36"></td><td id="37"></td></tr> <tr><td id="40"></td><td id="41"></td><td id="42"></td><td id="43"></td><td id="44"></td><td id="45"></td><td id="46"></td><td id="47"></td></tr> <tr><td id="50"></td><td id="51"></td><td id="52"></td><td id="53"></td><td id="54"></td><td id="55"></td><td id="56"></td><td id="57"></td></tr> <tr><td id="60"></td><td id="61"></td><td id="62"></td><td id="63"></td><td id="64"></td><td id="65"></td><td id="66"></td><td id="67"></td></tr> <tr><td id="70"></td><td id="71"></td><td id="72"></td><td id="73"></td><td id="74"></td><td id="75"></td><td id="76"></td><td id="77"></td></tr> </table>