es6数组方法find()、findIndex()与filter()的总结

es6数组方法find()、findIndex()与filter()的总结find()该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件,当条件成立为true时,返回该元素。如果没有符合条件的元素,返回值为undefined。以下代码在myArr数组中查找元素值大于4的元素,找到后立即返回。返回的结果为查找到的元素:constmyArr=[1,2,3,4,5,6];varv=myArr.find(value=>value>4);console.log(v);//5没有符合元素,返回undefi

大家好,又见面了,我是你们的朋友全栈君。

find()

该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件,当条件成立为true时,返回该元素。如果没有符合条件的元素,返回值为undefined。

以下代码在myArr数组中查找元素值大于4的元素,找到后立即返回。返回的结果为查找到的元素:
const myArr=[1,2,3,4,5,6];
var v=myArr.find(value=>value>4);
console.log(v);// 5
没有符合元素,返回undefined:
const myArr=[1,2,3,4,5,6];
var v=myArr.find(value=>value>40);
console.log(v);// undefined
回调函数有三个参数。value:当前的数组元素。index:当前索引值。arr:被查找的数组。

查找索引值为4的元素:

const myArr=[1,2,3,4,5,6];
var v=myArr.find((value,index,arr)=>{ 
   
    return index==4
});
console.log(v);// 5

findIndex()

findIndex()与find()的使用方法相同,只是当条件为true时findIndex()返回的是索引值,而find()返回的是元素。如果没有符合条件元素时findIndex()返回的是-1,而find()返回的是undefined。findIndex()当中的回调函数也是接收三个参数,与find()相同。

const bookArr=[
    { 
   
        id:1,
        bookName:"三国演义"
    },
    { 
   
        id:2,
        bookName:"水浒传"
    },
    { 
   
        id:3,
        bookName:"红楼梦"
    },
    { 
   
        id:4,
        bookName:"西游记"
    }
];
var i=bookArr.findIndex((value)=>value.id==4);
console.log(i);// 3
var i2=bookArr.findIndex((value)=>value.id==100);
console.log(i2);// -1

filter()

filter()与find()使用方法也相同。同样都接收三个参数。不同的地方在于返回值。filter()返回的是数组,数组内是所有满足条件的元素,而find()只返回第一个满足条件的元素。如果条件不满足,filter()返回的是一个空数组,而find()返回的是undefined

var userArr = [
    { 
    id:1,userName:"laozhang"},
    { 
    id:2,userName:"laowang" },
    { 
    id:3,userName:"laoliu" },
]
console.log(userArr.filter(item=>item.id>1));
//[ { id: 2, userName: 'laowang' },{ id: 3, userName: 'laoliu' } ]

数组去重:

var myArr = [1,3,4,5,6,3,7,4];
console.log(myArr.filter((value,index,arr)=>arr.indexOf(value)===index));
//[ 1, 3, 4, 5, 6, 7 ]
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/139450.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 谷歌打开微信定位服务器地址,使用Chrome修改user agent模拟微信内置浏览器

    谷歌打开微信定位服务器地址,使用Chrome修改user agent模拟微信内置浏览器很多时候,我们需要模拟微信内置浏览器,今天教大家用chrome简单模拟。如图设置:F12或者右键审查元素进入开发者模式,点击Emulation,然后点击Network,把Spoofuseragent改成Other,并把下面的带复制进去,有三句,大家自己尝试。回车然后刷新页面即可。Mozilla/5.0(iPhone;CPUiPhoneOS5_1likeMacOSX)Appl…

    2022年6月1日
    56
  • 验证码的作用及原理

    验证码的作用及原理验证码的发展历程从互联网诞生前期,互联网是没有验证码的。在论坛博客上发帖子,只要敲一下回车键按“发表”就可以了。然而,有白客就有黑客,随着计算机程序的愈发发展,黑客十分猖狂。他们编写了一种能够大量、重复编写信息的程序,伪装成人类用户,肆无忌惮的在网络上倾倒大量的、无意义的“僵尸”信息,垃圾邮件、垃圾广告、垃圾评论到处飞。更编写了模仿登录、恶意激活成功教程代码、刷票等恶意程序。这严重影响了互联网的正常运行,导致体验效果很差。以受影响最大的电子邮件的提供商为例:用户每天收到数以千计的垃圾邮件,严重影响工作效率。.

    2022年7月14日
    18
  • adnroid仿miui的dialog

    adnroid仿miui的dialog

    2021年12月13日
    48
  • JSP的Web监听器(Listener)

    JSP的Web监听器(Listener)JSP的Web监听器(Listener)

    2022年4月22日
    70
  • 递归算法php,php递归算法经典实例「建议收藏」

    递归算法php,php递归算法经典实例「建议收藏」PHP递归算法就是函数调用函数了操作非常的简单了,我们下面来给各位介绍PHP递归算法及实际的一些关于递归的用法。递归函数为自调用函数,在函数体内直接或间接自己调用自己,但需要设置自调用的条件,若满足条件,则调用函数本身,若不满足则终止本函数的自调用,然后把目前流程的主控权交回给上一层函数来执行,可能这样给大家讲解,还是很难明白,直接上例子functiontest($n){echo$n.”…

    2022年8月11日
    8
  • 步入J2EE架构和过程「建议收藏」

    步入J2EE架构和过程「建议收藏」标 题:步入J2EE架构和过程发信站:BBS水木清华站(FriApr2616:02:082002)本文转自赛迪网开发者developer.ccidnet.com摘要Java2企业版(J2EE)平台由四个关键部分构成:规格说明、参考实现、兼容性测试套件和蓝图(BluePrint)计划。蓝图描绘了分布式组件架构最好的实践和设计指导方针。本文基于Rational统一过程和Bl

    2025年6月20日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号