怎么使用javascript中filter

发布时间：2021-10-29 15:06:05 作者：iii
来源：亿速云阅读：184

# 怎么使用JavaScript中filter

## 一、filter方法简介

`filter()` 是JavaScript数组(Array)对象的一个内置方法，它创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。与`map()`和`reduce()`一样，`filter()`也是函数式编程中的重要方法。

### 基本语法
```javascript
const newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

参数说明： - callback：测试函数，返回true表示保留该元素 - element：当前处理的元素 - index（可选）：当前元素的索引 - array（可选）：调用filter的数组 - thisArg（可选）：执行callback时使用的this值

二、基本使用示例

1. 过滤简单数组

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
// 结果: [2, 4]

2. 过滤对象数组

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 17 },
  { name: 'Charlie', age: 30 }
];

const adults = users.filter(user => user.age >= 18);
// 结果: [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 30 }]

三、高级用法

1. 结合index参数使用

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

// 过滤掉索引为0的元素
const filteredFruits = fruits.filter((fruit, index) => index !== 0);
// 结果: ['banana', 'grapes', 'mango', 'orange']

2. 使用thisArg参数

const threshold = {
  min: 10,
  max: 20
};

function inRange(value) {
  return value >= this.min && value <= this.max;
}

const numbers = [5, 12, 15, 25];
const filtered = numbers.filter(inRange, threshold);
// 结果: [12, 15]

3. 过滤假值

const mixedValues = [0, 1, false, 2, '', 3, null, undefined, NaN];
const truthyValues = mixedValues.filter(Boolean);
// 结果: [1, 2, 3]

四、常见应用场景

1. 搜索过滤

const products = [
  { name: 'Laptop', category: 'Electronics' },
  { name: 'Shirt', category: 'Clothing' },
  { name: 'Phone', category: 'Electronics' }
];

function filterBySearchTerm(items, term) {
  return items.filter(item => 
    item.name.toLowerCase().includes(term.toLowerCase())
  );
}

const electronics = filterBySearchTerm(products, 'phone');
// 结果: [{ name: 'Phone', category: 'Electronics' }]

2. 数据清理

const dataWithNulls = [1, null, 2, undefined, 3, NaN, 4];
const cleanData = dataWithNulls.filter(item => item !== null && !isNaN(item));
// 结果: [1, 2, 3, 4]

3. 数组去重

const duplicates = [1, 2, 2, 3, 4, 4, 5];
const unique = duplicates.filter((item, index) => 
  duplicates.indexOf(item) === index
);
// 结果: [1, 2, 3, 4, 5]

五、性能注意事项

避免在大型数组上频繁使用：对于非常大的数组，filter()可能会影响性能，因为它会遍历整个数组。
链式操作优化：当需要多个数组方法时，考虑操作顺序： “`javascript // 不佳的写法 arr.filter().map().filter()

// 更好的写法（先过滤可以减少后续操作的元素数量） arr.filter().filter().map()


3. **与find()的区别**：如果需要找到第一个匹配项，使用`find()`更高效：
   ```javascript
   // 使用filter
   const result = array.filter(x => x.prop === value)[0];
   
   // 更高效的写法
   const result = array.find(x => x.prop === value);

六、与其他方法的结合

1. 与map()结合

const numbers = [1, 2, 3, 4, 5];
const doubledEvens = numbers
  .filter(num => num % 2 === 0)
  .map(num => num * 2);
// 结果: [4, 8]

2. 与reduce()结合

const orders = [
  { amount: 100 }, 
  { amount: 200 }, 
  { amount: 50 }
];

const totalLargeOrders = orders
  .filter(order => order.amount > 50)
  .reduce((sum, order) => sum + order.amount, 0);
// 结果: 300

七、浏览器兼容性

filter()方法在所有现代浏览器中都得到支持，包括： - Chrome 1+ - Firefox 1.5+ - IE 9+ - Edge 12+ - Safari 3+

对于旧版浏览器，可以使用polyfill或以下替代方案：

if (!Array.prototype.filter) {
  Array.prototype.filter = function(callback, thisArg) {
    var T, k;
    if (this == null) {
      throw new TypeError('this is null or not defined');
    }
    var O = Object(this);
    var len = O.length >>> 0;
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }
    if (arguments.length > 1) {
      T = thisArg;
    }
    var A = new Array();
    var k = 0;
    while (k < len) {
      var kValue;
      if (k in O) {
        kValue = O[k];
        if (callback.call(T, kValue, k, O)) {
          A.push(kValue);
        }
      }
      k++;
    }
    return A;
  };
}

八、总结

JavaScript的filter()方法是一个非常强大的工具，它允许我们以声明式的方式从数组中提取满足特定条件的元素。通过本文的学习，你应该已经掌握了：

filter()的基本语法和工作原理
各种常见的使用场景和示例
高级用法和性能优化技巧
与其他数组方法的配合使用

记住，filter()不会改变原始数组，而是返回一个新数组，这使得它成为函数式编程中不可变数据实践的重要组成部分。 “`

这篇文章大约1100字，全面介绍了JavaScript中filter方法的使用，包含了基础语法、各种使用示例、性能注意事项以及与其他方法的配合等内容，采用Markdown格式编写。