您的位置:首页 > 教程笔记 > 前端笔记

js中filter函数的用法

2024-05-03 17:32:02 前端笔记 176

JavaScript 中 filter 函数的用法

filter 函数是 JavaScript 数组内置方法,用于过滤数组中满足特定条件的元素,返回一个由符合条件的元素组成的新数组。

语法:

<code class="javascript">filter(callback(element, index, array))</code>

参数:

callback(element, index, array):一个必须返回布尔值的回调函数。

element:当前正在处理的数组元素。

index:当前元素在数组中的索引。

array:正在处理的数组本身。

返回值:

一个包含满足回调函数条件的所有元素的新数组。

用法:

1. 过滤满足简单条件的元素:

<code class="javascript">const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter((num) =&gt; num % 2 === 0);</code>

2. 过滤满足复杂条件的元素:

<code class="javascript">const users = [
  { name: 'John', age: 25 },
  { name: 'Mary', age: 30 },
  { name: 'Bob', age: 18 }
];
const adults = users.filter((user) =&gt; user.age &gt;= 18);</code>

3. 过滤器链:

<code class="javascript">const evenAndGreaterThan3 = numbers.filter((num) =&gt; num % 2 === 0).filter((num) =&gt; num &gt; 3);</code>

示例:

以下示例演示了如何使用 filter 函数过滤一个包含学生分数的数组,获取不及格的学生名单:

<code class="javascript">const scores = [90, 85, 77, 65, 52, 45];
const failingScores = scores.filter((score) =&gt; score </code>

变量将包含以下元素:

52
45

注意:

filter 函数本身不会修改原始数组。
回调函数必须返回布尔值。如果未返回布尔值,将抛出错误。

相关推荐

  • js中箭头函数的写法

    js中箭头函数的写法

    JavaScript 箭头函数的写法箭头函数是 JavaScript 中引入的一种简写函数语法,它可以让代码更简洁、易读。写法箭头函数的写法如下:(parameters) = expre

    前端笔记 2024-05-03 17:31:49 137
  • js中if函数的使用方法

    js中if函数的使用方法

    JavaScript 中 if 函数的使用方法简介if 函数是 JavaScript 中用于执行条件语句的基本函数。它允许程序员基于特定条件判断和执行代码块。语法if (condition

    前端笔记 2024-05-03 17:31:42 53
  • js中查找元素的方法

    js中查找元素的方法

    JavaScript 查找元素的方法在 JavaScript 中,有以下几种常见的方法可用于查找元素:1. getElementById(id):使用元素的唯一 ID 属性查找元素。它返回具有指定 I

    前端笔记 2024-05-03 17:31:36 137
  • vue中怎么获取dom元素

    vue中怎么获取dom元素

    在 Vue 中获取 DOM 元素在 Vue 应用中,可以通过以下方法获取 DOM 元素:1. ref 属性为组件或元素添加 属性,并指定一个引用变量名。在 Vue 实例中,可以使用 对象访问带有

    前端笔记 2024-05-03 17:29:48 104
  • vue中获取dom元素的方法

    vue中获取dom元素的方法

    Vue 中获取 DOM 元素的方法在 Vue 中,可以通过以下几种方法获取 DOM 元素:1. $refs 属性是一个对象,它包含了模板中所有带有 属性的元素的引用。使用 可以直接访问 DOM 元

    前端笔记 2024-05-03 17:29:20 209