本文旨在探讨如何在JavaScript中高效地根据子字符串值过滤对象数组。我们将介绍多种现代JavaScript（ES6+）方法，包括使用`String.prototype.includes()`和`String.prototype.match()`，通过清晰的代码示例和对比分析，帮助开发者选择最适合其场景的解决方案，从而提升代码的可读性和维护性。
在JavaScript开发中，我们经常会遇到需要从一个对象数组中筛选出符合特定条件的对象。其中一个常见场景是，判断对象的某个属性值（一个字符串）是否包含在另一个给定的目标字符串中。例如，给定一个包含人物信息的数组和一个由多个名字组成的字符串，我们需要找出名字存在于该字符串中的人物对象。
问题场景描述
假设我们有一个usecases数组，其中每个对象都包含usecaseId（人物姓名）和其他信息。同时，我们有一个str字符串，其中列出了部分人物的姓名。我们的目标是过滤usecases数组，仅保留那些usecaseId值在str中出现的人物对象。
以下是示例数据结构：
立即学习“Java免费学习笔记（深入）”；
const usecases = [
{ usecaseId: 'Bill Gates', id: 1, description: 'CEO & founder, Microsoft' },
{ usecaseId: 'Mark Zuckerberg', id: 2, description: 'CEO, Facebook' },
{ usecaseId: 'Steve Jobs', id: 3, description: 'CEO & co-founder, Apple' },
{ usecaseId: 'Satya Nadella', id: 4, description: 'CEO, Microsoft' },
{ usecaseId: 'Elon Musk', id: 5, description: 'CEO, Tesla & SpaceX' },
{ usecaseId: 'Ginni Rometty', id: 6, description: 'CEO, IBM' },
{ usecaseId: 'Jeff Bezos', id: 7, description: 'CEO, Amazon' },
{ usecaseId: 'Larry Page', id: 8, description: 'CEO, Google' },
{ usecaseId: 'Jack Dorsey', id: 9, description: 'CEO, Twitter' },
{ usecaseId: 'Meg Whitman', id: 10, description: 'CEO, HP' },
{ usecaseId: 'Tim Cook', id: 11, description: 'CEO, Apple' },
{ usecaseId: 'Jeff Weiner', id: 12, description: 'CEO, LinkedIn' },
];
const str = "Bill Gates, Mark Zuckerberg, Tim Cook, Jeff Bezos, Steve Jobs";传统方法：使用 indexOf()
在ES6之前，常用的方法是利用 String.prototype.indexOf()。如果子字符串存在，indexOf()会返回其起始索引（非-1）；如果不存在，则返回-1。
const newArrWithIndexOf = usecases.filter(usecaseObj => {
// 如果 usecaseObj.usecaseId 在 str 中找到，indexOf 会返回其起始位置（>=0）
if (str.indexOf(usecaseObj.usecaseId) !== -1) {
return usecaseObj; // 返回 truthy 值以保留对象
}
});
console.log("使用 indexOf() 的结果:", newArrWithIndexOf);
/*
输出:
[
{ usecaseId: 'Bill Gates', id: 1, description: 'CEO & founder, Microsoft' },
{ usecaseId: 'Mark Zuckerberg', id: 2, description: 'CEO, Facebook' },
{ usecaseId: 'Steve Jobs', id: 3, description: 'CEO & co-founder, Apple' },
{ usecaseId: 'Jeff Bezos', id: 7, description: 'CEO, Amazon' },
{ usecaseId: 'Tim Cook', id: 11, description: 'CEO, Apple' }
]
*/这种方法虽然有效，但其判断条件 != -1 稍显冗长，可读性不如更现代的ES6方法。
现代JavaScript (ES6+) 解决方案
ES6及更高版本引入了更简洁、更具表达力的字符串方法，可以优化此类过滤操作。
1. 使用 String.prototype.includes()
String.prototype.includes() 是ES6引入的一个方法，它检查一个字符串是否包含另一个字符串，并返回 true 或 false。这使得代码更直观。
const newArrWithIncludes = usecases.filter(usecaseObj => {
// 直接判断 str 是否包含 usecaseObj.usecaseId
return str.includes(usecaseObj.usecaseId);
});
console.log("使用 includes() 的结果:", newArrWithIncludes);
/*
输出与 indexOf() 相同
*/优点：
- 可读性强： includes() 的语义非常明确，代码意图一目了然。
- 简洁： 无需进行 -1 的比较。
2. 使用 String.prototype.match() 结合正则表达式
String.prototype.match() 方法检索一个字符串与正则表达式进行匹配的结果。如果匹配成功，它返回一个包含匹配结果的数组；如果未匹配成功，则返回 null。我们可以利用这一点，并通过双重非运算符 !! 将结果转换为布尔值。
const newArrWithMatch = usecases.filter(usecaseObj => {
// str.match() 返回匹配数组或 null。
// !! 将数组转换为 true，将 null 转换为 false。
return !!str.match(usecaseObj.usecaseId);
});
console.log("使用 match() 的结果:", newArrWithMatch);
/*
输出与 indexOf() 相同
*/优点：
- 灵活性： match() 接受正则表达式作为参数，这使得它在处理更复杂的模式匹配（如忽略大小写、匹配单词边界等）时非常强大。
- 简洁的布尔转换： !! 运算符是JavaScript中将值强制转换为布尔值的常见且简洁的方式。
注意事项： 当 usecaseObj.usecaseId 包含特殊正则表达式字符（如 . * + ? ( ) [ ] { } \ | ^ $）时，直接将其作为 match() 的参数可能会导致意外行为，因为它会被解释为正则表达式模式的一部分。对于纯粹的子字符串匹配，includes() 通常是更安全、更简单的选择。如果确实需要使用 match() 且子字符串可能包含特殊字符，应先对子字符串进行转义，例如：
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}
const newArrWithMatchEscaped = usecases.filter(usecaseObj => {
const escapedId = escapeRegExp(usecaseObj.usecaseId);
return !!str.match(escapedId);
});3. 使用 String.prototype.search() 结合正则表达式
String.prototype.search() 方法执行一个正则表达式的搜索匹配。它返回第一个匹配的索引，如果未找到则返回 -1。这与 indexOf() 类似，但它接受正则表达式。
const newArrWithSearch = usecases.filter(usecaseObj => {
// search() 返回索引或 -1，所以需要与 -1 比较
return str.search(usecaseObj.usecaseId) !== -1;
});
console.log("使用 search() 的结果:", newArrWithSearch);
/*
输出与 indexOf() 相同
*/优点：
- 支持正则表达式： 同样提供了正则表达式的强大功能。
注意事项： 与 match() 类似，search() 也将参数解释为正则表达式。因此，当子字符串可能包含特殊正则表达式字符时，也需要进行转义处理。
总结与选择建议
在根据子字符串值过滤对象数组的场景中，现代JavaScript提供了多种高效且可读的方法：
-
String.prototype.includes()：
- 推荐用于： 最简单、最常见的纯粹子字符串存在性检查。
- 优点： 语法简洁，语义清晰，无需担心正则表达式特殊字符转义。
- 缺点： 不支持正则表达式，无法进行复杂的模式匹配（如忽略大小写）。
-
String.prototype.match() 或 String.prototype.search()：
- 推荐用于： 需要进行复杂模式匹配（如忽略大小写、匹配单词边界等）的场景。
- 优点： 强大的正则表达式支持。
- 缺点： 对于纯粹的子字符串检查，可能略显复杂；需要注意正则表达式特殊字符的转义。
对于本文所示的简单子字符串匹配场景，String.prototype.includes() 是最推荐的选择，因为它提供了最佳的可读性和简洁性。如果未来需求变得更复杂，需要正则表达式的强大功能，那么 match() 或 search() 将是更合适的工具，但请务必注意处理潜在的特殊字符。通过合理选择这些ES6+特性，可以显著提升JavaScript代码的质量和维护性。
