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:去除数组对象中的重复对象

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

总结

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

相关文章

  • JavaScript 验证浏览器是否支持javascript的方法小结

    JavaScript 验证浏览器是否支持javascript的方法小结

    一些网站只有客户端js的验证,这样就给一些hacher一些可趁之机了,不信大家测试一些网站的注册功能看看,有部分网站只有客户端验证,我为了达到客户端验证,先是判断浏览器是否支持js,如果不支持,提示信息,然后屏蔽掉发送按钮
    2009-05-05
  • javascript createElement()创建input不能设置name属性的解决方法

    javascript createElement()创建input不能设置name属性的解决方法

    今天在使用document.createElement()动态创建input时,发现不能为其name赋值,以下是测试代码。
    2009-10-10
  • js实现随屏幕滚动的带缓冲效果的右下角广告代码

    js实现随屏幕滚动的带缓冲效果的右下角广告代码

    这篇文章主要介绍了js实现随屏幕滚动的带缓冲效果的右下角广告代码,涉及javascript基于数学运算及定时函数动态操作页面元素的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 深入了解JavaScript中的函数柯里化

    深入了解JavaScript中的函数柯里化

    JavaScript函数柯里化是一种将接受多个参数的函数转换为一系列接受单个参数的函数的技术。本文将通过简单的示例为大家详细讲讲函数柯里化的相关应用,需要的可以参考一下
    2023-04-04
  • Google 二维条码 API 整理

    Google 二维条码 API 整理

    Google 二维条码 API 整理,需要的朋友可以参考下。
    2010-11-11
  • 基于JavaScript实现前端数据多条件筛选功能

    基于JavaScript实现前端数据多条件筛选功能

    这篇文章主要为大家详细介绍了基于JavaScript实现前端数据多条件筛选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • JavaScript 中的六种循环方法

    JavaScript 中的六种循环方法

    这篇文章主要介绍了JavaScript 中的六种循环方法,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2021-01-01
  • JavaScript对象与数组的几种常见复制方法

    JavaScript对象与数组的几种常见复制方法

    在 JavaScript 开发中,对象和数组的复制是一个非常常见的操作,无论是函数参数传递、状态管理,还是避免不必要的副作用,了解和掌握各种复制方式至关重要,我们将系统梳理 JavaScript 中的几种常见复制方法,并对其应用场景进行详细说明,需要的朋友可以参考下
    2024-10-10
  • js绘制圆形和矩形的方法

    js绘制圆形和矩形的方法

    这篇文章主要介绍了js绘制圆形和矩形的方法,涉及javascript鼠标事件及页面元素样式的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • JScript分割字符串示例代码

    JScript分割字符串示例代码

    分割字符串的方法有很多,下面为大家介绍下使用JScript简单实现下,喜欢的朋友可以参考下
    2013-09-09

最新评论