JavaScript：根据另一数组匹配值过滤对象数组并提取特定属性

场景描述与需求分析

在前端开发或数据处理中，我们经常会遇到这样的需求：给定一个包含多个配置项或数据对象的数组，以及一个包含特定标识符或值的数组。我们的目标是从第一个数组中找出与第二个数组中值相匹配的对象，并从中提取出我们感兴趣的特定属性，形成一个新的结果数组。

例如，我们有以下两个数组：

const raceOptions = [
    { "label": "race_option_american_indian_alaska_native", "value": "American Indian/Alaska Native" },
    { "label": "race_option_asian", "value": "Asian" },
    { "label": "race_option_black_african_american", "value": "Black/African American" },
    { "label": "race_option_native_hawaiian_pacific_islander", "value": "Native Hawaiian or Other Pacific Islander" },
    { "label": "race_option_white", "value": "White" },
    { "label": "prefer_not_to_say", "value": "" }
];

const selectedRace = [
    "American Indian/Alaska Native",
    "Native Hawaiian or Other Pacific Islander",
    "Black/African American"
];

我们希望根据 selectedRace 中的值，从 raceOptions 中找到匹配项，并提取其对应的 label 属性，最终得到以下结果：

const filteredArray = [
  'race_option_american_indian_alaska_native',
  'race_option_native_hawaiian_pacific_islander',
  'race_option_black_african_american'
];

接下来，我们将介绍两种实现此功能的方法。

实现方法一：使用 forEach 和 find

这种方法的核心思想是遍历 selectedRace 数组，对于 selectedRace 中的每一个元素，都在 raceOptions 数组中查找匹配的 value。如果找到匹配的对象，就将其 label 属性添加到结果数组中。

立即学习“Java免费学习笔记（深入）”；

代码示例：

const raceOptions = [
    { "label": "race_option_american_indian_alaska_native", "value": "American Indian/Alaska Native" },
    { "label": "race_option_asian", "value": "Asian" },
    { "label": "race_option_black_african_american", "value": "Black/African American" },
    { "label": "race_option_native_hawaiian_pacific_islander", "value": "Native Hawaiian or Other Pacific Islander" },
    { "label": "race_option_white", "value": "White" },
    { "label": "prefer_not_to_say", "value": "" }
];

const selectedRace = [
    "American Indian/Alaska Native",
    "Native Hawaiian or Other Pacific Islander",
    "Black/African American"
];

let filteredArray = [];

selectedRace.forEach(selectedValue => {
    // 在 raceOptions 中查找 value 属性与 selectedValue 匹配的对象
    const foundOption = raceOptions.find(option => option.value === selectedValue);

    // 如果找到匹配项，则将其 label 属性添加到结果数组
    if (foundOption) {
        filteredArray.push(foundOption.label);
    }
});

console.log(filteredArray);
// 预期输出: ["race_option_american_indian_alaska_native", "race_option_native_hawaiian_pacific_islander", "race_option_black_african_american"]

解析：

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

36

查看详情

• selectedRace.forEach(selectedValue => { ... })：遍历 selectedRace 数组中的每个字符串元素。
• raceOptions.find(option => option.value === selectedValue)：在每次迭代中，find 方法会在 raceOptions 数组中寻找第一个满足条件的元素。条件是该元素的 value 属性与当前的 selectedValue 严格相等。
• if (foundOption)：如果 find 方法找到了匹配项（即 foundOption 不为 undefined），则执行下一步。
• filteredArray.push(foundOption.label)：将找到的对象的 label 属性添加到 filteredArray 中。

实现方法二：使用 filter 和 map (推荐)

filter 和 map 是 JavaScript 数组原型上非常强大的函数式方法，它们通常能以更简洁、更具声明性的方式解决此类问题。

1. filter(): 首先，我们使用 filter 方法从 raceOptions 数组中筛选出所有其 value 存在于 selectedRace 数组中的对象。
2. map(): 接着，我们对筛选出的对象数组使用 map 方法，将每个对象转换为其 label 属性。

代码示例：

