乐趣区

关于前端:前端开发框架Vue之findIndex-的使用

前端开发过程中对数据的遍历是十分常见的操作,在 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 的第一个元素索引地位
var list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
function checkAdult(num) {
return num >= 18;
}
function myFunction() {
document.getElementById(“test”).innerHTML = list.findIndex(checkAdult);
}
最终的输入后果为:4 也就是第 5 个元素的下标地位。
二、findIndex() 办法具体应用
1、var list = [{id:},{id:2},{id:3},{id:4}]; // 定义一个对象数组 list
list.findIndex(function(value){//value 是数组中的数组元素
return 需要条件; // 需要条件是依据理论需要来制订的,比方须要获取数组第一个元素
}); // 如果条件满足,返回为 true,就返回的是满足条件的第一个数组元素的下标
2、依据 id 失去下标,默认去遍历 list 汇合,将汇合中的每个元素传入到 function 的 item
var index = this.list.findIndex(function(item){// 依据 item 中的 id 属性来判断这个 item 是否是下面 id 中对应的数据,如果是返回一个 true , 否返回 false, 持续上面的一条数据的遍历,以此类推
return item.id ==id; // 若返回 true,那么 findIndex 办法会将这个 item 对应的 id 返回到里面接管
});
3、通过 findIndex() 找下标索引的办法
var index = this.list.findIndex(item){
if(item.id = id){
return true
}
}
4、实例

退出移动版