JavaScript 过滤器数组匹配包括精确 - JavaScript

在 JavaScript 中，过滤作为一种常见的操作，可以帮助我们根据需要从数组中筛选出符合条件的元素，并返回一个新的数组。本篇文章将介绍如何实现一个可以过滤出包含和精确匹配的过滤器函数。

包含匹配

包含匹配是指筛选出数组中包含指定字符串的元素。下面是实现过滤包含匹配的示例代码：

const filterList = (list, query) => {
  return list.filter((item) => {
    return item.toLowerCase().indexOf(query.toLowerCase()) !== -1;
  });
}

const list = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
const filteredList = filterList(list, 'e');
console.log(filteredList); // ['apple', 'date', 'elderberry']

代码解读：

• filterList 函数接收两个参数，第一个是需要过滤的数组，第二个是过滤的条件（字符串）。
• filter 方法会遍历数组并对所有元素执行传入的回调函数，如果回调函数的返回值为 true，则将该元素添加到新的数组中。
• 回调函数接收一个元素作为参数，并将该元素转换为小写字母。然后使用 indexOf 方法查找该字符串中是否包含指定的查询字符串。如果包含，则返回大于或等于 0 的整数，否则返回 -1。
• 如果返回的整数大于或等于 0，则该元素符合过滤条件。

精确匹配

精确匹配是指筛选出数组中等于指定字符串的元素。下面是实现过滤精确匹配的示例代码：

const filterList = (list, query) => {
  return list.filter((item) => {
    return item.toLowerCase() === query.toLowerCase();
  });
}

const list = ['apple', 'Banana', 'Cherry', 'Date', 'Kiwi'];
const filteredList = filterList(list, 'banana');
console.log(filteredList); // ['Banana']

代码解读：

• 与包含匹配相同，filterList 函数接收两个参数。
• 回调函数使用 === 运算符在小写字母下比较元素和查询字符串。
• 如果相同，则该元素符合过滤条件。

总结

本文介绍了如何通过 JavaScript 中的 filter 方法实现过滤器函数来实现包含和精确匹配的筛选。这些技术可以用于在大型数组中查找元素，使我们能够更轻松地找到我们需要的元素。