数组常用方法之一 filter()方法 附有源码教程!!!-前端-E先生的博客
Java
MySQL
大数据
Python
前端
黑科技
大语言模型
    首页 >> 互联网 >> 前端

数组常用方法之一 filter()方法 附有源码教程!!!

[导读]:filter()方法功能: 1.同forEach功能; 2.filter的回调函数需要返回布尔值,当为true时,将本次数组的数据返回给filter,最后filter将所有回调函数的返回值组成新数组返回(此功能可理解为“过滤”)。参数:filter(callback);callback默认有三个参数,分别为value,index,self。filter() 方法创建一个新的数组,新数组中的...

filter()方法

功能: 1.同forEach功能; 2.filter的回调函数需要返回布尔值,当为true时,将本次数组的数据返回给filter,最后filter将所有回调函数的返回值组成新数组返回(此功能可理解为“过滤”)。

参数:filter(callback);callback默认有三个参数,分别为value,index,self。

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素(过滤)。和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。

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

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

     //功能1:同forEach
    var arr = ["Tom","Jack","Lucy","Lily","May"];
    var a = arr.filter(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr === self))
    })
    // 打印结果为:
    // Tom--0--true
    // Jack--1--true
    // Lucy--2--true
    // Lily--3--true
    // May--4--true
    //功能2:当回调函数的返回值为true时,本次的数组值返回给filter,被filter组成新数组返回
    var arr = ["Tom","Jack","Lucy","Lily","May"];
    var a = arr.filter(function(value,index,self){
        return value.length > 3;
    })
    console.log(a);         //["Jack", "Lucy", "Lily"]
    console.log(arr);       //["Tom", "Jack", "Lucy", "Lily", "May"]---原数组未改变

在一个Array中,删掉偶数,只保留奇数,可以这么写:

var arr = [1, 2, 4, 5, 6, 9, 10, 15,16];
var r = arr.filter(function (x) {
    return x % 2 !== 0;
});
//r  [1, 5, 9, 15]

把一个Array中的空字符串删掉,trim()函数去掉字符串首尾空白字符,可以这么写:

var arr = ['Easy', '', '阿习', null, undefined, 'E先生', '  '];
var r = arr.filter(function (s) {
    return s && s.trim(); // 注意:IE9以下的版本没有trim()方法
});
arr; // ['Easy', '阿习', 'E先生']

filter()接收的回调函数,其实可以有多个参数。通常我们仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身:

image.png

var arr = ['Easy', '阿习', 'E先生'];
var r = arr.filter(function (element, index, self) {
    console.log(element); // 依次打印'Easy', '阿习', 'E先生'
    console.log(index); // 依次打印0, 1, 2
    console.log(self); // self就是变量arr
    return true;
});



本文来自E先生的博客,如若转载,请注明出处:https://www.javajz.cn

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

欢迎加Easy的QQ