前端展示时间排序

一、排序案例

可以使用 JavaScript 中的 sort() 方法对数组进行排序。如果你要按照对象内部的时间属性排序，可以通过定义一个比较函数来实现。

const data = [
  { id: 1, time: '2023-10-01 12:00:00' },
  { id: 2, time: '2023-10-02 12:00:00' },
  { id: 3, time: '2023-10-03 12:00:00' }
];

data.sort((a, b) => {
  return new Date(b.time) - new Date(a.time);
});

console.log(data);

这段代码会按照 time属性降序排序数组 data，从而输出如下结果：

[
  { id: 3, time: '2023-10-03 12:00:00' },
  { id: 2, time: '2023-10-02 12:00:00' },
  { id: 1, time: '2023-10-01 12:00:00' }
]

请注意，这里我们使用了 new Date() 方法将字符串类型的时间转换为日期对象，以便进行比较。

二、保证原始数据数组顺序不变，使用slice()创建副本

当你直接对原始数据数组使用 sort（）方法进行排序时，会改变原始数据数组的顺序。这意味着原始数据数组在排序后将无法恢复到原始的顺序。

为了避免对原始数据进行修改，我们可以使用数组的 slice()方法来创建原始数组的副本，然后对副本进行排序，从而保持原始数据数组的顺序不变。

const data = [
  { id: 2, time: '2023-10-02 12:00:00' },
  { id: 1, time: '2023-10-01 12:00:00' },
  { id: 3, time: '2023-10-03 12:00:00' }
];

// 使用 slice() 方法创建原始数据数组的副本
const clonedData = data.slice();

// 对副本数组进行排序，不影响原始数据数组
const sortedData = clonedData.sort((a, b) => {
  return new Date(b.time) - new Date(a.time);
});

console.log(sortedData);  // 排序后的数组
console.log(data);  // 原始数据数组，顺序未改变

在这个示例中，我们首先使用 slice()方法创建了原始数据数组data 的副本 clonedData。然后，我们对副本数组 clonedData 进行降序排序，并将排序后的结果存储在 sortedData 变量中。

最后，我们分别输出排序后的数组 sortedData和原始数据数组 data，可以看到排序后的数组是降序排列的，而原始数据数组的顺序没有改变。

这种做法保持了原始数据数组的完整性，并且你可以在需要的时候重新使用原始的数据顺序。

三、解释为什么不直接赋值给cloneData

你提到的 cloneData = data; 是将 data 赋值给新的变量 cloneData，但实际上它们引用的是同一个数组。因此，对 cloneData 进行排序操作会直接修改原始数组 data 的顺序。

这是因为 JavaScript 中的数组和对象是引用类型，当你将一个数组赋值给另一个变量时，它们实际上共享同一个内存空间。因此，修改其中一个数组会影响到另一个数组。

使用 slice() 方法可以创建一个新的数组副本，它与原始数组具有相同的元素，但是在不同的内存空间中。这样，对副本数组进行排序操作不会修改原始数组的顺序。

下面是一个示例来说明这个问题：

const data = [3, 1, 2];
const cloneData = data;  // 使用赋值方式创建变量

cloneData.sort();  // 对 cloneData 进行排序

console.log(cloneData);  // 排序后的数组 [1, 2, 3]
console.log(data);  // 原始数组也被修改了 [1, 2, 3]

 因此，为了避免直接修改原始数据数组 data，我们需要使用 slice() 方法创建一个新的数组副本，以确保排序操作只影响副本而不会影响原始数据。