Angular 中基于特定条件获取唯一 ID 的方法-js教程-PHP中文网

Angular 中基于特定条件获取唯一 ID 的方法

心靈之曲

发布： 2025-08-24 23:02:01

原创

391人浏览过

angular 中基于特定条件获取唯一 id 的方法

本文将详细介绍如何在 Angular 中，根据给定的 JSON 数据，筛选出满足特定条件的记录，并从中提取唯一的 ID 值。正如摘要所说，我们将使用 filter 和 map 方法来实现这一目标。

数据准备

首先，假设我们有以下 JSON 数据，它代表了一组用户的信息，包含 ID、姓名和个人数据：

const data =  [
  {
    "id": 1,
    "fname": "Tes1",
    "lname": "Testname1",
    "personaldata": {
      "bloodgroup": "A",
      "country": "IN",
      "email": "test1@example.com"
    }
  },
  {
    "id": 12,
    "fname": "Tes2",
    "lname": "Testname2",
    "personaldata": {
      "bloodgroup": "B",
      "country": "US",
      "email": "test2@example.com"
    }
  },
  {
    "id": 13,
    "fname": "Tes3",
    "lname": "Testname3",
    "personaldata": {
      "bloodgroup": "A",
      "country": "IN",
      "email": "test3@example.com"
    }
  },
   {
    "id": 1,
    "fname": "Tes4",
    "lname": "Testname4",
    "personaldata": {
      "bloodgroup": "A",
      "country": "IN",
      "email": "test4@example.com"
    }
  }
];

登录后复制

我们的目标是：筛选出 bloodgroup 为 "A" 且 country 为 "IN" 的记录，并提取这些记录的唯一 id 值。

过滤数据

第一步是使用 filter 方法，根据 bloodgroup 和 country 条件筛选数据：

const filteredData = data.filter(d => d.personaldata.bloodgroup === "A" && d.personaldata.country === 'IN');

登录后复制

这段代码会返回一个新的数组，其中只包含 bloodgroup 为 "A" 且 country 为 "IN" 的对象。

去除重复项

由于原始数据中可能存在重复的 ID，我们需要去除重复项。可以使用 filter 方法结合 indexOf 方法实现去重：

const distinctData = filteredData.filter((n, i) => filteredData.indexOf(n) === i);

登录后复制

这段代码会遍历 filteredData 数组，并保留第一次出现的元素，从而去除重复项。

Kits AI

Kits.ai 是一个为音乐家提供一站式AI音乐创作解决方案的网站，提供AI语音生成和免费AI语音训练

413

查看详情

提取 ID

最后，使用 map 方法提取每个对象的 id 值：

const distinctIds = distinctData.map(d => d.id);

登录后复制

这段代码会将 distinctData 数组转换为一个只包含 id 值的数组。

完整代码示例

将以上步骤组合起来，得到完整的代码如下：

const data =  [
  {
    "id": 1,
    "fname": "Tes1",
    "lname": "Testname1",
    "personaldata": {
      "bloodgroup": "A",
      "country": "IN",
      "email": "test1@example.com"
    }
  },
  {
    "id": 12,
    "fname": "Tes2",
    "lname": "Testname2",
    "personaldata": {
      "bloodgroup": "B",
      "country": "US",
      "email": "test2@example.com"
    }
  },
  {
    "id": 13,
    "fname": "Tes3",
    "lname": "Testname3",
    "personaldata": {
      "bloodgroup": "A",
      "country": "IN",
      "email": "test3@example.com"
    }
  },
   {
    "id": 1,
    "fname": "Tes4",
    "lname": "Testname4",
    "personaldata": {
      "bloodgroup": "A",
      "country": "IN",
      "email": "test4@example.com"
    }
  }
];

const distinctIds = data
  .filter(d => d.personaldata.bloodgroup === "A" && d.personaldata.country === 'IN')
  .filter((n, i) => data.indexOf(n) === i)
  .map(d => d.id);

console.log(distinctIds); // 输出: [1, 13]

登录后复制

注意事项

确保数据结构与代码中的访问方式一致，例如 d.personaldata.bloodgroup 和 d.personaldata.country。
indexOf 方法在大型数据集上的性能可能不高，可以考虑使用 Set 数据结构进行去重，以提高性能。例如：
```
const distinctIds = [...new Set(data
  .filter(d => d.personaldata.bloodgroup === "A" && d.personaldata.country === 'IN')
  .map(d => d.id))];
```
登录后复制