JS Array.filter()方法

最新推荐文章于 2025-07-08 21:14:00 发布
最新推荐文章于 2025-07-08 21:14:00 发布
阅读量1.6w 收藏 3
点赞数 2
分类专栏： JavaScript 文章标签： filter 函数 javascript
本文介绍了JavaScript中Array的filter()方法的使用方式及原理。通过一个示例代码详细讲解了如何利用filter()方法筛选数组中符合条件的元素，并创建新的数组。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天学习了Array的filter方法,MDN上解释的是filter()方法中行参是一个回调函数.这个回调函数就是一个规则,返回一个布尔值.filter()方法会对数组中每一个元素使用这个回调函数.注意,这里说的是每一个元素.并且将返回值为true的元素装入一个新数组返回.代码如下:
    var arr = ["关羽","woi","赵子龙","马zi超","黄忠"];
    var arr1= arr.filter(function(ele,index,array){
        if(ele.length>2){
            return true;
        }
        return false;
    })
    console.log(arr);
    console.log(arr1);

这里定义的function是判断元素的长度,如果大于2 返回true....可是return不是结束function吗?答案是yes.那既然是这样,在控制台输出"赵子龙"的时候filter()这个方法应该结束了啊.其实不然.

return只是结束掉了定义的function,而filter()这个方法内部有一个类似for循环的句式对元素进行依次判断function的功能

