使用Moment.js过滤数组中日期属性不符合条件的对象-js教程-PHP中文网

使用Moment.js过滤数组中日期属性不符合条件的对象

霞舞

发布： 2025-08-23 20:36:00

原创

243人浏览过

使用moment.js过滤数组中日期属性不符合条件的对象

本文将深入探讨如何使用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. 正确的过滤实现示例

现在，让我们通过一个完整的示例来演示如何正确地过滤数组。

SpeakingPass-打造你的专属雅思口语语料

使用chatGPT帮你快速备考雅思口语，提升分数

查看详情

假设我们有一个包含多个对象，每个对象都有一个 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的替代方案。