当前位置: 首页 > Web前端 > HTML

前端开发框架Vue的findIndex()的使用

时间:2023-03-29 13:08:06 HTML

是前端开发过程中很常见的遍历数据的操作。在Vue.js中,前端训练方法中常用的通过遍历数组下标进行相关逻辑处理的方法有两种:some()和findIndex(),都是通过遍历id值来操作的在数组中。本篇博文只介绍findIndex()方法的使用,some()方法在此不再赘述。一、findIndex()方法的定义及使用原理1、findIndex()方法返回传入的满足要求条件(函数)的数组第一个元素的位置;2、findIndex()方法为数组中的元素每个元素调用一次函数的执行:①当数组中的元素满足要求条件时返回true,findIndex()返回满足的元素的索引位置条件,后面的值不会调用执行函数;②如果没有符合条件的元素返回-1;③findIndex()不会对空数组执行函数;④findIndex()不改变数组的原始值。3、使用语法list.findIndex(function(currentValue,index,arr),thisValue)具体参数解释如下:4、使用实例eg:获取第一个大于4的元素在索引中的索引位置arrayvarlist=[1,2,3,4,5,6,7,8,9];functioncheckAdult(num){returnnum>=18;}functionmyFunction(){document.getElementById(“测试”).innerHTML=list.findIndex(checkAdult);}最终输出结果为:4,即第5个元素的下标位置。二、findIndex()方法的具体使用1.varlist=[{id:},{id:2},{id:3},{id:4}];//定义一个对象数组listlist.findIndex(function(value){//value为数组返回需求条件中的数组元素;//需求条件根据实际需求制定,例如数组的第一个元素需要获取});//满足条件则返回true,则返回第一个满足条件的数组元素的下标2.根据id获取下标,默认遍历list集合,将数组中的每个元素传入collectiontotheitemvarindexofthefunctionindex=this.list.findIndex(function(item){//根据item中的id属性,判断item是否是上面id中对应的数据,如果返回true,如果不是则返回false,继续遍历后面的数据,以此类推returnitem.id==id;//如果返回true,则findIndex方法会将item对应的id返回给外部接收});3.通过findIndex()查找下标索引的方法varindex=this.list.findIndex(item){if(item.id=id){returntrue}}4.例子

最新推荐
猜你喜欢