场景描述与需求分析
在前端开发或数据处理中，我们经常会遇到这样的需求：给定一个包含多个配置项或数据对象的数组，以及一个包含特定标识符或值的数组。我们的目标是从第一个数组中找出与第二个数组中值相匹配的对象，并从中提取出我们感兴趣的特定属性，形成一个新的结果数组。
例如，我们有以下两个数组：
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"]解析：
- 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 数组原型上非常强大的函数式方法，它们通常能以更简洁、更具声明性的方式解决此类问题。
- filter(): 首先，我们使用 filter 方法从 raceOptions 数组中筛选出所有其 value 存在于 selectedRace 数组中的对象。
- 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。
性能考量与注意事项
-
时间复杂度：
- 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)。
-
优化大型数据集： 当 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)），在处理大量数据时效果
