本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。
(资料图片)
数组过滤器方法是 JavaScript 中使用最广泛的方法之一。
它允许我们快速过滤出具有特定条件的数组中的元素。
因此，在本文中，您将了解有关过滤器方法及其各种用例的所有内容。
所以让我们开始吧。
看看下面没有使用过滤器方法的代码：
const employees = [ { name: "David Carlson", age: 30 }, { name: "John Cena", age: 34 }, { name: "Mike Sheridan", age: 25 }, { name: "John Carte", age: 50 }]; const filtered = []; for(let i = 0; i < employees.length; i++) { if(employees[i].name.indexOf("John") > -1) { filtered.push(employees[i]); }} console.log(filtered); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]登录后复制在上面的代码中，我们正在查找具有John我们正在使用indexOf方法的名称的所有员工。
for 循环代码看起来很复杂，因为我们需要手动循环employees数组并将匹配的员工推送到filtered数组中。
但是使用数组过滤方法，我们可以简化上面的代码。
数组过滤方法filter()
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
数组过滤方法的语法如下：
Array.filter(callback(element[, index[, array]])[, thisArg])
登录后复制filter 方法不会更改原始数组，但会返回一个新数组，其中包含满足提供的测试条件的所有元素。
filter 方法将回调函数作为第一个参数，并为数组的每个元素执行回调函数。
在回调函数的每次迭代中，每个数组元素值都作为第一个参数传递给回调函数。
使用过滤器方法查看以下代码：
const employees = [ { name: "David Carlson", age: 30 }, { name: "John Cena", age: 34 }, { name: "Mike Sheridan", age: 25 }, { name: "John Carte", age: 50 }]; const filtered = employees.filter(function (employee) { return employee.name.indexOf("John") > -1;}); console.log(filtered); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]登录后复制在这里，使用数组过滤方法，我们不需要手动循环遍历employees数组，也不需要filtered事先创建数组来过滤掉匹配的员工。
了解过滤方法filter()
filter 方法接受一个回调函数，数组的每个元素在循环的每次迭代中都作为第一个参数自动传递。
假设我们有以下数字数组：
const numbers = [10, 40, 30, 25, 50, 70];
登录后复制而我们想要找出所有大于30的元素，那么我们可以使用如下所示的过滤方法：
const numbers = [10, 40, 30, 25, 50, 70];const filtered = numbers.filter(function(number) { return number > 30;});console.log(filtered); // [40, 50, 70]登录后复制所以在回调函数内部，在循环的第一次迭代中，数组中的第一个元素值 10 将作为number参数值传递，并且 10 > 30 为 false，因此数字 10 不会被视为匹配项。
数组过滤方法返回一个数组，因此 10 不大于 30，它不会被添加到filtered数组列表中。
然后在循环的下一次迭代中，数组中的下一个元素 40 将作为number参数值传递给回调函数，当 40 > 30 为真时，将被视为匹配并添加到filtered大批。
这将一直持续到数组中的所有元素都没有完成循环。
您可以看到在循环的每次迭代中传递给回调函数的元素的当前值如果将值记录到控制台：
const numbers = [10, 40, 30, 25, 50, 70]; const filtered = numbers.filter(function(number) { console.log(number, number > 30); return number > 30;}); console.log(filtered); // [40, 50, 70] /* output10 false40 true30 false25 false50 true70 true[40, 50, 70]*/登录后复制现在，看看下面的代码：
const checkedState = [true, false, false, true, true]; const onlyTrueValues = checkedState.filter(function(value) { return value === true;}); console.log(onlyTrueValues); // [true, true, true]登录后复制在上面的代码中，我们只找出那些值为true.
回调函数可以如上所示编写，也可以使用箭头函数如下所示：
const onlyTrueValues = checkedState.filter(value => { return value === true;});登录后复制而如果箭头函数中只有一条语句，我们可以跳过return关键字，隐式返回值，如下：
const onlyTrueValues = checkedState.filter(value => value === true);
登录后复制上面的代码可以进一步简化为：
const onlyTrueValues = checkedState.filter(Boolean);
登录后复制要了解它是如何工作的，请查看我的这篇文章。
回调函数参数
除了数组的实际元素外，传递给 filter 方法的回调函数还接收以下参数：
我们正在循环的index数组中当前元素的array我们循环播放的原版看看下面的代码：
const checkedState = [true, false, false, true, true];checkedState.filter(function(value, index, array) { console.log(value, index, array); return value === true;});/* outputtrue 0 [true, false, false, true, true]false 1 [true, false, false, true, true]false 2 [true, false, false, true, true]true 3 [true, false, false, true, true]true 4 [true, false, false, true, true]*/登录后复制过滤方法的用例
正如您在上面看到的，数组过滤器方法对于过滤掉数组中的数据很有用。
但是过滤器方法在一些实际用例中也很有用，例如从数组中删除重复项，分离两个数组之间的公共元素等。
从数组中删除元素
filter 方法最常见的用例是从数组中删除特定元素。
const users = [ {name: "David", age: 35}, {name: "Mike", age: 30}, {name: "John", age: 28}, {name: "Tim", age: 48}];const userToRemove = "John";const updatedUsers = users.filter(user => user.name !== userToRemove);console.log(updatedUsers);/* output[ {name: "David", age: 35}, {name: "Mike", age: 30}, {name: "Tim", age: 48}]*/登录后复制在这里，我们从users名称为 的数组中删除用户John。
userToRemove因此，在回调函数中，我们正在检查保留名称与存储在变量中的名称不匹配的用户的条件。
从数组中查找唯一或重复项
const numbers = [10, 20, 10, 30, 10, 30, 50, 70];const unique = numbers.filter((value, index, array) => { return array.indexOf(value) === index;})console.log(unique); // [10, 20, 30, 50, 70]const duplicates = numbers.filter((value, index, array) => { return array.indexOf(value) !== index;})console.log(duplicates); // [10, 10, 30]登录后复制该indexOf方法返回第一个匹配元素的索引，因此，在上面的代码中，我们正在检查我们正在循环的元素的当前索引是否与第一个匹配元素的索引匹配，以找出唯一和重复元素.
查找两个数组之间的不同值
const products1 = ["books","shoes","t-shirt","mobile","jackets"];const products2 = ["t-shirt", "mobile"];const filteredProducts = products1.filter(product => products2.indexOf(product) === -1);console.log(filteredProducts); // ["books", "shoes", "jackets"]
登录后复制在这里，我们products1使用 filter 方法循环，在回调函数中，我们正在检查products2数组是否包含我们使用 arrayindexOf方法循环的当前元素。
如果该元素不匹配，则条件为真，该元素将被添加到filteredProducts数组中。
您还可以使用数组includes方法来实现相同的功能：
const products1 = ["books","shoes","t-shirt","mobile","jackets"];const products2 = ["t-shirt", "mobile"];const filteredProducts = products1.filter(product => !products2.includes(product));console.log(filteredProducts); // ["books", "shoes", "jackets"]
登录后复制浏览器对过滤方法的支持
所有现代浏览器和 Internet Explorer (IE) 版本 9 及更高版本Microsoft Edge 版本 12 及更高版本【相关推荐：web前端开发】
以上就是es6 filter()怎么用的详细内容，更多请关注php中文网其它相关文章！
关键词： 回调函数
