JS数组过滤玩出花！3种高效方法实战教学

还在用简单的JS数组过滤？out啦！本文手把手教你用`filter()`方法高效过滤数组元素，轻松应对各种复杂场景。`filter()`通过指定条件筛选数组，创建新数组，简洁又强大。除了`filter()`，还有`map() + reduce()`组合、原始`for`循环以及`lodash`库的`_.filter()`等方法，各有优缺点。本文深入讲解`filter()`的用法，包括复杂条件过滤、索引访问、`null/undefined`处理等实用技巧，助你彻底掌握JS数组过滤，写出更优雅高效的代码！

JavaScript过滤数组元素主要使用filter()方法。1. filter()通过检查数组中符合条件的元素并创建新数组，如const evenNumbers = numbers.filter(number => number % 2 === 0); //输出偶数。2. 其他方法包括：map() + reduce()组合实现复杂过滤，但代码较冗长；原始for循环手动筛选，灵活但易出错；lodash库的_.filter()用法与原生类似，性能可能更优。3. filter()支持复杂条件，可将判断逻辑封装为函数以提升可读性。4. filter()不会修改原数组，而是返回新数组。5. filter()接收三个参数，包括当前元素、索引和原数组，可用于按索引过滤。6. 对于null和undefined，默认被跳过，可通过显式判断保留或排除。总体上，filter()是最常用且便捷的数组过滤方法。

直接告诉你，JavaScript过滤数组元素，主要靠filter()方法。当然，还有一些其他奇技淫巧，但filter()绝对是主力。

解决方案

filter()方法创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 简单来说，就是你给它一个条件，它把满足条件的元素都挑出来，放到一个新的数组里。

举个例子：

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

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

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

这段代码里，filter()接收一个箭头函数作为参数，这个箭头函数就是用来判断元素是否符合条件的。 number % 2 === 0 这个条件的意思是，如果一个数除以2余数为0，那么它就是偶数，就把它放到新数组里。

JavaScript中除了filter()还有哪些数组过滤方法？

除了filter()，还有一些其他方法也能实现数组过滤，但它们的应用场景可能不太一样。

• map() + reduce()： map()先对数组进行转换，然后reduce()再进行过滤。 这种方法比较灵活，但代码相对复杂，效率也可能不如filter()。

  const numbers = [1, 2, 3, 4, 5, 6];
  
  const evenNumbers = numbers.map(number => number % 2 === 0 ? number : null)
                               .reduce((acc, number) => {
                                   if (number !== null) {
                                       acc.push(number);
                                   }
                                   return acc;
                               }, []);
  
  console.log(evenNumbers); // 输出: [ null, 2, null, 4, null, 6 ]  //注意这里的null
  
  //改进一下
  const evenNumbersImproved = numbers.map(number => number % 2 === 0 ? number : undefined)
                               .filter(number => number !== undefined);
  
  console.log(evenNumbersImproved); // 输出: [ 2, 4, 6 ]

  可以看到，如果不注意，map()可能会引入一些不需要的值，需要额外处理。

• for循环： 最原始的方法，自己写循环，自己判断，自己往新数组里塞。 这种方法最灵活，但代码最长，也最容易出错。

  const numbers = [1, 2, 3, 4, 5, 6];
  const evenNumbers = [];
  
  for (let i = 0; i < numbers.length; i++) {
      if (numbers[i] % 2 === 0) {
          evenNumbers.push(numbers[i]);
      }
  }
  
  console.log(evenNumbers); // 输出: [2, 4, 6]

  可读性稍差，而且容易出现数组越界之类的问题。

• lodash库的_.filter()： lodash是一个非常流行的JavaScript工具库，它提供了很多方便的函数，包括_.filter()。 _.filter()的用法和原生的filter()基本一样，但它在一些情况下可能会有更好的性能。

  const numbers = [1, 2, 3, 4, 5, 6];
  
  const evenNumbers = _.filter(numbers, number => number % 2 === 0);
  
  console.log(evenNumbers); // 输出: [2, 4, 6]

  需要引入lodash库，如果你的项目已经使用了lodash，那么用它也是个不错的选择。

总的来说，filter()是最常用，也是最方便的数组过滤方法。 其他方法各有优缺点，可以根据实际情况选择。

如何在filter()中使用复杂的过滤条件？

filter()方法接收的箭头函数，可以写成很复杂的形式，只要最终返回一个布尔值就行。

例如，要过滤出大于3且是偶数的元素：

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

const filteredNumbers = numbers.filter(number => {
    if (number > 3 && number % 2 === 0) {
        return true;
    } else {
        return false;
    }
});

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

或者，可以把过滤条件提取成一个单独的函数：

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

function isGreaterThan3AndEven(number) {
    return number > 3 && number % 2 === 0;
}

const filteredNumbers = numbers.filter(isGreaterThan3AndEven);

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

这样代码更清晰，也更容易维护。

filter()会改变原数组吗？

filter()方法不会改变原数组。 它会创建一个新的数组，包含符合条件的元素。

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

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

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

可以看到，numbers数组并没有被改变。

如何在filter()中访问数组的索引？

filter()方法接收的箭头函数，可以接收三个参数：

• element：当前元素的值
• index：当前元素的索引
• array：原数组

例如，要过滤出索引是偶数的元素：

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

const filteredNumbers = numbers.filter((number, index) => index % 2 === 0);

console.log(filteredNumbers); // 输出: [1, 3, 5]

注意，这里箭头函数的参数顺序不能错。

filter()的性能如何？

filter()的性能通常很好，尤其是对于小数组。 但对于非常大的数组，性能可能会成为一个问题。

在一些情况下，使用for循环可能会有更好的性能，因为for循环可以避免创建额外的数组。 但filter()的代码更简洁，也更容易阅读，所以在大多数情况下，filter()是更好的选择。

如果确实需要优化性能，可以考虑使用lodash库的_.filter()，或者手动实现一个更高效的过滤函数。

如何处理filter()中的null和undefined？

filter()方法会跳过null和undefined元素。

const numbers = [1, null, 3, undefined, 5, 6];

const filteredNumbers = numbers.filter(number => number > 0);

console.log(filteredNumbers); // 输出: [1, 3, 5, 6]

可以看到，null和undefined元素被自动过滤掉了。

如果需要显式地处理null和undefined，可以在箭头函数中进行判断：

const numbers = [1, null, 3, undefined, 5, 6];

const filteredNumbers = numbers.filter(number => number != null && number > 0);

console.log(filteredNumbers); // 输出: [1, 3, 5, 6]

number != null 这个条件可以同时判断number是否为null或undefined。

希望这些能帮到你！

今天关于《JS数组过滤玩出花！3种高效方法实战教学》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于JavaScript,数组过滤,map(),filter(),reduce()的内容请关注golang学习网公众号！