Javascript 使用let时，在引用外部作用域变量的循环中声明的函数可能会导致语义混乱

我相信这将被标记为重复，但我看不出我做错了什么。 如果我有此代码：

function createTableBody(table) {
    const rows = table.rows;

    for (let i = 1; i < rows.length; i++) {
        const row = rows[i];
        const cells = row.cells;

        console.log(row);

        for (let n = 1; n < cells.length; n++) {
            const cell = cells[n];
            const td = $(`#row-${i}-col-${n}`);

            console.log(cell);

            if (!cell.text) {
                td.html('N/A').removeClass('btn-cell').addClass('text-center');
            } else {
                const button = td.find('button')[0];

                $(button).html(cell.text);
                $(button).click(selectAppointment);
            }
        }
    }
}

function selectAppointment(e) {
    e.preventDefault();

    console.log(e);
}

因此，整个函数将如下所示：

function createTableBody(table) {
    const rows = table.rows;

    for (let i = 1; i < rows.length; i++) {
        const row = rows[i];
        const cells = row.cells;

        console.log(row);

        for (let n = 1; n < cells.length; n++) {
            const cell = cells[n];
            const td = $(`#row-${i}-col-${n}`);

            console.log(cell);

            if (!cell.text) {
                td.html('N/A').removeClass('btn-cell').addClass('text-center');
            } else {
                const button = td.find('button')[0];

                $(button).html(cell.text);
                $(button).click(function(e) {
                    selectAppointment(e, cell.attributes);
                });
            }
        }
    }
}

function selectAppointment(e, attributes) {
    e.preventDefault();

    console.log(e);

    // Do something with the attributes
}

但当我试图保存时，我得到了错误：

在引用外部作用域变量的循环中声明的函数可能会导致语义混乱

假设单元格和.rows是数组，则改用forEach，并向索引中添加一个：

function createTableBody(table) {
    const rows = table.rows;
    rows.slice(1).forEach(({ cells }, i) => {
        cells.slice(1).forEach((cell, n) => {
            const td = $(`#row-${i + 1}-col-${n + 1}`);
            if (!cell.text) {
                td.html('N/A').removeClass('btn-cell').addClass('text-center');
            } else {
                const button = td.find('button')[0];
                $(button).html(cell.text);
                $(button).click(function(e) {
                    selectAppointment(e, cell.attributes);
                });
            }
        });
    });
}

通过这种方式，您使用的是函数，而不是循环，这不仅通常更易于使用，而且还使linter感到高兴

---

如果它们不是数组，您可以轻松地将它们转换为具有[…行]

的数组。您跳过了行和列的索引0，这是故意的吗？行和单元格是数组吗？是和是：第一个单元格是空的，第一行是我用另一个函数处理的标题

function createTableBody(table) {
    const rows = table.rows;
    rows.slice(1).forEach(({ cells }, i) => {
        cells.slice(1).forEach((cell, n) => {
            const td = $(`#row-${i + 1}-col-${n + 1}`);
            if (!cell.text) {
                td.html('N/A').removeClass('btn-cell').addClass('text-center');
            } else {
                const button = td.find('button')[0];
                $(button).html(cell.text);
                $(button).click(function(e) {
                    selectAppointment(e, cell.attributes);
                });
            }
        });
    });
}