Angular 5-9中如何用正则过滤对象数组并分离无效邮箱对象？

我来帮你搞定这个数组过滤的需求！咱们按照要求一步步实现，把符合条件的有效项和邮箱格式无效的项分别存到不同变量里。

先明确规则 #

咱们的过滤逻辑要满足两个核心条件：

• title 和 name 属性必须仅包含英文字母（匹配正则 /^[A-Za-z]+$/）
• 邮箱必须符合有效格式（匹配正则 /[a-zA-Z0-9.-]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}/）

具体实现步骤 #

1. 定义可复用的正则常量

先把要用的正则抽成常量，方便后续维护和修改：

// 仅匹配英文字母的正则
const onlyLettersRegex = /^[A-Za-z]+$/;
// 验证有效邮箱格式的正则
const validEmailRegex = /[a-zA-Z0-9.-]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}/;

2. 用reduce一次遍历完成分组

数组的reduce方法非常适合这种分组场景，只需要遍历一次数组，就能同时得到有效项和邮箱无效项。在Angular组件里可以这样写：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-item-filter',
  templateUrl: './item-filter.component.html'
})
export class ItemFilterComponent implements OnInit {
  // 示例数组
  items = [
    { title: "This is title", email: "testtest.com", status: "confirmed" },
    { title: "This another one", email: "someone@something.com", status: "pending" },
    { title: "Just a random string", email: "me@you.co.uk", status: "pending" }
  ];

  // 存储有效项
  validItems: typeof this.items = [];
  // 存储邮箱无效的项
  invalidEmailItems: typeof this.items = [];

  ngOnInit(): void {
    const onlyLettersRegex = /^[A-Za-z]+$/;
    const validEmailRegex = /[a-zA-Z0-9.-]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}/;

    // 用reduce分组数组
    const groupedResult = this.items.reduce((acc, currentItem) => {
      // 验证title（如果对象有name属性，记得加上currentItem.name?.match(onlyLettersRegex)）
      const isTitleValid = currentItem.title.match(onlyLettersRegex);
      // 验证邮箱格式
      const isEmailValid = currentItem.email.match(validEmailRegex);

      if (isTitleValid && isEmailValid) {
        // 同时满足title和邮箱要求，归入有效项
        acc.valid.push(currentItem);
      } else if (!isEmailValid) {
        // 邮箱无效，单独存入对应变量
        acc.invalidEmail.push(currentItem);
      }
      // 如需处理其他情况（比如title无效但邮箱有效），可以在这里补充逻辑
      return acc;
    }, { valid: [], invalidEmail: [] } as { valid: typeof this.items, invalidEmail: typeof this.items });

    // 把分组结果赋值给组件变量
    this.validItems = groupedResult.valid;
    this.invalidEmailItems = groupedResult.invalidEmail;

    // 控制台查看结果（可选）
    console.log('有效项：', this.validItems);
    console.log('邮箱无效项：', this.invalidEmailItems);
  }
}

3. 结果说明

针对你提供的示例数组，运行后：

• invalidEmailItems 会包含第一个对象（邮箱testtest.com缺少@符号，不符合格式）
• validItems 会包含后两个对象（title符合仅字母要求，邮箱格式也正确）

补充提示 #

如果你的对象里包含name属性，记得在验证逻辑里加上currentItem.name?.match(onlyLettersRegex)的判断；要是需要调整正则规则，直接修改常量即可，非常灵活。

内容的提问来源于stack exchange，提问作者Nishant Panwar