本教程旨在介绍如何在javascript中高效地根据子字符串值筛选对象数组。我们将探讨两种主要方法：一种是利用`string.prototype.indexof()`的传统方式，另一种是采用es6特性，通过`string.prototype.match()`结合正则表达式进行优化，以实现更简洁、可读性更强的代码。
在JavaScript开发中，我们经常需要从一个包含多个对象的数组中，根据特定条件筛选出符合要求的部分。本教程将聚焦于一个常见场景：给定一个对象数组，每个对象含有一个唯一标识符（例如usecaseId），以及一个包含多个标识符的字符串，我们需要找出那些其usecaseId存在于该字符串中的对象。
初始数据结构
为了演示，我们使用以下示例数据：一个名为usecases的对象数组，以及一个名为str的字符串，其中包含了一些usecaseId值。
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";我们的目标是从usecases数组中筛选出那些usecaseId值出现在str字符串中的对象。
传统方法：使用 String.prototype.indexOf()
在ES6普及之前，或者对于简单的子字符串查找，我们通常会使用Array.prototype.filter()方法结合String.prototype.indexOf()来实现。
立即学习“Java免费学习笔记（深入）”；
Array.prototype.filter()方法会遍历数组中的每个元素，并对每个元素执行一个回调函数。如果回调函数返回true，则该元素会被包含在新数组中；如果返回false，则会被排除。
String.prototype.indexOf()方法用于查找指定子字符串在字符串中第一次出现的索引。如果找到，返回该子字符串的起始索引；如果未找到，则返回-1。
以下是使用indexOf()实现筛选的代码示例：
const newArrIndexOf = usecases.filter(usecaseObj => {
// 如果 usecaseId 在 str 中找到，indexOf 会返回 >= 0 的索引
// 否则返回 -1
if (str.indexOf(usecaseObj.usecaseId) !== -1) {
return true; // 保留该对象
}
return false; // 过滤掉该对象
});
console.log("使用 indexOf 的结果:", newArrIndexOf);代码解析：
此方法通过遍历usecases数组，对每个usecaseObj，检查其usecaseId属性值是否在str中。str.indexOf(usecaseObj.usecaseId)会返回子字符串在原字符串中的起始索引，如果未找到则返回-1。因此，当结果不等于-1时，表示找到了匹配项，filter方法会保留该对象。
ES6优化方法：使用 String.prototype.match()
ES6及后续版本提供了更多简洁和强大的特性，可以优化此类筛选操作。其中，String.prototype.match()方法结合正则表达式是实现这一目标的一种优雅方式。
String.prototype.match()方法用于将字符串与正则表达式进行匹配。它会返回一个包含匹配结果的数组，或者在没有找到匹配项时返回null。
我们可以利用match()的这一特性，并通过双重非运算符!!将结果转换为布尔值，从而在filter回调函数中直接使用：
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);代码解析：
str.match(usecaseObj.usecaseId)尝试在str中查找与usecaseObj.usecaseId匹配的子字符串。如果找到，它会返回一个包含匹配信息的数组；如果没有找到，则返回null。通过在前面加上双重非运算符!!，我们可以将这个结果直接转换为布尔值：null变为false，非null值（即找到匹配项）变为true。这种方式使得代码更加简洁和富有表达力。
两种方法的比较与注意事项
-
简洁性与可读性：
- match()结合!!的方式通常被认为是更简洁和现代的JavaScript写法，尤其是在处理布尔逻辑时。它将匹配和布尔转换融合到一行代码中，提高了可读性。
- indexOf()虽然直观，但需要显式地与-1进行比较。
-
灵活性：
- match()方法接受正则表达式作为参数，这意味着如果未来需要更复杂的匹配逻辑（例如，不区分大小写、匹配特定模式而非精确子字符串），可以轻松扩展正则表达式而无需改变筛选结构。例如，要实现不区分大小写的匹配，可以将usecaseObj.usecaseId转换为new RegExp(usecaseObj.usecaseId, 'i')。
- 相比之下，indexOf()只能进行精确的子字符串匹配，不具备正则表达式的强大功能。
-
性能：
- 对于小型数据集和简单的子字符串查找，两种方法的性能差异通常可以忽略不计。
- 但在处理超大数据集或极高频率调用时，性能可能需要进一步测试和分析。正则表达式引擎的开销可能略高于简单的indexOf查找，但在现代JavaScript引擎中，这种差异通常很小，且match在某些场景下可能因为其底层优化而表现良好。对于大多数Web应用场景，match的优势在于其表达力和灵活性。
总结
综上所述，无论是使用传统的indexOf()还是ES6的match()方法，JavaScript都提供了灵活的工具来根据子字符串值筛选对象数组。在追求代码简洁性、可读性以及未来可扩展性方面，推荐采用match()结合正则表达式的ES6优化方案。选择哪种方法取决于具体的项目需求、团队编码规范以及对性能的考量。对于需要更复杂匹配模式的场景，match()的优势将更加明显。
