filter使用案例总结-猿码集

1. filter方法介绍

JavaScript中的filter()方法用于过滤数组中的元素，并返回一个满足条件的新数组，原始数组不会被修改。该方法可以接受一个回调函数作为参数，用来指定过滤规则。

const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter(function(num) {
  return num % 2 !== 0;
});
console.log(filteredArr); // [1, 3, 5]

上面的例子是返回了一个新的奇数数组。回调函数接受传递数组的每个元素，并根据条件返回一个布尔值。如果返回true就保存该元素，否则就不保存。

2. 实例应用

2.1 根据数组对象过滤

我们可以使用filter()方法来根据元素的属性值对数组对象进行过滤。下面是一个示例：

const products = [
  { name: 'iPhone', price: 799 },
  { name: 'Samsung Galaxy', price: 699 },
  { name: 'Google Pixel', price: 499 },
  { name: 'LG', price: 399 },
];
const filteredProducts = products.filter(function(product) {
  return product.price > 500;
});
console.log(filteredProducts); // [{ name: 'iPhone', price: 799 }, { name: 'Samsung Galaxy', price: 699 }]

上面的例子根据产品价格大于$500过滤了产品数组。

2.2 字符串数组过滤

我们可以使用filter()方法的模糊匹配功能来对字符串数组进行过滤。下面是一个示例：

const fruits = ['apple', 'banana', 'grape', 'orange'];
const filteredFruits = fruits.filter(function(fruit) {
  return fruit.includes('a');
});
console.log(filteredFruits); // ['apple', 'banana', 'grape']

上面的例子是根据字符串中是否包含字母“a”来过滤数组元素。

2.3 数组去重

我们可以使用filter()方法来去除数组中的重复元素。下面是一个示例：

const arr = [1, 2, 3, 2, 4, 3, 5, 6, 1];
const uniqueArr = arr.filter(function(item, index, self) {
  return self.indexOf(item) === index;
});
console.log(uniqueArr); // [1, 2, 3, 4, 5, 6]

上面的例子使用了indexOf()和filter()方法来去重数组。如果元素第一次出现的位置和它现在的位置不同，那么就把它保存下来。

3. 注意事项

在使用filter()方法时，需要注意以下几点：

3.1 回调函数

回调函数必须返回一个布尔值，表示该元素是否应该被保留。如果返回true，则该元素将被包括在新的数组中。否则，该元素将被忽略。

3.2 原数组不变

filter()方法不会改变原始数组，而是返回一个新的数组。

3.3 不支持IE8及以下浏览器

由于filter()方法是ECMAScript 5规范中的方法，因此不支持IE8及以下版本的浏览器。但是，我们可以使用polyfill来为大多数浏览器添加这个方法。

4. 总结

filter()方法是一个非常有用的方法，它可以用来过滤任何类型的数组，包括字符串和对象数组。使用该方法可以大大简化数组操作，减少代码复杂度。需要注意的是，该方法不会修改原始数组，并且需要提供一个回调函数来指定过滤规则。

filter使用案例总结