1. 理解数组过滤的需求与工具
在日常开发中，我们经常需要处理包含日期信息的对象数组，并根据日期条件筛选出符合特定要求的数据。例如，从一系列产品中找出尚未过期的商品，或者从事件列表中筛选出未来即将发生的事件。
为此，我们将结合使用两个核心工具：
- JavaScript Array.prototype.filter() 方法：这是JavaScript原生提供的一个高阶函数，用于根据回调函数中的条件测试，创建一个新数组，其中包含所有通过测试的元素。
- Moment.js 库：一个功能强大的JavaScript日期处理库，它提供了便捷的日期解析、格式化、操作和比较功能。
我们的目标是过滤掉那些 expirationDate 属性值早于或等于当前日期的对象。
2. Array.prototype.filter() 的核心机制：非原地修改
在使用 filter() 方法时，一个最常见的误解是认为它会直接修改原始数组。然而，filter() 方法的定义明确指出：它不会改变调用它的原数组，而是返回一个全新的数组。
这意味着，如果你执行以下操作：
let originalArray = [...]; originalArray.filter(item => condition(item)); console.log(originalArray); // 原始数组内容不变
originalArray 的内容将保持不变。要获取过滤后的结果，你必须将 filter() 方法的返回值赋给一个新的变量（或者重新赋值给原变量，但这通常不推荐，因为它会覆盖原始数据）。
3. 使用 Moment.js 进行日期比较
Moment.js 提供了直观的方法来比较日期。在本例中，我们需要判断一个日期是否在当前日期之后。
- 解析日期字符串：moment.utc(dateString) 可以将日期字符串解析为 Moment 对象。使用 utc() 可以避免时区问题，确保比较的准确性。
- 获取当前日期：moment() 不带参数调用时，会返回当前的本地日期和时间。
- 比较日期：momentObject.isAfter(anotherMomentObject) 方法用于判断 momentObject 是否在 anotherMomentObject 之后。它返回一个布尔值。
结合这些，我们的过滤条件可以写成：moment.utc(el.expirationDate).isAfter(moment())。这个表达式将返回 true 如果 expirationDate 在当前日期之后，否则返回 false。
4. 正确的过滤实现示例
现在，让我们通过一个完整的示例来演示如何正确地过滤数组。
假设我们有一个包含多个对象，每个对象都有一个 expirationDate 属性的数组：
import moment from 'moment'; // 如果在Node.js环境或模块化前端项目中使用
let dateOfObjects = [
{ expirationDate: "9999-12-31", id: 1 }, // 永不过期
{ expirationDate: "2024-07-01", id: 2 }, // 假设今天早于7月1日，未过期
{ expirationDate: "2023-01-15", id: 3 }, // 已过期
{ expirationDate: "2024-06-20", id: 4 }, // 假设今天晚于6月20日，已过期
{ expirationDate: "9999-12-31", id: 5 }, // 永不过期
];
console.log("原始数组:", dateOfObjects);
// 错误示范：未将filter()的结果赋值
dateOfObjects.filter((el) => {
return moment.utc(el.expirationDate).isAfter(moment());
});
console.log("错误示范后，原始数组内容（未改变）:", dateOfObjects);
// 正确示范：将filter()的结果赋给新变量
const validObjects = dateOfObjects.filter((el) => {
// 使用moment.utc解析日期，并与当前时间进行比较
// isAfter() 返回 true 如果第一个日期严格在第二个日期之后
return moment.utc(el.expirationDate).isAfter(moment());
});
console.log("过滤后的有效对象数组:", validObjects);运行上述代码，你将看到以下类似输出：
原始数组: [
{ expirationDate: "9999-12-31", id: 1 },
{ expirationDate: "2024-07-01", id: 2 },
{ expirationDate: "2023-01-15", id: 3 },
{ expirationDate: "2024-06-20", id: 4 },
{ expirationDate: "9999-12-31", id: 5 }
]
错误示范后，原始数组内容（未改变）: [
{ expirationDate: "9999-12-31", id: 1 },
{ expirationDate: "2024-07-01", id: 2 },
{ expirationDate: "2023-01-15", id: 3 },
{ expirationDate: "2024-06-20", id: 4 },
{ expirationDate: "9999-12-31", id: 5 }
]
过滤后的有效对象数组: [
{ expirationDate: "9999-12-31", id: 1 },
{ expirationDate: "2024-07-01", id: 2 }, // 假设当前日期早于2024-07-01
{ expirationDate: "9999-12-31", id: 5 }
]注意：isAfter() 是严格的“之后”。如果你想包含“在今天或今天之后”的日期，可以使用 isSameOrAfter()。
5. 在异步函数中的应用
无论 filter() 方法是在同步函数还是异步函数中使用，其行为都是一致的：它返回一个新的数组。在异步函数中，你需要确保将过滤后的结果正确地传递或返回。
例如，在一个 async 方法中：
import moment from 'moment';
interface StdDateStatusEntity {
expirationDate: string;
// ... 其他属性
}
interface StdDateStatus {
// ... 转换后的状态
}
class DateService {
// 假设 dbService 已经注入并可用
private dbService: any; // 实际项目中应有具体类型
constructor(dbService: any) {
this.dbService = dbService;
}
async getAllDateStatuses(): Promise {
let dateStatusEntities: StdDateStatusEntity[] = null;
// 假设这里从数据库获取数据
dateStatusEntities = await this.dbService.getConnection().getRepository(StdDateStatusEntity).find();
// 关键：将过滤结果赋值给一个变量
const filteredDateStatusEntities = dateStatusEntities.filter((el) => {
return moment.utc(el.expirationDate).isAfter(moment());
});
// 将过滤后的实体转换为所需的StdDateStatus类型并返回
return this.populateMultiple(filteredDateStatusEntities);
}
private populateMultiple(entities: StdDateStatusEntity[]): StdDateStatus[] {
// 模拟转换逻辑
return entities.map(entity => ({
// 假设这里进行属性映射和类型转换
statusId: entity.expirationDate, // 示例
isValid: true
}));
}
}
// 示例使用
// const myDbService = { /* ... 数据库服务实现 ... */ };
// const dateService = new DateService(myDbService);
// dateService.getAllDateStatuses().then(statuses => {
// console.log("异步获取并过滤后的状态:", statuses);
// }); 在这个异步函数中，filter() 方法仍然返回一个新的数组，你需要捕获这个新数组 (filteredDateStatusEntities)，然后才能对其进行后续操作（例如，传递给 populateMultiple 方法）。
6. 总结与注意事项
- filter() 不修改原数组：这是最重要的概念。始终记住 filter() 返回一个新数组，你需要将其赋值给一个变量来使用。
- Moment.js 的日期比较：moment.utc().isAfter(moment()) 是一个判断日期是否在当前日期之后的有效方法。根据需求，你也可以使用 isBefore(), isSameOrAfter(), isSameOrBefore(), isSame() 等。
- 时区考虑：使用 moment.utc() 解析日期可以避免本地时区差异可能导致的意外行为，尤其是在处理来自不同区域的数据时。
- 代码可读性：将过滤逻辑封装在清晰的函数或变量中，可以提高代码的可读性和维护性。
- 性能考量：对于非常大的数组，filter() 会遍历整个数组。在性能敏感的场景下，可以考虑其他优化策略，但对于大多数Web应用场景，其性能是足够的。
- 现代JavaScript替代品：虽然Moment.js功能强大，但在现代JavaScript开发中，Date 对象原生API（如 Date.parse(), new Date().getTime(), getTime()）或更轻量级的日期库（如 date-fns）也提供了强大的日期处理能力，可以作为Moment.js的替代方案。
通过理解 Array.prototype.filter() 的工作原理并正确结合 Moment.js 进行日期比较，你可以高效且准确地处理JavaScript数组中的日期过滤需求。
