ES6数组方法find()、findIndex()的总结「建议收藏」

ES6数组方法find()、findIndex()的总结「建议收藏」本文主要讲解ES6数组方法find()与findIndex(),关于JS的更多数组方法,可参考以下:①JavaScript内置对象之-Array②ES5新增数组方法(例:map()、indexOf()、filter()等)③ES6新增字符串扩张方法includes()、startsWith()、endsWith()1.find()该方法主要应用于查找第一个符合条件的数组元素,即…

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

本文主要讲解ES6数组方法find()findIndex(),关于JS的更多数组方法,可参考以下:

①JavaScript 内置对象之-Array

②ES5新增数组方法(例:map()、indexOf()、filter()等)

③ES6新增字符串扩张方法includes()、startsWith()、endsWith()


1. find()

  • 该方法主要应用于查找第一个符合条件的数组元素,即返回通过测试(函数内判断)的数组的第一个元素的值。
  • 它的参数是一个回调函数,为数组中的每个元素都调用一次函数执行。在回调函数中可以写你要查找元素的条件,当条件成立为true时,返回该元素,之后的值不会再调用执行函数。如果没有符合条件的元素,返回值为undefined

例:
① 以下代码在myArr数组中查找元素值大于5的元素,找到后立即返回,并不会继续往下执行。返回的结果为查找到的元素:

const myArr=[1,2,3,4,5,6,7,8,9];
var v=myArr.find(value=>value>5);
console.log(v);

结果:
在这里插入图片描述
② 如果把条件改为>10,没有符合元素,则返回undefined:

const myArr=[1,2,3,4,5,6,7,8,9];
var v=myArr.find(value=>value>10);
console.log(v); 

结果:
在这里插入图片描述
③ 它的回调函数有三个参数。value:当前的数组元素。index:当前索引值。arr:被查找的数组。

例:
查找索引值为5的元素,结果显示6:

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

结果:
在这里插入图片描述

注意:

  • find() 对于空数组,函数是不会执行的。
  • find() 并没有改变数组的原始值。

2. findIndex()

  • findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

  • 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置注:find()返回的是元素),之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1注:find()返回的是undefined)。

  • findIndex()与find()的使用方法相同,findIndex()当中的回调函数也是接收三个参数,与find()相同。

  • findIndex()方法实现是通过循环遍历查找。应用场景广泛,可以查找大于等于小于,表达式可以随便写。实际上相当于一个for循环,只不过找到了你不需要自己退出。

语法:

array.findIndex(function(currentValue, index, arr), thisValue);

例①:

const myArr=[
    { 
   
        id:1,
        Name:"张三"
    },
    { 
   
        id:2,
        Name:"李四"
    },
    { 
   
        id:3,
        Name:"王五"
    },
    { 
   
        id:4,
        Name:"赵六"
    }
];
var i0=myArr.findIndex((value)=>value.id==1);
console.log(i0); 
var i1=myArr.findIndex((value)=>value.id==2);
console.log(i1); 
var i2=myArr.findIndex((value)=>value.id==3);
console.log(i2); 
var i3=myArr.findIndex((value)=>value.id==4);
console.log(i3); 
var i4=myArr.findIndex((value)=>value.id==5);
console.log(i4); 

结果:
在这里插入图片描述
例②:

const myArr = [1,2,3,4,5,6,7,8,9];
function bigNum(ele){ 
   
    return ele > 6;
}
console.log(myArr.findIndex(bigNum));

结果(也就是数组中第一个大于6的数,即“7”所在位置的索引):
在这里插入图片描述
例③:可以用来返回符合大于输入框中数字的数组索引

var ages = [2,4,6,8,10];
 
function checkAdult(age) { 
   
    return age >= document.getElementById("ageToCheck").value;
}
 
function myFunction() { 
   
    document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}

注意:

  • findIndex() 对于空数组,函数是不会执行的。
  • findIndex() 并没有改变数组的原始值。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

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

(0)
上一篇 2022年6月13日 下午12:00
下一篇 2022年6月13日 下午12:16


相关推荐

  • 原生微信小程序轮播图点击放大

    原生微信小程序轮播图点击放大<swiperclass=”index-adcs-sqiper”indicator-dots=”{{indicatorDots}}”interval=”{{interval}}”duration=”{{duration}}”circular=”{{circular}}”style…

    2022年5月11日
    37
  • Vuforia 使用

    Vuforia 使用Vuforia 使用在 Unity 中开始使用 VuforiaVufor 在统一关于 Vuforia 安装 Vuforia 创建一个新的 Unity 项目 Vuforia 游戏对象在您的项目中激活 Vuforia 访问 Unity 中的 Vuforia 功能将目标添加到您的场景添加数字资产播放现场建立和运行你的应用程序配置数字眼镜的项目学到更多 Vuforia 在统一截至 2017 年 2 月 Unity 集成了 Vuforia 引擎 使其更容易为手持设备和头戴式设备创建先进的增强现实体验 您可以通过 developer

    2026年3月17日
    2
  • MySQL百分比显示和显示前百分之几的方法

    MySQL百分比显示和显示前百分之几的方法1)查询所有时间内,所有产品销售金额占比,按占比大小降序排序,筛选累计占比在前80%的产品,结果输出排名产品名称销售金额占比累计占比。2)查询所有时间内,各个国家的销售情况,销售合计金额大于10000视为业绩合格,否则为不合格,结果输出国家销售金额业绩情况。3)查询中国、英国每个月份的销售情况,2020年8月份销售合计金额大于10000视为业绩合格,否则为不合格,2020年9月份销售合计金额大于12000视为业绩合格,否则为不合格,结果输出月份中国销售业绩、英国销售业绩。

    2022年7月27日
    8
  • accept 函数_case when函数

    accept 函数_case when函数2.关于AcceptEx  使用此函数时,要包含头文:Mswsock.h,同时要链接:Mswsock.lib。可在源程序中加入下面的语句,这样在编译时,将自动链接Mswsock.lib。  #pragmacomment(lib,”Mswsock.lib”)    下面是使用AcceptEx函数的示例代码:  #defineSTRICT  #define_WIN32_WINNT0x050

    2026年4月18日
    7
  • [已发表,转载勘误]Android upx脱壳「建议收藏」

    [已发表,转载勘误]Android upx脱壳「建议收藏」已发在https://www.anquanke.com/post/id/197643不过有部分内容发布之后无法编辑,勘误后如下。Androidupx脱壳写在前面因为我不是pc平台过来的,而是直接从Android入门的,所以upx壳其实一开始并不了解,后来接触到,但是可以直接动态调试或者做个内存快照,对我来说加没加upx其实对我逆向分析影响不大。另一方面upx壳因为开源且其实有很多脱壳的教…

    2022年7月19日
    21
  • plugins webpack_webpack plugin原理

    plugins webpack_webpack plugin原理plugin插件是webpack的支柱功能。webpack自身也是构建于你在webpack配置中用到的相同的插件系统之上!插件目的在于解决loader无法实现的其他事。常用的插件

    2022年8月7日
    7

发表回复

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

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