• js中filter过滤用法总结


    定义和用法

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

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

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

    语法

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

    参数说明

    参数描述
    function(currentValue, index,arr) 必须。函数,数组中的每个元素都会执行这个函数
    函数参数:
    参数描述
    currentValue 必须。当前元素的值
    index 可选。当期元素的索引值
    arr 可选。当期元素属于的数组对象
    thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
    如果省略了 thisValue ,"this" 的值为 "undefined"

    首先回顾一下filter的作用:过滤数组中符合条件的元素

    基本用法

    1
    2
    3
    let arr = [1, 3, 5, 8]
    let arrFilter = arr.filter(ele => ele > 4)
    console.log(arrFilter) // [5, 8]

    另外也可以用来过滤对象数组中符合条件的对象,eg:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    let arrObj = [{
    name: 'aa', age: 13
    }, {
    name: 'bb', age: 23
    }, {
    name: 'cc', age: 18
    }, {
    name: 'dd', age: 11
    }, {
    name: 'ee', age: 28
    }]
    let arrObjFilter = arrObj.filter(ele => ele.age > 18)
    console.log(arrObjFilter) // [{name: 'bb', age: 23}, {name: 'ee', age: 28}]

    进阶用法

    数组去重(有点过时)

    1
    2
    3
    4
    5
    let arr = [1, 2, 3, 2, 3, 4]
    let arrFilter = arr.filter((ele, index, arr) => {
    return arr.indexOf(ele) === index
    })
    console.log(arrFIlter)

    目前比较常用的方法是使用ES6的set完成,eg:

    1
    2
    3
    let arr = [1, 2, 3, 2, 3, 4]
    let arrFilter = [...new Set(arr)]
    console.log(arrFilter)

    数组中的空字符去除

    1
    2
    3
    4
    5
    let arr = ['1', '2', '3', '', null, undefined, '  ', '4']
    let arrFilter = arr.filter((ele, index, arr) => {
    return ele && ele.trim()
    })
    console.log(arrFIlter)

    高级用法

    结合map使用可以先过滤出符合条件的对象然后去除某些不需要的字段,比如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 需求: 年龄大于18的姓名
    let arrObj = [{
    name: 'aa', age: 13
    }, {
    name: 'bb', age: 23
    }, {
    name: 'cc', age: 18
    }, {
    name: 'dd', age: 11
    }, {
    name: 'ee', age: 28
    }]
    let arrObjFilter = arrObj.filter(ele => ele.age > 18).map(ele => {
    return ele.name
    })
    console.log(arrObjFilter) // ['bb', 'ee']
    filter()

    简单讲filter就是一个数组过滤器,参数接收一个函数,数组的每一项经过函数过滤,返回一个符合过滤条件的新数组

    函数接收三个参数:

    • item (当前遍历的数组项)
    • i (当前项索引)
    • arr (调用filter数组本身)
          // 需求找到数组内偶数
     let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    
            let newArr = arr.filter((item, i, arr) => {
                //函数本身返回布尔值,只有当返回值为true时,当前项存入新数组。
                return item % 2 == 0
            })
            console.log(newArr)
    再来一个应用,巧妙地用filter结合indexof实现去重
    indexOf在js中有着重要的作用,可以判断一个元素是否在数组中存在,或者判断一个字符是否在字符串中存在,如果存在返回该元素或字符第一次出现的位置的索引,不存在返回-1。
    let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 2, 3, 4, 5, 6, 7]
    
            let newArr = arr1.filter(function(item, i, self) {
                let a = self.indexOf(item)
                console.log(`item----${item},self.indexOf(item)---${a},i----${i}`)
                return self.indexOf(item) === i;
            });
    
            console.log(newArr) //[1, 2, 3, 4, 5, 6, 7, 8]



  • 相关阅读:
    poj 1700 Crossing River 过河问题。贪心
    Alice's Print Service
    POI 2000 ------Stripes
    Uva 1378
    hdu 3068 最长回文
    bnu Game 博弈。
    链栈的C语言实现
    链栈的C语言实现
    顺序栈C语言实现
    顺序栈C语言实现
  • 原文地址:https://www.cnblogs.com/ltb6w/p/10994571.html
Copyright © 2020-2023  润新知