迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

在 JavaScript 中过滤字符串

作者:迹忆客 最近更新:2023/06/04 浏览次数:

在处理范围广泛的字符串数组元素并提取优选匹配项时,我们可以依赖多种方法。 JavaScript 的基本 filter() 方法启动该过程,稍后我们可以根据喜好选择其他方法。

我们必须注意 find()findIndex() 方法等其他约定也可以获取匹配项。 但是这些函数只返回匹配字符串的索引个数; 这些不能返回要用数组字符串检查的给定模式的序列。

此外,这些可以与其他条件一起使用和调整以检索匹配的序列。

在这里,我们将演示使用具有基本箭头操作和特定条件的 filter() 方法。 此外,我们将看到使用 indexOf()、test() 和 include() 方法来获取满足给定模式的字符串。

并非所有这些方法都直接返回字符串。 因此,我们将它们与 filter() 方法合并以跟踪数组元素。


使用带箭头函数的 filter() 方法在 JavaScript 中过滤字符串

在这种情况下,我们将选择一个包含字符串元素的数组。 filter() 方法将遍历每个元素并查看条件是否与使用箭头函数应用的条件相匹配。

在这里,任务只需要几行代码。 让我们检查一下。

代码片段:

var myArray = ["abadef", "sbade", "psadbe"]
filtered = myArray.filter(x => x.length<=5)
console.log(filtered)

输出:

将 filter() 方法与箭头函数一起使用

可以看出,我们添加了限制,只有长度小于或等于5的字符串元素才会被选中。 并根据该规范导出输出。


使用 indexOf() 方法和 filter() 方法在 JavaScript 中过滤字符串

我们将处理具有多个字符串元素的相同分类字符串数组。 在这种情况下,我们将选择一个我们想要与给定字符串匹配的字符串模式,无论哪个字符串是该模式的超集都是目标字符串元素。

indexOf() 方法通常返回要在其中找到模式的字符串的索引。 但在这种情况下,我们将字符串作为数组元素,因此,无论匹配哪个元素,函数都会从元素字符位置的开头开始计算索引。

虽然我们在示例中只显示了选定的元素,但您可以尝试重新检查单词。

代码片段:

var myArray = ["abadef", "sbade", "psadbe"]
var PATTERN = 'sad',
   filtered = myArray.filter(function (str)
                             {return str.indexOf(PATTERN) !== -1; });
console.log(filtered)

输出:

使用 indexOf() 方法和 filter() 方法


使用 test() 方法和 filter() 方法在 JavaScript 中过滤字符串

JavaScript 中的 test() 函数返回 true 或 false。 当我们将该方法与 filter() 方法合并时,我们得到匹配的字符串元素作为过滤对象的新元素。

此外,值得注意的部分是 test() 方法将 RegExp 与元素匹配。

代码片段:

var myArray = ["abadef", "sbade", "psadbe"]

var PATTERN = /bad/,
filtered = myArray.filter(function (str) { return PATTERN.test(str); });
console.log(filtered)

输出:

使用 test() 方法和 filter() 方法


在 JavaScript 中使用 includes() 方法和 filter() 方法过滤字符串

在这里,includes() 方法以布尔形式返回,但在这种情况下,匹配模式可以是字符串而不是正则表达式。 同样,我们将使用 filter() 方法遍历数组元素并获取接受的案例。

那么,让我们跳到代码围栏。

代码片段:

var myArray = ["abadef", "sbade", "psadbe"]

var PATTERN = 'ef',
filtered = myArray.filter(function (str) { return str.includes(PATTERN); });
console.log(filtered)

输出:

includes() 方法与 filter() 方法的使用

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Do you understand JavaScript closures?

发布时间:2025/02/21 浏览次数:108 分类:JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间:2025/02/21 浏览次数:178 分类:JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间:2025/02/21 浏览次数:150 分类:JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:102 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便