JS数组过滤方法全解析

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JS数组过滤方法详解》，聊聊，希望可以帮助到正在努力赚钱的你。

JS过滤数组的核心方法是使用filter()，它通过回调函数判断每个元素是否符合条件并返回新数组；filter()不改变原数组，仅保留回调返回true的元素，例如可用来筛选偶数、排除null/undefined等假值或根据对象属性如isActive筛选对象；处理空值时可通过直接返回value过滤假值，或用严格条件排除特定值如null、undefined、空字符串；过滤对象数组时，可在回调中结合多个条件，如user.isActive && user.name.toLowerCase().includes('a')；除filter()外，也可用map()与reduce()组合或for循环实现类似功能，但filter()最简洁常用，其他方法适用于需复杂操作或性能优化的场景。

JS过滤数组，简单来说，就是从一个数组里挑出你想要的元素，组成一个新的数组。这事儿挺常见的，比如你有个用户列表，想找出所有年龄大于18岁的用户。

解决方案

JavaScript提供了filter()方法，专门用来做数组过滤。它的基本用法是这样的：

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // 输出: [2, 4, 6]

这段代码里，numbers.filter()接受一个回调函数作为参数。这个回调函数会对numbers数组里的每一个元素执行一次。如果回调函数返回true，那么这个元素就会被包含到新的数组evenNumbers里；如果返回false，这个元素就会被忽略。

回调函数里的number就是当前正在处理的元素。number % 2 === 0 这个表达式判断number是不是偶数。如果是偶数，表达式返回true，否则返回false。

filter()方法并不会修改原始数组numbers，它会返回一个新的数组evenNumbers，里面只包含符合条件的元素。

数组过滤时如何处理空值或undefined？

在实际应用中，数组里可能包含null、undefined或者空字符串等“假值”。如果你想在过滤的时候把它们也排除掉，可以这样做：

const values = [1, null, 0, 'hello', undefined, ''];

const truthyValues = values.filter(value => value);

console.log(truthyValues); // 输出: [1, "hello"]

这里，回调函数直接返回value本身。在JavaScript里，null、undefined、0、'' (空字符串) 这些值在布尔上下文中会被认为是false，其他值会被认为是true。所以，filter()会把所有“真值”保留下来。

当然，如果你想更精确地控制哪些值被过滤掉，可以写更复杂的回调函数：

const values = [1, null, 0, 'hello', undefined, ''];

const validValues = values.filter(value => value !== null && value !== undefined && value !== '');

console.log(validValues); // 输出: [1, 0, "hello"]

这个例子里，我们明确地排除了null、undefined和空字符串。注意，0在这里被保留了下来，因为它不是null、undefined或空字符串。

如何使用filter()方法过滤对象数组？

filter()方法不仅可以用来过滤数字数组，还可以用来过滤对象数组。比如，你有一个用户对象数组，想找出所有活跃用户：

const users = [
  { id: 1, name: 'Alice', isActive: true },
  { id: 2, name: 'Bob', isActive: false },
  { id: 3, name: 'Charlie', isActive: true }
];

const activeUsers = users.filter(user => user.isActive);

console.log(activeUsers);
// 输出:
// [
//   { id: 1, name: 'Alice', isActive: true },
//   { id: 3, name: 'Charlie', isActive: true }
// ]

在这个例子里，回调函数接收一个user对象作为参数，然后返回user.isActive。只有isActive属性为true的user对象才会被保留到activeUsers数组里。

如果过滤条件更复杂，比如你想找出所有名字包含字母"a"的活跃用户，可以这样做：

const users = [
  { id: 1, name: 'Alice', isActive: true },
  { id: 2, name: 'Bob', isActive: false },
  { id: 3, name: 'Charlie', isActive: true }
];

const filteredUsers = users.filter(user => user.isActive && user.name.toLowerCase().includes('a'));

console.log(filteredUsers);
// 输出:
// [
//   { id: 1, name: 'Alice', isActive: true }
// ]

这个例子里，回调函数使用了&&运算符来组合两个条件：user.isActive必须为true，并且user.name必须包含字母"a"（忽略大小写）。

除了filter()方法，还有其他数组过滤方法吗？

虽然filter()方法是最常用的数组过滤方法，但JavaScript还提供了其他一些方法，可以用来实现类似的功能。

• map() 和 reduce(): 虽然map()主要用于转换数组元素，reduce()主要用于将数组归约为单个值，但它们也可以结合使用来实现过滤。 这种方法通常比filter()更复杂，但在某些特定场景下可能更灵活。

• for 循环: 最基本的方法是使用for循环遍历数组，然后手动将符合条件的元素添加到新的数组里。 这种方法虽然比较繁琐，但可以完全控制过滤过程。

例如，使用for循环实现上面的“找出所有活跃用户”的例子：

const users = [
  { id: 1, name: 'Alice', isActive: true },
  { id: 2, name: 'Bob', isActive: false },
  { id: 3, name: 'Charlie', isActive: true }
];

const activeUsers = [];
for (let i = 0; i < users.length; i++) {
  if (users[i].isActive) {
    activeUsers.push(users[i]);
  }
}

console.log(activeUsers);
// 输出:
// [
//   { id: 1, name: 'Alice', isActive: true },
//   { id: 3, name: 'Charlie', isActive: true }
// ]

总的来说，filter()方法是最简洁、最常用的数组过滤方法。 如果需要更复杂的过滤逻辑，或者需要同时进行转换和归约操作，可以考虑使用map()和reduce()。 如果对性能有极致要求，或者需要完全控制过滤过程，可以使用for循环。

选择哪种方法取决于具体的应用场景和个人偏好。

终于介绍完啦！小伙伴们，这篇关于《JS数组过滤方法全解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！