您的位置:首页> 前端教程> JS教程
文章导航

JavaScript filter()

2018-9-6 00:46| 作者: admin| 查看: 1659| 评论: 0|来自: 蚂蚁部落

filter() 方法对数组元素进行筛选,并将符合条件的成员存入新数组,ES5 新增。

此方法返回一个由满足筛选条件的成员构成的新数组。

更多内容可以参阅JavaScript Array 数组一章节。

语法结构:

[JavaScript] 纯文本查看 复制代码
array.filter(callbackfn[, thisArg])

参数解析:

(1).callbackfn:必需,回调函数,以升序方式针对数组的每一个元素执行一次此回调函数。           

          如果回调函数的返回值为 true(或可以转换为 true),那么就将对应的数组成员新数组。

          回调函数可以有三个参数:

            第一个参数是当前数组元素值。

            第二个参数是当前数组元素的索引。

            第三个参数就是数组对象本身。

(2).thisArg:可选,规定回调函数中 this 所指向的对象,省略,this 指向 window 对象。

浏览器兼容:

(1).IE9浏览器支持此方法。

(2).edge 浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).火狐浏览器支持此方法。

(5).opera 浏览器支持此方法。

(6).safari 浏览器支持此方法。

代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
let checkElement = function(value, index ,arr){
  console.log(value, index ,arr);
  if(value % 2 == 0){
    return true;
  }
}
let arr = [1,2,3,4,5,6];
console.log(arr.filter(checkElement));
console.log(arr)

谷歌开发者工具控制台打印效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202003/30/155316yt1o4iyfimxhw21h.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).可以筛选出数组中的偶数,并返回存放偶数的新数组。

(2).当数组成员为偶数时,回调函数返回 true,那么就会将当前数组成员写入新数组。

(3).原数组不会被改变。

特别说明:返回值不一定分的是 true 本身,只要能够转换为 true 即可,代码如下:

[JavaScript] 纯文本查看 复制代码运行代码
let checkElement = function(value){
  if(value % 2 == 0){
    return "蚂蚁部落";
  }
}
let arr = [1,2,3,4,5,6];
console.log(arr.filter(checkElement));

谷歌开发者工具控制台打印效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202003/30/155823d65qljoo5uqmx6mh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

将回调函数的返回值由 true 改为 "蚂蚁部落" 功能依然正常。

只要返回值可以转换为 true 就可以,无论是隐式转换还是显式转换。

[JavaScript] 纯文本查看 复制代码运行代码
let obj = {
  min: 3,
  max: 5
}
let checkElement = function(value,obj){
  if(value >= this.min&&value <= this.max){
    return true;
  }
}
let arr=[1,2,3,4,5,6];
console.log(arr.filter(checkElement, obj));

谷歌开发者工具控制台打印效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202003/30/160059lpaofebaauuueb55.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的代码可以获取一个元素大于等于 3 小于等于 5 的新数组。

回调函数传递第二个参数,用来规定回调函数 this 所指向的对象。

默认 this 指向 window 对象,传递第二个参数之后,this 指向 obj 对象。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部