目录
数组过滤方法filter()
了解过滤方法filter()
回调函数参数
过滤方法的用例
浏览器对过滤方法的支持
首页 web前端 前端问答 es6 filter()怎么用

es6 filter()怎么用

Oct 11, 2022 pm 05:29 PM
javascript es6 es6数组

在es6中,filter()是一个数组过滤方法,会调用一个回调函数来过滤数组中的元素,返回符合条件的所有元素,语法“Array.filter(callback(element[, index[, array]])[, thisArg])”。filter()方法会创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

es6 filter()怎么用

本教程操作环境: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(&#39;John&#39;) > -1) {
   filtered.push(employees[i]);
 }
}
 
console.log(filtered); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]
登录后复制

2.png

在上面的代码中,我们正在查找具有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 }]
登录后复制

3.png

在这里,使用数组过滤方法,我们不需要手动循环遍历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]
登录后复制

4.png

所以在回调函数内部,在循环的第一次迭代中,数组中的第一个元素值 10 将作为number参数值传递,并且 10 > 30 为 false,因此数字 10 不会被视为匹配项。

数组过滤方法返回一个数组,因此 10 不大于 30,它不会被添加到filtered数组列表中。

然后在循环的下一次迭代中,数组中的下一个元素 40 将作为number参数值传递给回调函数,当 40 > 30 为真时,将被视为匹配并添加到filtered大批。

这将一直持续到数组中的所有元素都没有完成循环。

因此,只要回调函数返回一个false值,该元素就不会被添加到过滤后的数组中。filter 方法返回一个数组,该数组仅包含回调函数为其返回true值的那些元素。

您可以看到在循环的每次迭代中传递给回调函数的元素的当前值如果将值记录到控制台:

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]
 
/* output
10 false
40 true
30 false
25 false
50 true
70 true
[40, 50, 70]
*/
登录后复制

1.png

现在,看看下面的代码:

const checkedState = [true, false, false, true, true];
 
const onlyTrueValues = checkedState.filter(function(value) {
  return value === true;
});
 
console.log(onlyTrueValues); // [true, true, true]
登录后复制

5.png

在上面的代码中,我们只找出那些值为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;
});

/* output

true   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]

*/
登录后复制

6.png

过滤方法的用例

正如您在上面看到的,数组过滤器方法对于过滤掉数组中的数据很有用。

但是过滤器方法在一些实际用例中也很有用,例如从数组中删除重复项,分离两个数组之间的公共元素等。

从数组中删除元素

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}
]

*/
登录后复制

7.png

在这里,我们从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]
登录后复制

8.png

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"]
登录后复制

9.png

在这里,我们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"]
登录后复制

10.png

浏览器对过滤方法的支持

  • 所有现代浏览器和 Internet Explorer (IE) 版本 9 及更高版本
  • Microsoft Edge 版本 12 及更高版本

【相关推荐:web前端开发

以上是es6 filter()怎么用的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何使用WebSocket和JavaScript实现在线语音识别系统 如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

WebSocket与JavaScript:实现实时监控系统的关键技术 WebSocket与JavaScript:实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

如何使用WebSocket和JavaScript实现在线预约系统 如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代,越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统,并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

如何利用JavaScript和WebSocket实现实时在线点餐系统 如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

JavaScript和WebSocket:打造高效的实时天气预报系统 JavaScript和WebSocket:打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

如何在JavaScript中获取HTTP状态码的简单方法 如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务

javascript中如何使用insertBefore javascript中如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法:在JavaScript中,insertBefore()方法用于在DOM树中插入一个新的节点。这个方法需要两个参数:要插入的新节点和参考节点(即新节点将要被插入的位置的节点)。

See all articles