Angular高效筛选JSON数据技巧

本篇文章向大家介绍《Angular中高效筛选JSON数据方法》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

数据筛选需求分析

在前端开发中，尤其是在Angular这类单页应用框架中，经常会遇到需要对数据进行精细化筛选的场景。一个常见的需求是，我们拥有一份包含所有详细信息的完整数据集（例如，所有车辆记录），同时又有一份只包含特定标识符（如车辆ID）的参考数据集。我们的目标是，从完整数据集中提取出那些ID与参考数据集中ID相匹配的记录。

以车辆数据为例： 假设我们有一个包含所有车辆详细信息的JSON数组（JSON A），结构如下：

[
  {
    "id": 100,
    "brand": "Tes1",
    "vname": "Testname1"
  },
  {
    "id": 200,
    "brand": "Tes2",
    "vname": "Testname2"
  },
  {
    "id": 300,
    "brand": "Tes3",
    "vname": "Testname3"
  }
]

同时，我们有另一个JSON数组（JSON B），它只包含我们感兴趣的车辆ID：

[
  {
    "id": 100
  },
  {
    "id": 300
  }
]

我们的期望结果是，从JSON A中筛选出ID为100和300的车辆记录：

[
  {
    "id": 100,
    "brand": "Tes1",
    "vname": "Testname1"
  },
  {
    "id": 300,
    "brand": "Tes3",
    "vname": "Testname3"
  }
]

解决方案：结合使用 Array.prototype.filter() 和 Array.prototype.some()

JavaScript提供了强大的数组原型方法，可以高效地处理这类数据筛选任务。本教程将介绍如何结合使用Array.prototype.filter()和Array.prototype.some()来实现上述需求。

Array.prototype.filter() 简介

filter()方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。它遍历数组中的每个元素，并对每个元素执行一个回调函数。如果回调函数返回true，则该元素被包含在新数组中；如果返回false，则被排除。

Array.prototype.some() 简介

some()方法测试数组中是不是至少有一个元素通过了由提供的函数实现的测试。它返回一个布尔值。如果数组中至少有一个元素满足条件，则some()返回true；否则，返回false。

实现步骤与代码示例

结合使用filter()和some()的逻辑是：对于JSON A中的每一个车辆记录，我们使用filter()进行迭代。在filter()的回调函数内部，我们再使用some()来检查当前车辆记录的id是否存在于JSON B的任何一个元素中。

以下是具体的代码实现：

// 原始的完整车辆数据 (JSON A)
const vehicleRecords = [
  { id: 100, brand: 'Tes1', vname: 'Testname1' },
  { id: 200, brand: 'Tes2', vname: 'Testname2' },
  { id: 300, brand: 'Tes3', vname: 'Testname3' },
];

// 包含待筛选ID的列表 (JSON B)
const selectedIds = [
  { id: 100 },
  { id: 300 },
];

// 使用 filter 和 some 进行数据筛选
const filteredVehicles = vehicleRecords.filter(itemA => 
  selectedIds.some(itemB => itemB.id === itemA.id)
);

console.log(filteredVehicles);

/*
期望输出：
[
  { id: 100, brand: 'Tes1', vname: 'Testname1' },
  { id: 300, brand: 'Tes3', vname: 'Testname3' }
]
*/

代码解析

1. vehicleRecords.filter(itemA => ...):

   • filter()方法被调用在vehicleRecords数组上。
   • itemA代表vehicleRecords数组中的每一个元素（即每一个车辆记录对象）。
   • filter()将根据其回调函数的返回值（true或false）来决定是否将itemA包含到最终结果filteredVehicles中。

2. selectedIds.some(itemB => itemB.id === itemA.id):

   • 这是filter()方法内部的回调函数。
   • some()方法被调用在selectedIds数组上。
   • itemB代表selectedIds数组中的每一个元素（即每一个包含ID的对象）。
   • itemB.id === itemA.id是some()方法的条件判断。它检查当前vehicleRecords中的itemA的id是否与selectedIds中的任何一个itemB的id相等。
   • 如果selectedIds中存在一个itemB的id与itemA.id相等，那么some()会立即返回true。
   • 如果selectedIds遍历完所有元素都没有找到匹配的ID，那么some()会返回false。

3. 整体流程: filter()遍历vehicleRecords中的每个itemA。对于每个itemA，它会问：“itemA.id是否存在于selectedIds中？”如果some()返回true，则itemA被保留；如果some()返回false，则itemA被丢弃。最终，filteredVehicles将只包含那些ID匹配的车辆记录。

性能优化考量

上述方法对于中小型数据集非常有效且易于理解。然而，当selectedIds数组非常大时，some()方法在最坏情况下需要遍历整个selectedIds数组，这会导致O(N*M)的时间复杂度（N为vehicleRecords长度，M为selectedIds长度）。

为了提高性能，特别是当selectedIds非常大时，可以将selectedIds转换为一个Set对象。Set数据结构提供了O(1)的平均时间复杂度来检查元素是否存在。

// 原始的完整车辆数据 (JSON A)
const vehicleRecordsOptimized = [
  { id: 100, brand: 'Tes1', vname: 'Testname1' },
  { id: 200, brand: 'Tes2', vname: 'Testname2' },
  { id: 300, brand: 'Tes3', vname: 'Testname3' },
];

// 包含待筛选ID的列表 (JSON B)
const selectedIdsOptimized = [
  { id: 100 },
  { id: 300 },
];

// 将 selectedIds 转换为 Set 以优化查找性能
const idSet = new Set(selectedIdsOptimized.map(item => item.id));

// 使用 filter 和 Set 进行数据筛选
const filteredVehiclesOptimized = vehicleRecordsOptimized.filter(itemA => 
  idSet.has(itemA.id)
);

console.log(filteredVehiclesOptimized);

优化解析：

1. const idSet = new Set(selectedIdsOptimized.map(item => item.id));:
   • selectedIdsOptimized.map(item => item.id)首先从selectedIdsOptimized数组中提取出所有的ID，生成一个纯ID数组[100, 300]。
   • new Set(...)将这个ID数组转换为一个Set对象。构建Set的时间复杂度大致为O(M)。
2. idSet.has(itemA.id):
   • 在filter()的回调函数中，我们不再使用some()遍历数组，而是直接使用Set的has()方法来检查itemA.id是否存在于idSet中。has()方法的平均时间复杂度为O(1)。
   • 这样，整个筛选过程的时间复杂度优化为O(N + M)，在处理大数据量时，性能提升显著。

总结

本文详细介绍了在Angular（及任何JavaScript环境）中，如何根据一个JSON数组的ID列表来筛选另一个JSON数组的记录。我们首先展示了使用Array.prototype.filter()结合Array.prototype.some()的直观方法，该方法简洁明了，适用于大多数场景。随后，为了应对大数据量时的性能挑战，我们进一步提出了将参考ID列表转换为Set进行优化的策略，显著提升了查找效率。开发者可以根据实际数据规模和性能要求，选择最适合的实现方式。

到这里，我们也就讲完了《Angular高效筛选JSON数据技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！