如何基于另一个数组的匹配值筛选并提取JavaScript对象数组中的特定字段-js教程-PHP中文网

如何基于另一个数组的匹配值筛选并提取JavaScript对象数组中的特定字段

本教程详细介绍了如何在JavaScript中根据一个简单值数组来筛选并提取另一个复杂对象数组中的特定字段。我们将通过示例数据，演示如何利用数组的forEach、find以及更现代的filter和map方法，高效地实现数据匹配和转换，最终生成所需的目标数组，帮助开发者掌握灵活处理数组数据的技巧。

引言：数据筛选与转换的需求

在日常的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数组，并在每次迭代中，使用find方法在raceOptions数组中查找匹配的项。一旦找到匹配项，就将其label属性添加到结果数组中。

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

实现步骤：

初始化一个空数组filteredArray，用于存储最终结果。
遍历selectedRace数组中的每个元素。
对于selectedRace中的每个元素（例如element），使用raceOptions.find()方法查找raceOptions中value属性与element相等的对象。
如果find()方法找到了匹配的对象（即返回非null或undefined），则将该对象的label属性添加到filteredArray中。

示例代码：

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(element => {
    // 在 raceOptions 中查找 value 属性与当前 element 匹配的对象
    const foundOption = raceOptions.find(option => option.value === element);

    // 如果找到了匹配项，则将其 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' ]

登录后复制

代码解析：

selectedRace.forEach(element => { ... });：循环遍历selectedRace数组中的每个字符串值。
raceOptions.find(option => option.value === element)：对于selectedRace中的每个element，find方法会在raceOptions中寻找第一个value属性与element严格相等（===）的对象。如果找到，则返回该对象；否则返回undefined。
if (foundOption) { filteredArray.push(foundOption.label); }：这是一个条件判断，确保只有在find方法成功找到匹配对象时，才将其label属性推入filteredArray。

方法二：更简洁的函数式编程方法 (filter 和 map)

JavaScript提供了强大的函数式编程工具，如filter和map，它们可以使代码更具声明性且通常更简洁。这种方法首先筛选出raceOptions中所有匹配的项，然后将这些匹配项转换为我们所需的label数组。

即构数智人

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

查看详情

实现步骤：

使用filter方法遍历raceOptions数组，筛选出所有value属性存在于selectedRace数组中的对象。
对筛选出的对象数组使用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"
];

// 为了优化查找性能，将 selectedRace 转换为 Set
const selectedRaceSet = new Set(selectedRace);

const filteredArrayFunctional = raceOptions
    .filter(option => selectedRaceSet.has(option.value)) // 筛选出 value 存在于 selectedRaceSet 中的对象
    .map(option => option.label); // 从筛选出的对象中提取 label

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

登录后复制

代码解析：

const selectedRaceSet = new Set(selectedRace);：为了提高查找效率，我们将selectedRace数组转换为一个Set。Set数据结构在判断元素是否存在时（has()方法）的时间复杂度通常是O(1)，而数组的includes()方法是O(N)。对于大型数组，使用Set可以显著提升性能。
.filter(option => selectedRaceSet.has(option.value))：这个filter操作会遍历raceOptions数组。对于每个option对象，它检查option.value是否存在于selectedRaceSet中。只有当selectedRaceSet.has(option.value)返回true时，该option对象才会被保留在新数组中。
.map(option => option.label)：在filter操作之后，我们得到一个只包含匹配对象的数组。map操作会遍历这个新数组，并对每个option对象返回其label属性，最终形成一个只包含label字符串的数组。

注意事项与性能考量

性能差异：
- 方法一 (forEach + find)：对于selectedRace中的每个元素，find方法都会遍历raceOptions数组（最坏情况O(N)）。如果selectedRace有M个元素，raceOptions有N个元素，则总时间复杂度大约是O(M * N)。
- 方法二 (filter + map + Set)：将selectedRace转换为Set是O(M)。filter操作遍历raceOptions（O(N)），每次查找Set是O(1)。map操作遍历筛选后的数组（最坏情况O(N)）。因此，总时间复杂度大约是O(M + N)。
- 结论：当selectedRace和raceOptions数组都较大时，方法二（使用Set优化）通常会比方法一有更好的性能表现。对于小型数组，两种方法的性能差异不明显。
可读性与维护性：
- 函数式编程方法（filter + map）通常被认为更具声明性，代码意图更清晰，也更容易阅读和维护，因为它避免了显式的循环和状态管理。
- forEach + find方法则更偏向命令式，对于初学者可能更容易理解其执行流程。
空值或未找到匹配项的处理：
- 两种方法都能妥善处理selectedRace中包含raceOptions中不存在的值的情况。find会返回undefined，Set.has()会返回false，这些不匹配的项都不会导致错误，也不会被添加到结果数组中。
- 如果raceOptions中存在value为空字符串的项（如prefer_not_to_say），并且selectedRace中也包含空字符串，它们同样会被匹配。