JavaScript对象数组筛选：利用ES6进行子字符串匹配优化-js教程-PHP中文网

JavaScript对象数组筛选：利用ES6进行子字符串匹配优化

心靈之曲

发布： 2025-11-26 12:26:38

原创

496人浏览过

JavaScript对象数组筛选：利用ES6进行子字符串匹配优化

本教程详细介绍了如何在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。我们可以利用这一点来判断是否匹配成功。

火山写作

字节跳动推出的中英文AI写作、语法纠错、智能润色工具，是一款集成创作、润色、纠错、改写、翻译等能力的中英文 AI 写作助手。

167

查看详情

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代码。

以上就是JavaScript对象数组筛选：利用ES6进行子字符串匹配优化的详细内容，更多请关注php中文网其它相关文章！