手动实现Array.prototype.filter方法
liuhao9999的博客
03-22 269
filter()方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 functionfilter(arr,filterCallback){ //首先，检查传递的参数是否正确。 if(!Array.isArray(arr)||!arr.length||typeoffilterCallback!=='function') { return[]; }else{ letresult=[]; //每次调用此函数时，...
描述一下 Array.forEach() 循环和 Array.map() 方法之间的主要区别
祈澈菇凉
06-03 896
forEach() 和 map() 都是非常有用的数组方法,但在具体使用时需要根据需求来选择合适的方法。
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用，JS中数组过滤器的使用详解（附实际应用代码）
RenGJ010617的博客
04-26 1万+
用array.filter(）来实现数据筛选、数据清洗和链式调用，相对于for循环更加清晰，语义化强，能显著提升代码的可读性和可维护性。
Array.prototype.filter()
agwq1908的博客
01-31 418
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 </head> 8 9 ...
JS数组(超详细)_js 数组
最新发布
likuoelie的博客
07-08 1380
JavaScript 中的数组是一种可变、动态、基于索引的列表结构，底层实现为对象（Object）的特殊形式，既具备序列特征，也保留普通对象的灵活性。下面从基础概念、创建方式、核心属性与方法、遍历、性能与底层机制、进阶技巧等方面做全面解析。
JS 数组中的 filter 方法
a15220216758的博客
05-27 6万+
1、定义 filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 2、语法 array.filter(function(currentValue,index,arr), thisValue); 3、参数说明
js数组高阶函数——filter()方法
热门推荐
杜永康的博客
06-16 7万+
上面的例子中，我们筛选words数组中的每一项元素的长度大于6的元素，因为每一个元素都是个单词，是个字符串，字符串也有长度，所以这样也可以过滤出我们想要的。这个例子中，声明一个数组，并过滤，执行的逻辑是一个条件。条件为值大于等于10，也就是说，我们声明了一个数组，并且筛选了数组中每一项大于10的数字。上面这个例子，我们将数组中每一项id为1的筛选出来。后端有SQL语句可以查询，前端也可以通过这样的方式来实现查询，筛选。⭐一般来说，filter() 方法用于过滤数组中的元素，并返回一个新数组。
JS数组方法：filter
不熬夜的臭宝的博客
05-13 931
前端javascript中filter数组方法
JavaScript 中的 `Array.prototype.filter` 方法全解析
09-15
数组的过滤操作是其中的一个常见需求，Array.prototype.filter 方法为此提供了强大的支持。本文将深入探讨 Array.prototype.filter 方法的工作原理、使用场景、代码示例以及与其他数组方法的比较。 Array.prototype....
Javascript中关于Array.filter()的妙用详解
10-20
在JavaScript中，`Array.prototype.filter()` 是一个非常实用的方法，用于从数组中筛选出符合条件的元素，并返回一个新的数组。这个方法对于数据处理和过滤是非常有用的，尤其在处理大量数据时。接下来，我们将深入...
js array.filter().html
weixin_42193179的博客
06-25 235
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js array.filter()</title> </head> <body> <script> /*参考：https://www.runoob...
JavaScript数组filter方法
Qiemo_的博客
04-28 1万+
1.数组filter方法作用 筛选数组,将满足条件的元素放入新数组中 2.语法 : array.filter( function ( item, index,arr) {} ) 第一个参数: item,必须,当前元素的值 第二个参数 : index,可选,当前元素在数组中的索引值 第三个参数 : arr,当前元素所处的数组对象 3.filter方法特点 (1)函数执行次数 === 数组长度 (2)函数内部的return return true : 满足筛选条件,放入新数组中 return
Js 数组方法：filter()、map()、some()、every()、forEach()、indexOf()、lastIndexOf()、
单眼皮的小熊
01-23 308
filter(): 语法： var filteredArray = array.filter(callback[, thisObject]); 参数说明： callback： 要对每个数组元素执行的回调函数。 thisObject ： 在执行回调函数时定义的this对象。 //过滤掉小于 10 的数组元素： //代码： function isBigEnough(elemen
JS Array filter()方法
qq_43203949的博客
12-25 5745
JS Array filter()方法 js的数据对象有一个fileter()方法，运行传入一个方法，并对数组中的每个元素进行过滤。 var arr = [1,2,3,4,5,6]; function checknum(num){ return num >= 5 ; } var narr = arr.filter(checknum); //结果：narr = [5,6] 1.语法 filter()的完整语法如下： array.filter(function(currentValue,inde
JavaScript-JS数组方法之Array.filter()
hnyanzijun1的博客
07-08 733
filter()方法返回的数组元素是调用的数组的一个子集。传递的函数是用来逻辑判定的：该函数返回true或false。调用判定函数就像调用forEach()和map()一样。如果返回值为true或能转化为true的值，那么传递给判定函数的元素就是就是这个子集的成员，它将被添加到一个作为返回值的数组中。例如： a = [5, 4, 3, 2, 1]; smallvalues = a.flter(function(x) { return x < 3 }); // [2, 1] everyother = a
详解js数组操作——filter()方法
TianXuab的博客
10-18 4219
filter()是JavaScript数组对象的一个内置方法，它用于创建一个新数组，其中包含通过指定函数测试的所有元素。该方法接受一个回调函数作为参数，该函数用于定义筛选的条件。
JavaScript Array之filter基本使用方法
qq_37123563的博客
12-26 500
文章目录前言一、filter是什么？二、使用方法callback参数this(可选)返回值总结 前言 一、filter是什么？ filter是JavaScript Array中的一个方法，接收一个回调函数和一个可选的this指向的参数，返回一个新数组，不会改变原数组。 二、使用方法 const result = array.filter(callback(element, index, array),this) callback参数 element： 数组中正在处理的元素 index(可选)：数组中正在
js array.filter
03-27
<< `Array.prototype.filter()` 是 JavaScript 中数组的一个高阶方法，用于创建一个新数组，其中包含所有通过测试的元素。这个“测试”由我们提供的回调函数定义。 ### 语法： ```javascript array.filter(callback(element[, index[, array]])[, thisArg]) ``` - **callback**：用来检测每个元素是否符合条件的函数。 - `element`：当前正在处理的元素。 - `index（可选）`：当前正在处理的索引值。 - `array（可选）`：调用 filter 方法的那个数组。 - **thisArg（可选）**：执行 callback 时，指定作为 `this` 的值。 --- ### 示例代码： #### 过滤出大于18岁的用户 ```javascript const users = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 17 }, { name: 'Charlie', age: 20 } ]; const adults = users.filter(user => user.age >= 18); console.log(adults); // 输出 [{name: "Alice", age: 25}, {name: "Charlie", age: 20}] ``` --- #### 删除字符串中的空格字符 ```javascript let arr = ['a', '', 'b', null, 'c']; let filteredArr = arr.filter(item => item !== ''); // 移除空串和null等无效数据 console.log(filteredArr); // ["a", "b", "c"] ``` --- ### 注意事项： 1. 如果回调函数返回的是 `true` 或其他真值，则保留该元素；如果返回假值，则丢弃该元素。 2. 不会对空数组进行操作。 3. 原始数组不会被修改，而是返回一个新的数组。 --- ### 性能考虑： 对于非常大的数组，频繁使用 `.filter()` 可能会导致性能下降，因为每次都需要遍历整个数组并分配新的内存空间存储结果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值