为何JavaScript表格排序代码中Array.from转换后的元素可调用cells属性？

示例代码 #

以下是取自javascript.info的表格排序示例代码：

let sortedRows = Array.from(table.tBodies[0].rows).sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML));

table.tBodies[0].append(...sortedRows);

疑问解答 #

你混淆了数组本身和数组内的元素：

• Array.from(table.tBodies[0].rows) 生成的数组里，每个元素都是HTMLTableRowElement对象（也就是表格的一行），并非数组本身拥有cells属性。
• 在sort的回调函数中，rowA和rowB指代的是数组里的单个行元素，这些行元素是原生DOM节点，自带cells属性（用于获取该行下的所有单元格），因此rowA.cells[0]能正常获取该行第一个单元格，进而调用innerHTML.localeCompare()实现排序逻辑。

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