JavaScript网格元素高度追踪代码生成多维数组含undefined的修复求助

用于追踪网格布局元素高度的代码如下：

let columns = document.getElementsByClassName('_3Rcdf');

let cellHeights = new Array(columns);
for (let j=0; j<columns.length; j++) {
    for (let i=0; i<columns[j].children.length; i++) {
        cellHeights[j] = new Array(columns[j].children[i].length); 
    }  
}
for (let k=0; k<cellHeights.length; k++) {
    for (let i=0; i<columns[k].children.length; i++) {
        cellHeights[k].push(columns[k].children[i].clientHeight);           
    } 
}

预期执行console.log(cellHeights)返回：

cellHeights = [
    [333, 372, 333],
    [333, 333],
    [372, 352]
]

但实际返回结果为：

cellHeights = [
    [undefined, 333, 372, 333],
    [undefined, 333, 333],
    [undefined, 372, 352]
]

已定位问题出在cellHeights[j] = new Array(columns[j].children[i].length);这一行，该行创建的子数组会导致首元素为undefined，需要修正代码使数组生成时直接正确填充元素。

问题本质 #

1. 初始化cellHeights时用new Array(columns)是错误的，这会把整个columns类数组对象作为第一个元素塞进数组，正确做法是初始化为空数组[]。
2. 内层循环反复给cellHeights[j]赋值新数组属于冗余操作，而且columns[j].children[i].length取的是单个DOM元素的length属性（通常为0），创建的空数组后续用push会因数组长度预设但未填充而出现undefined。

修正后的代码 #

直接去掉冗余的数组初始化步骤，遍历列的同时创建并填充子数组：

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

// 遍历每一列
for (let j = 0; j < columns.length; j++) {
    const columnHeights = [];
    // 遍历当前列的所有子元素，收集高度
    for (let i = 0; i < columns[j].children.length; i++) {
        columnHeights.push(columns[j].children[i].clientHeight);
    }
    cellHeights.push(columnHeights);
}

console.log(cellHeights);

更简洁的ES6写法 #

如果环境支持ES6，用Array.from可以大幅简化代码：

const columns = document.getElementsByClassName('_3Rcdf');
const cellHeights = Array.from(columns, column => 
    Array.from(column.children, child => child.clientHeight)
);

console.log(cellHeights);

两种写法都能直接得到预期的数组结构，不会出现undefined首元素。

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