Javascript数组中的神奇逗号

Question

我正在编写一个数独验证器作为练习题。我将81个数字的棋盘作为单行字符串导入，由单个空格分隔。当我在第4行打印字符串时，我的输入中没有逗号分隔数字。在第14行，我使用split方法将其拆分为应该有81个索引的数组。当我通过在第20行打印数组来测试它时，数字之间的索引已经被逗号填充了。我不知道这些神奇的逗号是从哪里来的，这一定是split方法的结果，因为我的输入中不包含任何逗号。有人能解释一下发生了什么吗？以下是JS脚本：

function import1() {
    var board = prompt("Please enter a board");
    if (board != null) {
        document.getElementById("demo").innerHTML = "board entered: " + board + "\n";
    }
    else {
        document.getElementById("demo").innerHTML = "Invalid entry\n";
    }

    parseMe(board);
}

function parseMe(board) {

    var boardArray = String(board.split(" "));

    var toPrint = "";
    for (var j = 0; j < boardArray.length; j++) {
        toPrint += boardArray[j];
    }
    document.getElementById("test").innerHTML = "test" + toPrint;


    var board2D = [
        ["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", "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", "0", "0", "0", "0", "0", "0", "0", "0"],
        ["0", "0", "0", "0", "0", "0", "0", "0", "0"]
    ];

    var counter = 0;
    for (var i = 0; i < board2D.length; i++) {
        for (var j = 0; j < board2D.length; j++) {
            board2D[i][j] = boardArray[counter];
            counter++;
        }
    }
    if (counter != 81) {

     document.getElementById("error").innerHTML = "Invalid entry, should be 81 total digits\n";
    }
    printBoard(board2D);
}

function printBoard(board) {
    var toPrint = "";

    for (var i = 0; i < board.length; i++) {
        for (var j = 0; j < board.length; j++) {
         toPrint += board[i][j] + " ";
        }
        toPrint += "\n";
    }
    document.getElementById("printBoard").innerHTML = toPrint;
}

如果有人想看，我可以提供我正在编写的网页，但我认为这并不重要。

以下是输出结果：

输入的数独棋盘：5 3 4 6 7 8 9 1 2 6 7 2 1 9 5 3 4 8 1 9 8 3 4 2 5 6 7 8 5 9 7 6 1 4 2 3 4 2 6 8 5 3 7 9 1 7 1 3 9 2 4 8 5 6 9 6 1 5 3 7 2 8 4 2 8 7 4 1 9 6 3 5 3 4 5 2 8 6 1 7 9

测试5,3,4,6,7,8,9,1,2,6,7,2,1,9,5,3,4,8,1,9,8,3,4,2,5,6,7,8,5,9,7,6,1,4,2,3,4,2,6,8,5,3,7,9,1,7,1,3,9,2,4,8,5,6,9,6,1,5,3,7,2,8,4,2,8,7,4,1,9,6,3,5,3,4,5,2,8,6,1,7,9

- ja08prat

---

boardArray不是一个数组，它是一个字符串（因为你在String()中将其封装）。这会导致它使用Array.prototype.toString，它默认使用逗号。 - Heretic Monkey

@HereticMonkey 谢谢！ - ja08prat

是的，如果你想让 boardArray 实际上成为一个 数组，你不应该用 String() 包装它 -- let boardArray = board.split(' '); - Stephen P

Answer 1

将数组board.split(" ")转换为字符串时，会插入逗号。请参阅此处的文档，并查看以下示例：

var test = ['1', '2', '3'];

console.log(test[0], test[1]);

var testAsString = String(test);

console.log(testAsString[0], testAsString[1]);

您不需要从数组中将其转换回来，只需正常访问元素即可。

function import1() {
    var board = prompt("Please enter a board");
    if (board != null) {
        document.getElementById("demo").innerHTML = "board entered: " + board + "\n";
    }
    else {
        document.getElementById("demo").innerHTML = "Invalid entry\n";
    }

    parseMe(board);
}

function parseMe(board) {

    var boardArray = board.split(" ");

    var toPrint = "";
    for (var j = 0; j < boardArray.length; j++) {
        toPrint += boardArray[j];
    }
    document.getElementById("test").innerHTML = "test" + toPrint;


    var board2D = [
        ["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", "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", "0", "0", "0", "0", "0", "0", "0", "0"],
        ["0", "0", "0", "0", "0", "0", "0", "0", "0"]
    ];

    var counter = 0;
    for (var i = 0; i < board2D.length; i++) {
        for (var j = 0; j < board2D.length; j++) {
            board2D[i][j] = boardArray[counter];
            counter++;
        }
    }
    if (counter != 81) {
     document.getElementById("error").innerHTML = "Invalid entry, should be 81 total digits\n";
    }
    printBoard(board2D);
}

function printBoard(board) {
    var toPrint = "";

    for (var i = 0; i < board.length; i++) {
        for (var j = 0; j < board.length; j++) {
         toPrint += board[i][j] + " ";
        }
        toPrint += "\n";
    }
    document.getElementById("printBoard").innerHTML = toPrint;
}

import1();

<div id="demo"></div>
<div id="test"></div>
<div id="printBoard"></div>
<div id="error"></div>

- Blue

---

在parseMe函数的开头进行检查，判断它是否为81。例如：if (boardArray.length != 81) { /* 写入错误信息 */ return; } - Blue

Answer 2

当你这样做：

String(board.split(" "));

for (var j = 0; j < boardArray.length; j++) {
    toPrint += boardArray[j];
}
document.getElementById("test").innerHTML = "test" + toPrint;

你需要记住，String(board.split(" "));将数组转换为字符串，这会导致包含一些逗号的表示。

因此，当你迭代时，你要遍历字符串的字符，并且只需复制它，带有逗号。

你只需要不把它转换成字符串！

- Pac0