JavaScript二维数组赋值异常：如何修复值被覆盖而非生成子数组问题

你的代码问题出在二维数组的赋值方式上：JavaScript里没有cellHeights[row, j]这种二维数组的访问语法，这里的逗号是「逗号运算符」，它会忽略前面的row值，只取最后一个j作为数组索引。也就是说你每次都是在给cellHeights[j]赋值，后面的值会覆盖前面的，自然无法生成嵌套的子数组。

修复代码 #

有两种常用的修复方式，选一种即可：

方式1：先初始化每行的子数组

let columns = document.getElementsByClassName('_3Rcdf');
let cellHeights = [];

// 先判断是否存在目标列，避免报错
if (!columns.length) {
    console.log('未找到目标元素');
    return;
}

for (let row = 0; row < columns[0].children.length; row++) {
    // 为当前行创建一个空的子数组
    cellHeights[row] = [];
    for (let j = 0; j < columns.length; j++) {
        // 给当前行的第j个位置赋值
        cellHeights[row][j] = columns[j].children[row].querySelector("._1KV2M").firstChild.firstChild.clientHeight;    
    }
}
console.log(cellHeights);

方式2：用临时数组存储行数据再push

let columns = document.getElementsByClassName('_3Rcdf');
let cellHeights = [];

if (!columns.length) {
    console.log('未找到目标元素');
    return;
}

for (let row = 0; row < columns[0].children.length; row++) {
    const currentRowHeights = [];
    for (let j = 0; j < columns.length; j++) {
        currentRowHeights.push(columns[j].children[row].querySelector("._1KV2M").firstChild.firstChild.clientHeight);    
    }
    // 将整行数据添加到二维数组中
    cellHeights.push(currentRowHeights);
}
console.log(cellHeights);

额外提示 #

1. getElementsByClassName返回的是动态的HTMLCollection，如果循环过程中DOM结构发生变化，可能导致数据异常；如果不需要动态更新，可以转成静态数组：const columns = Array.from(document.getElementsByClassName('_3Rcdf'));
2. 建议给DOM查询加容错判断，比如如果某个元素不存在，避免firstChild或clientHeight报错：

const targetElement = columns[j].children[row].querySelector("._1KV2M")?.firstChild?.firstChild;
cellHeights[row][j] = targetElement ? targetElement.clientHeight : 0;

内容的提问来源于stack exchange，提问作者evilgenious448