JavaScript中基于子字符串值筛选对象数组的ES6优化实践

本文深入探讨了在javascript中根据给定字符串的子串值来高效筛选对象数组的方法。我们将从传统的`indexof`方法入手，逐步介绍es6中更现代化、更具可读性的`string.prototype.match`和`string.prototype.includes`等优化方案，并通过代码示例和最佳实践，帮助开发者选择最适合其场景的字符串匹配和数组过滤策略。

1. 理解核心问题：基于子字符串筛选对象

在前端开发中，我们经常遇到需要从一个对象集合中，根据某个对象的特定属性值是否包含在另一个字符串中来筛选数据的情况。例如，我们有一个包含多位企业高管信息的数组，以及一个包含特定高管姓名的字符串，目标是找出这些指定高管的详细信息。

假设我们有以下数据结构：

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 字符串中的所有对象。

2. 传统方法：使用 String.prototype.indexOf()

在ES6之前，或者对于简单的子字符串查找，String.prototype.indexOf() 是一个常用的方法。它返回子字符串在原字符串中首次出现的索引，如果未找到则返回 -1。

以下是使用 indexOf() 实现筛选的示例代码：

const newArrIndexOf = usecases.filter(usecaseObj => {
    // indexOf 返回 -1 表示未找到，否则返回索引
    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' }
]
*/

这种方法功能上是正确的，但从代码可读性上来说，!== -1 的判断略显冗余。

3. ES6优化方案一：使用 String.prototype.match()

String.prototype.match() 方法用于将字符串与正则表达式进行匹配。如果匹配成功，它会返回一个包含匹配结果的数组；如果未找到任何匹配，则返回 null。利用这一特性，我们可以对其返回值进行布尔转换来判断是否存在匹配。

const newArrMatch = usecases.filter(usecaseObj => {
    // match 返回 null 或匹配数组。
    // !! 将 null 转换为 false，将数组转换为 true。
    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 方法的返回值（null 或数组）强制转换为布尔值，使其可以直接用于 filter 方法的条件判断。这种写法简洁明了，并且当需要更复杂的模式匹配时，可以方便地扩展为正则表达式。

4. ES6优化方案二：使用 String.prototype.includes()

String.prototype.includes() 是ES6引入的一个更现代、更直观的字符串方法，用于判断一个字符串是否包含在另一个字符串中。它直接返回一个布尔值（true 或 false），省去了 indexOf() !== -1 的判断。

const newArrIncludes = usecases.filter(usecaseObj => {
    // includes 直接返回 true 或 false
    return str.includes(usecaseObj.usecaseId);
});

console.log("使用 includes 筛选结果:", newArrIncludes);
/*
输出与 indexOf 和 match 相同:
[
  { 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' }
]
*/

对于简单的子字符串存在性检查，includes() 方法是ES6中最推荐的选择，因为它语义清晰，代码可读性极高。

5. 进阶考量与最佳实践

在实际开发中，除了上述基本用法，还有一些进阶考量：

• 性能： 对于大多数场景，includes() 通常在性能上与 indexOf() 相近，甚至在某些引擎中可能略优。match() 由于涉及正则表达式引擎，对于非常简单的子字符串匹配可能会有轻微的性能开销，但在处理复杂模式时其优势明显。在绝大多数应用中，这种性能差异微乎其微，不应成为选择方法的主要依据。
• 大小写敏感性： indexOf()、includes() 和 match() 默认都是大小写敏感的。如果需要进行大小写不敏感的匹配，可以先将字符串转换为统一大小写（例如都转为小写），再进行比较。

  // 示例：大小写不敏感匹配
  const searchStrLower = str.toLowerCase();
  const newArrCaseInsensitive = usecases.filter(usecaseObj => {
      return searchStrLower.includes(usecaseObj.usecaseId.toLowerCase());
  });
  console.log("大小写不敏感筛选结果:", newArrCaseInsensitive);

• 正则表达式的强大： match() 方法的真正威力在于它能接受正则表达式作为参数。如果搜索模式不仅仅是简单的子字符串，而是需要匹配特定格式、边界或多个可选模式，那么 match() 配合正则表达式将是首选。

  // 示例：使用正则表达式匹配 "Gates" 或 "Jobs"
  const regex = /Gates|Jobs/;
  const newArrRegex = usecases.filter(usecaseObj => {
      // RegExp.prototype.test() 更适合布尔判断
      return regex.test(usecaseObj.usecaseId); 
  });
  console.log("使用正则表达式筛选结果 (Gates或Jobs):", newArrRegex);

  这里使用了 RegExp.prototype.test() 方法，它专门用于测试字符串是否匹配某个正则表达式，并直接返回 true 或 false，比 match() 后再进行布尔转换更直接。

6. 总结

本文对比了JavaScript中基于子字符串值筛选对象数组的不同方法。从传统的 indexOf() 到ES6引入的 match() 和 includes()，每种方法都有其适用场景：

• String.prototype.indexOf(): 传统且广泛支持，通过判断 !== -1 来确定子串是否存在。
• String.prototype.includes(): ES6推荐的简单子字符串存在性检查方法，语义清晰，直接返回布尔值，代码最简洁。
• String.prototype.match() (配合 !!)： 适用于需要进行布尔判断的场景，尤其当匹配逻辑可能需要扩展到正则表达式时，具有良好的可扩展性。
• RegExp.prototype.test() (配合正则表达式)： 当需要进行复杂