JS中关于filter()方法的使用及说明

 更新时间:2023年05月24日 14:31:48   作者:铁锤妹妹@  
这篇文章主要介绍了JS中关于filter()方法的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

关于filter()方法的使用

常见的场景:当我们从后端请求到数据列表时,我们需要对其中符合条件的数据进行筛选、当我们拿到数据,我们希望把英文首字母大写,数组去重等等。

定义和用法

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

注意:

filter() 不会对空数组进行检测;不会改变原始数组

语法

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

返回值:

返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

实例

实例1

返回数组nums中所有大于5的元素。

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = nums.filter((num) => {
  return num > 5;
});
console.log(res);  // [6, 7, 8, 9, 10]

实例2 

对数组进行过滤,筛选出年龄大于 18岁的数据

const arr = [
	{
        name: 'tom1',
        age: 23
    },
    {
        name: 'tom2',
        age: 42
    },
    {
        name: 'tom3',
        age: 17
    },
    {
        name: 'tom4',
        age: 13
    },
]
const res = arr.filter(item => item.age > 18);
console.log(res);  //[{name: 'tom1',age: 23},{name: 'tom2',age: 42}]
console.log(arr);

实例3 

利用 filter 遍历出所有偶数

let arr = [56, 15, 48, 3, 7];
let newArr = arr.filter(function (x) {
    return x % 2 === 0;
});
console.log(newArr)
// [56, 48]

实例4

把一个Array中的空字符串删掉,可以这么写:

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

实例5 

利用 filter 进行数组去重

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
var arr = [1,1,'RUNOOB','RUNOOB',true,true,15];
console.log(unique(arr))
// [1, "RUNOOB", true, 15]
 var arr = ['apple','strawberry','banana','pear','apple','orange','orange','strawberry']
 var temp_arr = arr.filter(function (element, index, self) {
      return self.indexOf(element) === index
    })
 console.log(temp_arr)

indexOf总是返回第一个元素的位置,后续的重复元素位置与indexOf返回的位置不相等,因此被filter滤掉了,所以重复的元素仅会保留第一个位置的元素

filter()和indexO一起使用能做啥

分开使用

第一:js中indexof()检测字符在字符串中首次出现的位置(下标),若未匹配到则返回-1。

注意:检测的字符不能为空哦,否则会返回第一个字符的下标。

第二:js中的filter的方法,筛选数组中符合条件的,将每一次符合条件的字符放入新数组中!

结合使用

场景一:去除数组中重复字符

场景2:去除数组对象中的重复对象

只有掌握好零星的知识点,才能懂的结合一起使用!

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • uni-app多环境部署解决方案详解

    uni-app多环境部署解决方案详解

    uni-app可通过process.env.NODE_ENV判断当前环境是开发环境还是生产环境,下面这篇文章主要给大家介绍了关于uni-app多环境部署的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 浅聊一下JavaScript中的LHS和RHS查询

    浅聊一下JavaScript中的LHS和RHS查询

    在日常编码中,我们通常关注代码的逻辑和功能,但很少深入思考编译器在幕后的工作,今天我们将学习一下LHS(Left-Hand Side)和RHS(Right-Hand Side)查询,它们在JavaScript编译和执行中的关键作用,以及在我们的日常开发中是如何发挥作用的,需要的朋友可以参考下
    2023-11-11
  • js中apply()和call()的区别与用法实例分析

    js中apply()和call()的区别与用法实例分析

    这篇文章主要介绍了js中apply()和call()的区别与用法,结合实例形式分析了apply()和call()的功能、区别、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-08-08
  • 微信小程序的授权实现过程解析

    微信小程序的授权实现过程解析

    这篇文章主要介绍了微信小程序的授权实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • javascript编程异常处理实例小结

    javascript编程异常处理实例小结

    这篇文章主要介绍了javascript编程异常处理的方法,结合实例形式分析总结了JavaScript编程中异常处理的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 微信小程序全局文件的使用详解

    微信小程序全局文件的使用详解

    在小程序开发时,每个页面都对应一个目录,每个目录又分别有wxml、wxss、js和json四个文件。详细说明可查看后续文章介绍,本文主要详解全局文件
    2022-08-08
  • js实现时间日期校验

    js实现时间日期校验

    这篇文章主要为大家详细介绍了js实现时间日期校验,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 两个select多选模式的选项相互移动(示例代码)

    两个select多选模式的选项相互移动(示例代码)

    本篇文章主要是对两个select多选模式的选项相互移动示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • JavaScript单例模式实现自定义弹框

    JavaScript单例模式实现自定义弹框

    这篇文章主要为大家详细介绍了JavaScript单例模式实现自定义弹框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JavaScript获取URL参数的几种方法小结

    JavaScript获取URL参数的几种方法小结

    在Web开发中,经常需要从URL中提取参数来进行相应的操作,本文将深度解析在JavaScript中获取URL参数的几种方法,并附带一些扩展与高级技巧,希望对你有所帮助
    2024-09-09

最新评论