本文将深入探讨如何使用JavaScript的Array.prototype.Filter()方法结合Moment.JS库，高效地过滤数组中日期属性不符合特定条件（例如，过期日期早于当前日期）的对象。我们将重点解析filter()方法的非原地修改特性，并提供清晰的代码示例，帮助开发者避免常见陷阱，确保正确获取并处理过滤后的数据。
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<StdDateStatus[]> { 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数组中的日期过滤需求。
