vue mounted中不执行方法_前端开发:Vue中findIndex() 方法的使用

前端开发过程中对数据的遍历是非常常见的操作,在Vue.js中通过对数组下标遍历操作来进行相关逻辑处理的方法常用的有两种:some()和findIndex() ,二者都是通过遍历数组里面的id值来进行操作。本篇博文只介绍findIndex() 方法的使用,some()方法在这里不再多讲。一、findIndex() 方法的定义和使用原理1、findIndex() 方法返回的是传入的一个需求条件(函数)符合条件的数组的第一个元素位置;2、findIndex() 方法为数组中的每个元素都调用一次函数的执行:

c6f54101c524767fcd26126d3636b213.png

31324acc04ccf77d1b59b7e56e551818.png

①当数组中的元素在需求条件时返回为 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}];   //定义一个对象数组listlist.findIndex(function(value){    //value是数组中的数组元素return  需求条件;      //需求条件是根据实际需求来制定的,比如需要获取数组第一个元素});     //如果条件满足,返回为true,就返回的是满足条件的第一个数组元素的下标2、根据id得到下标,默认去遍历list集合,将集合中的每个元素传入到function的itemvar 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、实例

a3e56f5b90aab7b658e60f44ff0f5f94.png

d84b5128cafc6c1c03a84f5343b04c62.png

以上就是本章全部内容,欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!三掌柜的微信公众号:

5806531203d4a1983962ff48698b5bab.png

三掌柜的新浪微博:

a34dbb9e762d89f871cdfa0e6ec0fc5f.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值