当前位置：首页 > 文章列表 > 文章 > 前端 > 使用Moment.js筛选数组对象：理解filter()的不可变性

使用Moment.js筛选数组对象：理解filter()的不可变性

2025-09-03 15:03:39 0浏览收藏

本文深入解析了如何利用Moment.js库和JavaScript的`filter()`方法高效筛选数组对象，特别是针对包含日期属性的数据，剔除过期数据。重点强调了`filter()`方法的不可变性，即它会返回一个**新数组**，而非修改原始数组。通过示例代码，详细展示了如何结合`moment.utc()`和`isAfter()`方法进行日期比较，以及如何正确地将`filter()`的结果赋值给新变量，避免常见的误用陷阱。无论是前端还是后端开发，掌握这一技巧都能有效提升数据处理的效率和准确性。了解`Array.prototype.filter()`的工作原理，结合Moment.js的强大日期处理能力，是编写健壮JavaScript代码的关键。

本文详细介绍了如何利用Moment.js库筛选包含日期属性的数组对象，以剔除过期数据。核心在于理解JavaScript Array.prototype.filter()方法的工作原理：它返回一个新数组，而不是修改原始数组。教程通过示例代码演示了正确的筛选姿势，并强调了将filter()结果赋值给新变量的重要性，避免常见误区。

筛选数组对象：Moment.js与filter()方法的应用

在前端或后端开发中，处理包含日期信息的对象数组并根据日期条件进行筛选是常见的任务。例如，我们可能需要从一系列数据中筛选出所有尚未过期或在未来某个日期之后的数据。Moment.js是一个强大的日期处理库，结合JavaScript原生的Array.prototype.filter()方法，可以高效地完成这类操作。然而，在使用filter()时，一个常见的误解可能导致代码行为与预期不符。

理解Array.prototype.filter()方法

filter()方法是JavaScript数组的一个高阶函数，它创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。关键点在于：filter()方法不会改变原始数组。 它总是返回一个新的数组。如果你不将filter()的返回值赋给一个变量，那么筛选操作的结果将不会被保存，原始数组将保持不变。

考虑以下场景：我们有一个包含多个对象，每个对象都有一个expirationDate属性的数组。我们的目标是筛选出所有expirationDate在当前日期之后（即尚未过期）的对象。

结合Moment.js进行日期比较

Moment.js提供了简洁的API来解析、操作和比较日期。moment.utc()可以确保日期以UTC时间解析，避免时区问题，而isAfter()方法则用于判断一个日期是否在另一个日期之后。

以下是一个包含过期和未过期数据的示例数组：

let dateOfObjects = [
  { expirationDate: "9999-12-31" },
  { expirationDate: "9999-12-31" },
  { expirationDate: "9999-12-31" },
  { expirationDate: "9999-12-31" },
  { expirationDate: "9999-12-31" },
  { expirationDate: "1999-12-31" }, // 这个日期已过期
];

为了筛选出未过期（expirationDate在当前日期之后）的对象，我们可以这样使用Moment.js和filter()：

const currentDate = moment(); // 获取当前日期和时间

const filteredObjects = dateOfObjects.filter((el) => {
  // 解析对象的expirationDate为Moment对象，并与当前日期比较
  return moment.utc(el.expirationDate).isAfter(currentDate);
});

console.log("原始数组 (未改变):", dateOfObjects);
console.log("筛选后的数组 (新数组):", filteredObjects);

在这个示例中，moment.utc(el.expirationDate).isAfter(currentDate)会为每个元素返回一个布尔值。如果为true，则该元素会被包含在新数组filteredObjects中。

常见误区与正确实践

初学者在使用filter()时常犯的错误是，在调用filter()后，期望原始数组dateOfObjects被修改。例如：

// 错误示例：没有保存filter()的返回值
dateOfObjects.filter((el) => {
  return moment.utc(el.expirationDate).isAfter(moment());
});

console.log(dateOfObjects); // 此时dateOfObjects仍然是原始数组，未被筛选

即使在filter()的回调函数中，moment.utc(el.expirationDate).isAfter(moment())正确地返回了true或false，但由于filter()的返回值没有被赋值给任何变量，原始数组dateOfObjects仍然保持不变。

正确做法是始终将filter()的返回值赋给一个新的变量：

// 正确示例：将filter()的返回值赋给新变量
const validDateObjects = dateOfObjects.filter((el) => {
  return moment.utc(el.expirationDate).isAfter(moment());
});

console.log(validDateObjects); // 这将输出筛选后的新数组

在异步函数中的应用

filter()方法的行为与它是否在async函数中无关。无论是同步代码还是异步代码，filter()的不可变性原则始终适用。

async function getAllValidDateStatuses() {
    let dateStatusEntities = null;
    // 假设这是从数据库获取数据
    dateStatusEntities = await this.dbService.getConnection().getRepository(StdDateStatusEntity).find();

    // 筛选操作，将结果赋值给新变量
    const validDateStatusEntities = dateStatusEntities.filter((el) => {
        return moment.utc(el.expirationDate).isAfter(moment());
    });

    // 返回筛选后的数据
    return this.populateMultiple(validDateStatusEntities);
}

在上述异步函数中，dateStatusEntities.filter(...)同样会返回一个新的数组。为了在后续处理（例如this.populateMultiple）中使用筛选后的数据，必须将其结果赋给一个新变量，如validDateStatusEntities。