const raceOptions = [
    { "label": "race_option_american_indian_alaska_native", "value": "American Indian/Alaska Native" },
    { "label": "race_option_asian", "value": "Asian" },
    { "label": "race_option_black_african_american", "value": "Black/African American" },
    { "label": "race_option_native_hawaiian_pacific_islander", "value": "Native Hawaiian or Other Pacific Islander" },
    { "label": "race_option_white", "value": "White" },
    { "label": "prefer_not_to_say", "value": "" }
];

const selectedRace = [
    "American Indian/Alaska Native",
    "Native Hawaiian or Other Pacific Islander",
    "Black/African American"
];

const filteredArray = raceOptions
    .filter(option => selectedRace.includes(option.value)) // 筛选出 value 属性在 selectedRace 中的对象
    .map(option => option.label);                          // 将筛选出的对象映射为其 label 属性

console.log(filteredArray);
// 预期输出: ["race_option_american_indian_alaska_native", "race_option_native_hawaiian_pacific_islander", "race_option_black_african_american"]

解析：

• raceOptions.filter(option => selectedRace.includes(option.value))：filter 方法会遍历 raceOptions 中的每个 option 对象。selectedRace.includes(option.value) 检查当前 option 的 value 是否存在于 selectedRace 数组中。如果为 true，则该 option 对象会被保留到新的中间数组中。
• .map(option => option.label)：在 filter 操作完成后，得到一个包含匹配对象的数组。map 方法会遍历这个中间数组，并对每个 option 对象返回其 label 属性，最终形成我们所需的结果数组 filteredArray。

性能考量与注意事项

1. 时间复杂度：

   • forEach + find 方法： 如果 selectedRace 的长度为 M，raceOptions 的长度为 N，则 forEach 循环 M 次，每次循环内部 find 操作最坏情况下需要遍历 N 次。因此，总的时间复杂度为 O(M * N)。
   • filter + map 方法： filter 操作遍历 N 次 raceOptions，每次内部 includes 操作最坏情况下需要遍历 M 次 selectedRace。map 操作遍历 N 次（或更少，取决于过滤结果）。因此，总的时间复杂度也是 O(N * M)。

2. 优化大型数据集： 当 selectedRace 数组非常大时，selectedRace.includes() 或 find 内部的线性查找会成为性能瓶颈。为了优化查找效率，可以将 selectedRace 转换为 Set 对象。Set 对象的 has() 方法具有平均 O(1) 的时间复杂度，这在查找大量元素时能显著提升性能。

   使用 Set 优化 filter + map：

   const raceOptions = [
       { "label": "race_option_american_indian_alaska_native", "value": "American Indian/Alaska Native" },
       { "label": "race_option_asian", "value": "Asian" },
       { "label": "race_option_black_african_american", "value": "Black/African American" },
       { "label": "race_option_native_hawaiian_pacific_islander", "value": "Native Hawaiian or Other Pacific Islander" },
       { "label": "race_option_white", "value": "White" },
       { "label": "prefer_not_to_say", "value": "" }
   ];
   
   const selectedRace = [
       "American Indian/Alaska Native",
       "Native Hawaiian or Other Pacific Islander",
       "Black/African American"
   ];
   
   const selectedRaceSet = new Set(selectedRace); // 将 selectedRace 转换为 Set，O(M)
   
   const filteredArrayOptimized = raceOptions
       .filter(option => selectedRaceSet.has(option.value)) // 使用 Set 的 has() 方法进行 O(1) 查找，总 O(N)
       .map(option => option.label);                        // O(N)
   
   console.log(filteredArrayOptimized);
   // 预期输出: ["race_option_american_indian_alaska_native", "race_option_native_hawaiian_pacific_islander", "race_option_black_african_american"]

   登录后复制

   这种优化将 filter 阶段的时间复杂度从 O(N * M) 降低到 O(N)（加上创建 Set 的 O(M)），在处理大量数据时效果

以上就是JavaScript：根据另一数组匹配值过滤对象数组并提取特定属性的详细内容，更多请关注php中文网其它相关文章！