JavaScript中根据子字符串值筛选对象数组的教程

本教程旨在介绍如何在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方法会保留该对象。

Levity

AI帮你自动化日常任务

206

查看详情

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。这种方式使得代码更加简洁和富有表达力。

两种方法的比较与注意事项

1. 简洁性与可读性：

   • match()结合!!的方式通常被认为是更简洁和现代的JavaScript写法，尤其是在处理布尔逻辑时。它将匹配和布尔转换融合到一行代码中，提高了可读性。
   • indexOf()虽然直观，但需要显式地与-1进行比较。

2. 灵活性：

   • match()方法接受正则表达式作为参数，这意味着如果未来需要更复杂的匹配逻辑（例如，不区分大小写、匹配特定模式而非精确子字符串），可以轻松扩展正则表达式而无需改变筛选结构。例如，要实现不区分大小写的匹配，可以将usecaseObj.usecaseId转换为new RegExp(usecaseObj.usecaseId, 'i')。
   • 相比之下，indexOf()只能进行精确的子字符串匹配，不具备正则表达式的强大功能。

3. 性能：

   • 对于小型数据集和简单的子字符串查找，两种方法的性能差异通常可以忽略不计。
   • 但在处理超大数据集或极高频率调用时，性能可能需要进一步测试和分析。正则表达式引擎的开销可能略高于简单的indexOf查找，但在现代JavaScript引擎中，这种差异通常很小，且match在某些场景下可能因为其底层优化而表现良好。对于大多数Web应用场景，match的优势在于其表达力和灵活性。

总结

综上所述，无论是使用传统的indexOf()还是ES6的match()方法，JavaScript都提供了灵活的工具来根据子字符串值筛选对象数组。在追求代码简洁性、可读性以及未来可扩展性方面，推荐采用match()结合正则表达式的ES6优化方案。选择哪种方法取决于具体的项目需求、团队编码规范以及对性能的考量。对于需要更复杂匹配模式的场景，match()的优势将更加明显。

以上就是JavaScript中根据子字符串值筛选对象数组的教程的详细内容，更多请关注php中文网其它相关文章！