本教程详细介绍了如何在javascript中高效地根据子字符串值过滤对象数组。文章首先展示了传统的`indexof`方法，随后深入探讨了es6中更现代、简洁的`string.prototype.match()`和`string.prototype.includes()`等方法，并通过实际代码示例对比了它们的用法、优缺点及适用场景，旨在帮助开发者选择最优方案进行数据筛选。
在前端开发中，我们经常需要处理包含多个对象的数组，并根据某个对象的属性值是否包含在另一个字符串中来进行筛选。例如，我们可能有一个用户列表，需要从中找出那些名字出现在某个特定字符串中的用户。本教程将通过一个具体的示例，详细讲解如何利用JavaScript的各种字符串匹配方法，特别是ES6的特性，来实现高效且简洁的对象数组筛选。
场景描述
假设我们有一个usecases数组，其中每个对象都包含usecaseId（姓名）、id和description等信息。同时，我们有一个字符串str，其中包含了我们希望筛选出的部分usecaseId。我们的目标是从usecases数组中过滤出那些usecaseId值存在于str字符串中的对象。
以下是示例数据：
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";传统方法：使用 String.prototype.indexOf()
在ES6之前，或者对于简单的子字符串查找，String.prototype.indexOf()是一个常用的方法。它返回子字符串在原字符串中第一次出现的索引，如果未找到则返回-1。
立即学习“Java免费学习笔记（深入）”；
const newArrIndexOf = usecases.filter(usecaseObj => {
// 如果indexOf返回-1，则表示未找到，条件为false
// 否则（返回0或正整数），表示找到，条件为true
return str.indexOf(usecaseObj.usecaseId) !== -1;
});
console.log("使用 indexOf 过滤结果:", newArrIndexOf);
/*
输出:
[
{ 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' }
]
*/这种方法直观且兼容性好，但在某些场景下，我们可以利用ES6的特性来编写更简洁、更具表达力的代码。
ES6方法一：使用 String.prototype.match()
String.prototype.match()方法检索一个字符串与正则表达式的匹配。当传入一个字符串参数而非正则表达式对象时，match()会隐式地将其转换为一个正则表达式。如果找到匹配项，它会返回一个包含匹配结果的数组；如果没有找到，则返回null。我们可以利用这一点来判断是否匹配成功。
const newArrMatch = usecases.filter(usecaseObj => {
// str.match(usecaseObj.usecaseId) 如果找到则返回一个数组（truthy），否则返回null（falsy）
// 双重非操作符 (!!) 将 truthy/falsy 值转换为真正的布尔值 true/false
return !!str.match(usecaseObj.usecaseId);
});
console.log("使用 match 过滤结果:", newArrMatch);
/*
输出与 indexOf 相同:
[
{ 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' }
]
*/match()方法在需要更复杂的模式匹配（例如，使用正则表达式的特殊字符）时非常强大。对于简单的子字符串检查，它的语义可能略显“重”一些，因为它返回的是一个数组，而我们只关心是否存在匹配。
ES6方法二：使用 String.prototype.includes()
String.prototype.includes()是ES6引入的一个方法，专门用于判断一个字符串是否包含另一个字符串。它返回一个布尔值（true或false），这使得它在进行简单子字符串判断时，代码更加简洁和语义化。
const newArrIncludes = usecases.filter(usecaseObj => {
// includes() 直接返回 true 或 false，无需额外的转换
return str.includes(usecaseObj.usecaseId);
});
console.log("使用 includes 过滤结果:", newArrIncludes);
/*
输出与前两者相同:
[
{ 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' }
]
*/方法对比与选择
| 特性/方法 | indexOf() | match() | includes() |
|---|---|---|---|
| 返回值 | 索引 (-1表示未找到) | 匹配数组或 null | 布尔值 (true/false) |
| 语义化 | 良好，但需判断 -1 | 适用于正则，简单子串略显复杂 | 极佳，直接表达“包含” |
| 简洁性 | 需 !== -1 | 需 !! 转换 | 最简洁，直接返回布尔值 |
| 性能 | 通常良好 | 涉及正则解析，可能略慢 | 通常良好，针对子串优化 |
| ES版本要求 | ES1 (普遍支持) | ES1 (普遍支持) | ES6 (现代浏览器支持良好) |
| 适用场景 | 简单子串查找，需兼容老旧环境 | 复杂模式匹配，子串查找也可 | 简单子串查找，推荐使用 |
从上述对比可以看出，对于本教程中的简单子字符串匹配需求，String.prototype.includes()是ES6中最推荐的方法。它提供了最佳的语义化和简洁性，代码可读性高，且性能表现良好。
总结
在JavaScript中根据子字符串值过滤对象数组是一个常见的操作。虽然String.prototype.indexOf()能够完成任务，但ES6引入的String.prototype.match()和String.prototype.includes()提供了更现代、更简洁的解决方案。
- 对于简单的子字符串存在性检查，强烈推荐使用String.prototype.includes()，因为它直接返回布尔值，代码最清晰。
- 如果你的需求涉及更复杂的模式匹配（例如，忽略大小写、匹配多个模式等），那么String.prototype.match()结合正则表达式将是更强大的选择。
通过选择合适的字符串匹配方法，你可以编写出更高效、更易于维护的JavaScript代码。
