如何在JavaScript中按自定义规则排序对象属性与数据行以生成HTML表格

嘿，我来帮你解决这个表格渲染的问题——要让表格列按userColumns的要求排序，同时行按data里的Order属性排列，其实分几步就能搞定，我给你拆解清楚：

第一步：先把数据行按Order排好序 #

首先得把整个data数组按每个对象的Order属性从小到大排序，这样表格的行顺序就符合要求了。用数组的sort方法就行，记得用扩展运算符复制原数组，别改原始数据：

// 按data里的Order属性给行排序，不修改原数组
const sortedData = [...data].sort((rowA, rowB) => rowA.Order - rowB.Order);

第二步：按指定顺序整理对象的键（列顺序） #

接下来处理列的顺序。这里要明确：ES6及之后的JavaScript里，字符串类型的对象键会保留插入顺序，所以我们可以根据userColumns的顺序，重新构建新对象，把需要的键值对按顺序放进去。

首先得先把userColumns按自身的Order属性排序，这样我们就得到了正确的列优先级：

// 先把用户定义的列按自己的Order排序，得到正确的列顺序
const sortedColumns = [...userColumns].sort((colA, colB) => colA.Order - colB.Order);

然后遍历排序后的data，对每个对象，按照sortedColumns里的FieldSource依次提取键值对，构建新的有序对象：

function generateTableRows() {
  // 先处理列顺序和行顺序
  const sortedColumns = [...userColumns].sort((colA, colB) => colA.Order - colB.Order);
  const sortedData = [...data].sort((rowA, rowB) => rowA.Order - rowB.Order);
  
  // 按列顺序构建每一行的有序对象
  const orderedRows = sortedData.map(row => {
    const orderedRow = {};
    sortedColumns.forEach(col => {
      // 只保留userColumns里定义的字段，自动忽略Color这种没定义的
      orderedRow[col.FieldSource] = row[col.FieldSource];
    });
    return orderedRow;
  });
  
  console.log(orderedRows);
  return orderedRows;
}

关于对象键顺序的疑问 #

刚才提到了ES6的对象键顺序问题：对于FirstName这种字符串/标识符类型的键，对象会严格保留你插入的顺序，所以我们构建的orderedRow对象，键的顺序就是sortedColumns定义的列顺序。

不过如果是非常老的JS环境（ES6之前），对象键的顺序是不保证的，这时候更稳妥的方式是用数组来存每一行的单元格值，完全不依赖对象顺序：

const orderedRows = sortedData.map(row => {
  // 直接返回按列顺序排列的单元格值数组
  return sortedColumns.map(col => row[col.FieldSource]);
});

这样得到的是二维数组，每一行就是按列顺序排列的单元格内容，渲染的时候直接遍历数组就行，兼容性拉满。

直接生成HTML表格的完整代码 #

如果要直接渲染成HTML表格，我们可以把功能整合起来，生成完整的表格代码：

function generateHTMLTable() {
  const sortedColumns = [...userColumns].sort((colA, colB) => colA.Order - colB.Order);
  const sortedData = [...data].sort((rowA, rowB) => rowA.Order - rowB.Order);
  
  // 生成表头
  const header = `<tr>${sortedColumns.map(col => `<th>${col.FieldName}</th>`).join('')}</tr>`;
  // 生成表体的每一行
  const body = sortedData.map(row => {
    const cells = sortedColumns.map(col => `<td>${row[col.FieldSource]}</td>`).join('');
    return `<tr>${cells}</tr>`;
  }).join('');
  
  // 拼接成完整表格
  return `<table border="1">${header}<tbody>${body}</tbody></table>`;
}

// 把表格插入到页面里
document.body.innerHTML = generateHTMLTable();

运行这个代码，你会得到一个列顺序是Last Name→First Name→Location→Age，行顺序是Joe→Sally→Tim的表格，完全符合需求，而且自动忽略了Color这种没在userColumns里定义的字段。

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