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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 智能家居简单实现—使用ESP8266简单实现和APP通讯

    智能家居简单实现—使用ESP8266简单实现和APP通讯前段时间,公司利用ESP8266这个WiFi模块,做了好多小产品。从手机APP直连这个ESP8266进行通讯,再到实现远程控制。中间实现过程磕磕碰碰,虽然这方面已经做得非常成熟,但是网上的资料少之又少。现在把实现方式展示出来,同时也算是做一个笔记。首先这里要实现的是Android端的APP直连ESP8266进行双向通讯。如果想了解Android端的APP远程连接与ESP8266…

    2022年6月13日
    47
  • 如何有效解决高清视频传输中出现的闪屏、黑屏、蓝屏问题?

    如何有效解决高清视频传输中出现的闪屏、黑屏、蓝屏问题?春节期间冬奥会上女足夺冠的精彩赛事是不是还历历在目?你知道体育赛事、音乐会直播以及远程医疗等对视频清晰度和稳定性要求极高的传输是怎么实现的吗?为什么别人4K超高清的视频看起来如此流畅,而你一个1080P的高清视频却经常出现闪屏、黑屏、蓝屏?​在很多视频监控传输的项目,当我们做完项目后,经常会遇到闪屏、黑屏、蓝屏的问题,反复检查线路和接线后仍一筹莫展,查不出问题所在。这是为什么,工程师为您解答,如何有效解决高清视频传输中出现的闪屏、黑屏、蓝屏的问题。​我们都知道一般高清.

    2022年10月3日
    5
  • HTML实用的网页代码大全[通俗易懂]

    HTML实用的网页代码大全[通俗易懂]【一】:符号<p>段落</p> <h>标题</h>(h1—h6) <br>:换行 <hr>:分割线 左右尖括号:<> &表示为:&amp "表示为:" 表格形式<table>

    2022年6月3日
    65
  • 递归和迭代的区别「建议收藏」

    递归和迭代的区别「建议收藏」递归的基本概念:程序调用自身的编程技巧称为递归,是函数自己调用自己.一个函数在其定义中直接或间接调用自身的一种方法,它通常把一个大型的复杂的问题转化为一个与原问题相似的规模较小的问题来解决,可以极大的减少代码量.递归的能力在于用有限的语句来定义对象的无限集合.使用递归要注意的有两点:1)递归就是在过程或函数里面调用自身;2)在使用递归时,必须有一个明确的递归结束条件,称为递归出口.

    2022年6月6日
    23
  • Eclipse使用(入门教程)

    Eclipse使用(入门教程)Eclipse使用入门教程 说起java的IDE,朗朗上口的无非是Eclipse了,假若能熟练Eclipse,对于我们编写java程序会起到事半功倍的效果,大大提高我们工作效率。因此本篇博文,笔者只是针对刚刚入门java的新手,以便他们能尽快掌握Eclipse的使用。 1.常用快捷键 这是使用工具的第一步,熟练使用快捷键对于我们编写程序会起到相当大帮助,所以这里笔者列出的快捷键建议大家必须都掌握…

    2022年6月19日
    41
  • RANSAC算法理解

    最早应该是十四讲上见过,在第九章的project中src中的visual_odometry.cpp中,最核心的求解3d-2d的变换中://整个核心就是用这个cv::solvePnPRansac()去求解两帧之间的位姿变化cv::solvePnPRansac(pts3d,pts2d,K,Mat(),rvec,tvec,false,100,4.0,0.99,in

    2022年4月5日
    206

发表回复

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

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