javascript - 如何创建一个由订单号 : array within array, 宾果卡和循环陷阱组成的正方形......

Question

我发布的问题应该是一个非常简单的问题，但我很难弄清楚我哪里出了问题。

我正在尝试创建一张 n x n 大小的宾果卡。因此，将有一个长度为 n 的数组(从上到下的线)，其中的每个元素将包含另一个长度为 n 的数组(各个方 block )，每个元素其中的元素将包含一个对象来描述该方 block 的状态(数字，无论是否已找到)。作为概念证明，我只是用数字 1 到 n x n 填充方 block ，并稍后对数字进行洗牌。因此:

bingo = {
    card: [],

    createCard: function (size) {
        this.card.length = 0; // empty card
        size = Math.abs(+size) || 15; // should be positive and greater than 0

        let lineArray = [];

        for (let i = 0, n = 0; i < size; i++) {
            lineArray.length = 0;
            for (let j = 0; j < size; j++) {

                lineArray.push({line: i, num: ++n, checked: false});
            }
            this.card.push(lineArray);
        }
    }
}
    bingo.createCard(15);

问题是每一行都是相同的。这种情况发生在每个i——整张卡片都充满了相同值的行，

[ { line: 1, num: 16, checked: false },
    { line: 1, num: 17, checked: false },
    { line: 1, num: 18, checked: false },
    { line: 1, num: 19, checked: false },
    { line: 1, num: 20, checked: false },
    { line: 1, num: 21, checked: false },
    { line: 1, num: 22, checked: false },
    { line: 1, num: 23, checked: false },
    { line: 1, num: 24, checked: false },
    { line: 1, num: 25, checked: false },
    { line: 1, num: 26, checked: false },
    { line: 1, num: 27, checked: false },
    { line: 1, num: 28, checked: false },
    { line: 1, num: 29, checked: false },
    { line: 1, num: 30, checked: false } ] ]

最后一张卡片上填有 15 行内容

[ { line: 14, num: 211, checked: false },
    { line: 14, num: 212, checked: false },
    { line: 14, num: 213, checked: false },
    { line: 14, num: 214, checked: false },
    { line: 14, num: 215, checked: false },
    { line: 14, num: 216, checked: false },
    { line: 14, num: 217, checked: false },
    { line: 14, num: 218, checked: false },
    { line: 14, num: 219, checked: false },
    { line: 14, num: 220, checked: false },
    { line: 14, num: 221, checked: false },
    { line: 14, num: 222, checked: false },
    { line: 14, num: 223, checked: false },
    { line: 14, num: 224, checked: false },
    { line: 14, num: 225, checked: false } ],

这一定是一个循环陷阱——或者是我的代码中的一些悲惨错误——但经过长时间思考后我没有看到它。错误出在哪里呢？感谢您的帮助。

Answer 1

您需要为每个循环提供一个新数组，而不引用旧数组。

移动

let lineArray = [];

第一个 for 循环内部。

var bingo = {
        card: [],
        createCard: function (size) {
            this.card.length = 0; // empty card
            size = Math.abs(+size) || 15; // should be positive and greater than 0
            for (let i = 0, n = 0; i < size; i++) {
                let lineArray = [];
                for (let j = 0; j < size; j++) {
                    lineArray.push({
                        line: i,
                        num: ++n,
                        checked: false
                    });
                }
                this.card.push(lineArray);
            }
        }
    };

bingo.createCard(15);

console.log(bingo.card);

.as-console-wrapper { max-height: 100% !important; top: 0; }

更短的方法是创建新数组并映射对象。

var bingo = {
        card: [],
        createCard: function (length) {
            length = Math.abs(+length || 15);
            this.card = Array.from(
                { length },
                (_, i) => Array.from(
                    { length },
                    (_, j) => ({ line: i, num: i * length + j, checked: false })
                )
            );
        }
    };

bingo.createCard(15);

console.log(bingo.card);

.as-console-wrapper { max-height: 100% !important; top: 0; }