如何调整HTML表格数据渲染顺序，实现旧数据置顶新数据置底？

现有如下数据数组：

[
  { address: '101 Main Street', date_created: '2022/11/01', price: '£100,000' },
  { address: '101 Main Street', date_created: '2022/10/27', price: '£200,000' },
  { address: '101 Main Street', date_created: '2022/10/20', price: '300,000' },
];

将其传入createTable函数：

function createTable({ data, propertyId }) {
  const table = createElement({
    tag: 'table',
    id: `p-${propertyId}`,
    border: '1',
  });

  const tableHeader = createElement({
    tag: 'caption',
    innerText: 'Table title',
  });

  const tableBody = createElement({
    tag: 'tbody',
  });

  data.forEach((item) => {
    const row = createElement({
      tag: 'tr',
    });

    const date = createElement({
      tag: 'td',
      innerHTML: item.date_created,
    });

    const price = createElement({
      tag: 'td',
      innerHTML: item.price,
    });

    row.append(date, price);
    tableBody.append(row);
  });

  table.append(tableHeader, tableBody);
  return table;
}

当前函数生成的表格按原数组顺序渲染，最新数据（2022/11/01）在首行，最早的旧数据（2022/10/20）在末行。需要调整渲染顺序，让最早的旧数据显示在表格顶部，最新数据在底部，且记录数量不固定，该如何实现？

核心是先对数据数组按date_created字段升序排序，再遍历渲染，具体修改如下：

步骤1：添加排序逻辑 #

在遍历数据前，复制原数组（避免修改原始数据）并按日期升序排序：

const sortedData = [...data].sort((a, b) => {
  const dateA = new Date(a.date_created);
  const dateB = new Date(b.date_created);
  return dateA - dateB;
});

步骤2：修改遍历对象 #

将原来的data.forEach替换为遍历排序后的sortedData即可。

完整修改后的函数 #

function createTable({ data, propertyId }) {
  const table = createElement({
    tag: 'table',
    id: `p-${propertyId}`,
    border: '1',
  });

  const tableHeader = createElement({
    tag: 'caption',
    innerText: 'Table title',
  });

  const tableBody = createElement({
    tag: 'tbody',
  });

  // 复制数组并按日期升序排序
  const sortedData = [...data].sort((a, b) => {
    const dateA = new Date(a.date_created);
    const dateB = new Date(b.date_created);
    return dateA - dateB;
  });

  // 遍历排序后的数组生成表格行
  sortedData.forEach((item) => {
    const row = createElement({
      tag: 'tr',
    });

    const date = createElement({
      tag: 'td',
      innerHTML: item.date_created,
    });

    const price = createElement({
      tag: 'td',
      innerHTML: item.price,
    });

    row.append(date, price);
    tableBody.append(row);
  });

  table.append(tableHeader, tableBody);
  return table;
}

关键说明 #

• 使用[...data]复制原数组，避免排序操作污染原始数据（若业务无需保留原数组顺序，也可直接对原数组排序，但复制更安全）。
• 通过new Date()将日期字符串转为可比较的时间戳对象，dateA - dateB返回时间戳差值，实现升序排序（最早日期排在最前）。
• 该方案支持任意数量的记录，无论数组长度如何变化，都能按日期顺序正确渲染。

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