js filter() 方法

原创 已于 2022-07-20 11:34:15 修改 · 929 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

于 2018-07-23 15:06:07 首次发布
本文介绍了 JavaScript 中 filter() 方法的基本用法，该方法用于创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。文章强调了 filter() 不会对空数组进行检测并且不会改变原始数组的特点。

基本用法采集于菜鸟教程：

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

filter() 不会对空数组进行检测。

filter() 不会改变原始数组。

语法：

array.filter(function(currentValue,index,arr), thisValue)

项目中用到：

js代码-手写filter 方法
07-15
在这个场景中，“手写filter方法”意味着我们将实现一个自定义的函数，模拟原生`Array.prototype.filter()`的功能。这涉及到对数组的遍历、条件判断以及返回新数组的逻辑。 首先，我们来理解原生`filter()`的工作...
JS中filter()方法的使用
热门推荐
铁锤妹妹的博客
04-09 8万+
常见的场景：当我们从后端请求到数据列表时，我们需要对其中符合条件的数据进行筛选、当我们拿到数据，我们希望把英文首字母大写，数组去重等等。
JavaScript的filter用法
永远保持谦卑好学
02-23 2万+
参考：廖雪峰老师的javascript教程filter 它用于把Array的某些元素过滤掉，然后返回剩下的元素。和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。例如，在一个Array中，删掉偶数，只保留奇数，可以这么写var arr = [1, 2, 4
JS数组方法：filter
不熬夜的臭宝的博客
05-13 940
前端javascript中filter数组方法
js filter的使用
我的英文站点：https://iorilan.medium.com/
09-05 3423
Person 类： /* person class */ function Person(name,age){ this.name = name; this.age = age; this.hobby = new Array(); } Person.prot
filter
yang295242361的博客
10-13 314
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014351219769203e3fbe1ed611475db3d439393add8997000 filter filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。
JavaScript Filter方法的实现与应用
资源摘要信息:"本资源介绍如何使用JavaScript中的filter方法实现数组的过滤功能。" JavaScript中的filter方法是一个非常有用的数组对象方法，它能够创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的...
JavaScript filter方法的代码实现解析
资源摘要信息:"本文档详细解释了如何使用JavaScript中的filter方法来实现数组过滤。filter是JavaScript数组对象提供的一个非常有用的内置方法，它允许我们根据特定的测试条件，从数组中筛选出符合条件的元素，并创建...
手写JavaScript filter方法的详细教程
资源摘要信息:"JS代码-手写filter方法" 知识点一：JavaScript 中filter方法的理解 在JavaScript中，filter方法是数组（Array）对象的一个常用方法，它创建一个新数组，包含通过所提供函数实现的测试的所有元素。...
js数组迭代方法总结
qq_41818857的博客
02-06 556
数组迭代,数组有很多的迭代方法，在这边做个总结。 迭代：就是对数组中的每一项都进行相应的操作 这些迭代方法都有一个回调函数：有三个参数：数组中的每个元素，元素的索引，原数组。 1、forEach(回调函数) forEach方法没有返回值，修改原数组。 var nums = [1,3,5,6,8]; nums.forEach(function(item,index,oldArr) { ...
JavaScript中的filter用法
laosao_66的博客
01-24 2746
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。filter() 不会对空数组进行检测。filter() 不会改变原始数组。
一文详解JS的过滤器——filter
qq_36547636的博客
09-25 1万+
filter过滤器：用于把Array的某些元素过滤掉，返回剩下的元素。生活中用到的筛子就是过滤器，细孔的筛子可以用来过滤出粉质细腻的面粉，粗一点的筛子可以用来过滤出个头饱满的黄豆，把一些未发育完全的瞎豆子筛出去；净水器可以过滤水中杂质，得到干净的水。我们的代码中也可以用过滤器，得到我们想要的结果！filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。每天学习一点点，每天进步一点点！
js filter滤镜
安安爸Chris的专栏
04-18 553
<br />filter:alpha(opacity=0)
js filter函数
u012174809的专栏
12-21 1269
比起传统的for循环，filter函数对于精准查找某对象更便利。 var dataEx = [ { "system":"info", "title":"信发" }, { "system":"base", "title":"基础管理" }, { "system":"aet", "title":"测温门禁考勤" } ] dataEx = dataEx.fil
js中的filter函数
weixin_45836027的博客
08-23 970
js中的filter函数用法 它会改变原始数组吗 ？？
js中filter函数
weixin_30783913的博客
08-29 398
1、filter()方法将匹配元素的集合缩减为匹配指定选择器的元素，不会检测空数组，不会改变原数组 2、includes方法用来判断一个数组是否包含一个指定的值，是返回true，不是返回false 3、splice删除功能，第一个参数为第一项位置，第二个参数为要删除几个 4、foreach方法用于调用数组的每个元素，并将元素传递给回调函数，对空数组不会执行回调函数 5、parseInt解析...
js中filter()
weixin_39847305的博客
07-04 508
filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。 callback 返回 true 或等价于 true 的值的元素...
js-filter 方法 (Array) (JavaScript)
lijiaojiao123123的专栏
05-09 462
filter(expr) 概述 筛选出与指定表达式匹配的元素集合。 这个方法用于缩小匹配的范围。用逗号分隔多个表达式 参数 exprExpression 表达式 示例 描述: 保留带有select类的元素 HTML 代码: HelloHello AgainAnd Again jQuery 代码: $("p").filter(".selected
js 实现 filter
Luckyzhoufangbing的博客
06-27 212
Array.prototype.filter = function (callback) { if (!(callback instanceof Function)) { throw new Error('filter 传参不是函数') } var resultArr = [] // this 就是调用filter的这个数组 for (var i = 0; i < this.length; i++) { if.
JS filter方法
最新发布
08-26
<think>我们正在回答关于JavaScript数组filter方法的问题。根据用户要求，我们需要参考站内引用，并生成相关问题。 引用[1]中提到了filter方法的一个简单示例，引用[2]提到了数组常用操作方法，引用[3]提到了reduce方法，引用[4]提到了map方法。 用户要求详解filter方法，因此我们将重点放在filter方法上。 结构安排： 1. 介绍filter方法的基本概念和作用。 2. 详细说明语法和参数。 3. 使用示例（多个场景）。 4. 注意事项和常见错误。 5. 与其他方法的比较（如map、reduce等）。 6. 总结。 同时，根据系统级指令，我们需要在适当的地方使用LaTeX格式，并生成相关问题。</think>### JavaScript 数组 filter 方法详解 `filter()` 是 JavaScript 数组的核心高阶函数方法，用于**基于条件筛选数组元素**。它遍历数组，返回一个新数组，包含所有通过测试函数的元素，且**不改变原数组**。以下是详细解析： --- #### 一、核心语法 ```javascript const newArray = arr.filter(callback(element[, index[, array]])[, thisArg]) ``` - **`callback`**：测试函数，接收三个参数： - `element`：当前处理的元素 - `index`（可选）：当前元素的索引 - `array`（可选）：被遍历的数组 - 返回 `true` 保留元素，`false` 则过滤 - **`thisArg`**（可选）：执行 `callback` 时的 `this` 值 - **返回值**：由通过测试的元素组成的新数组 --- #### 二、使用示例 ##### 1. 基础数值筛选 ```javascript const numbers = [10, 23, 7, 45, 32]; const filtered = numbers.filter(num => num > 20); console.log(filtered); // 输出: [23, 45, 32] [^1] ``` ##### 2. 对象数组筛选 ```javascript const users = [ { id: 1, name: "Alice", age: 28 }, { id: 2, name: "Bob", age: 17 }, { id: 3, name: "Charlie", age: 35 } ]; const adults = users.filter(user => user.age >= 18); console.log(adults); // 输出: [{id:1, name:"Alice", age:28}, {id:3, name:"Charlie", age:35}] ``` ##### 3. 复合条件筛选（结合索引） ```javascript const fruits = ["apple", "banana", "cherry", "date"]; const result = fruits.filter((fruit, index) => fruit.length > 5 && index % 2 === 0); console.log(result); // 输出: ["banana"]（长度>5且索引为偶数） ``` ##### 4. 过滤无效值 ```javascript const data = [0, "text", null, 42, undefined, "", NaN]; const validData = data.filter(Boolean); // 利用 Boolean 构造函数 console.log(validData); // 输出: ["text", 42] [^3] ``` --- #### 三、关键特性与注意事项 1. **不修改原数组** `filter()` 始终返回新数组，符合函数式编程原则： ```javascript const arr = [1, 2, 3]; const newArr = arr.filter(x => x > 1); console.log(arr); // [1, 2, 3]（原数组不变） console.log(newArr); // [2, 3] ``` 2. **稀疏数组处理** 对空位（`empty`）元素直接跳过，不执行回调： ```javascript const sparse = [1, , 3]; sparse.filter((x, i) => console.log(i)); // 仅输出索引0和2 ``` 3. **性能优化** - 需中断遍历时使用 `for...of` 或 `for` 循环（`filter` 无法中途退出） - 大型数组优先使用 `for` 循环（性能更高）[^2] 4. **链式调用** 常与 `map()`、`reduce()` 组合实现复杂操作： ```javascript const numbers = [1, 2, 3, 4]; const doubledEvens = numbers .filter(n => n % 2 === 0) .map(n => n * 2); console.log(doubledEvens); // [4, 8] [^4] ``` --- #### 四、与相似方法对比 | 方法 | 返回类型 | 是否修改原数组 | 主要用途 | |------------|------------|----------------|------------------------| | `filter()` | 新数组 | 否 | 条件筛选 | | `map()` | 新数组 | 否 | 元素转换 | | `forEach()`| `undefined`| 否 | 遍历执行副作用 | | `reduce()` | 任意类型 | 否 | 聚合计算（如求和）[^3] | --- #### 五、常见错误 1. **忘记返回值** 回调函数需显式返回布尔值： ```javascript // 错误示例（无返回值 → 返回undefined，视为false） [1, 2, 3].filter(x => { x > 1 }); // 返回 [] // 正确 [1, 2, 3].filter(x => x > 1); // [2, 3] ``` 2. **误修改原数组** 在回调中修改原数组会导致逻辑混乱（如增删元素）[^3]。 --- ### 总结 `filter()` 是处理条件筛选的首选方法，尤其适合： - 从数据集提取满足条件的子集 - 清理无效数据（如空值、异常值） - 函数式编程的链式操作 在需要中断遍历或极致性能的场景下，建议改用 `for` 循环或 `for...of` [^2][^4]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值