js--数组的find()和findIndex()方法的使用介绍
丶Serendipity丶 人气:0-
前言
阅读本文前先来思考一个问题，面对一个非空数组，你如何快速对数组进行遍历，如何快速找到数组中第一个我们需要关注的数据元素，并且如何知道该元素在数组中对应的下标索引，可能用for循环遍历，然后判断元素是否符合条件，逐个遍历查找到需要的元素即可，实现起来也没有多么麻烦，本文就来介绍一个高阶一点的方法，直接拿到结果。
-
正文
-
find()方法详解
- 语法及定义
find()方法返回通过测试的数组中的第一个元素的值；
find()方法为数组中的每一个元素都调用一次函数执行；
当数组中的元素在测试条件时返回true时，fund()返回符合条件的元素，之后的值不会再调用执行函数，如果没有符合条件的元素返回undefined;
注意：find()对于空数组不会执行函数，同时find()不会改变数组的原始值。
语法：
/**
* @param function 必要参数，用于执行每个数组元素的函数
* @param initialValue 可选。 传递给函数的值一般用 "this" 值。
*/
/**
* @param currentValue 必要参数， 必需。当前元素
* @param index 可选参数，当前参数的下标
* @param arr 可选参数，当前元素所属的数组对象
*/
array.find(function(currentValue, index, arr),thisValue)
- 使用方法
（1）根据定义模仿find()方法的实现
//原型添加
Array.prototype.myfind=function(func, context){
const self = this
//对于空数组不做处理
if(self.length=="0"){
return
}
const ctx = context ? context : self //this指向问题
let res = ""//定义返回结果
let isFirst = true//用于区别只返回第一个满足条件的值
for (let i = 0; i < ctx.length; i++) {
if(func(ctx[i]) && isFirst){
isFirst = false
res = ctx[i]
}
}
return res ? res : undefined
}
var arr=[1,2,3,4,5]
var myfunc=(v)=>v>2
console.log(arr.myfind(myfunc))//输出3
（2）在对象数组中快速找到需要的值
//快速找到小明的年龄是多少
var arrInfo=[{name:"小明",age:17},{name:"小红",age:18},{name:"小王",age:19}]
var myage=arrInfo.find(v=>v.name=="小明").age
console.log("小明的年龄是"+myage)//输出小明的年龄是17
（3）判断数组中是否含有某个值
//判断数组arr是否存在5
var arr=[0,1,2,3]
console.log(arr.find(v=>v==5));//undefied表示数组不存在该元素
如果你上面的fidn()已经完全明白了，那么下边的findIndex()就更加容易掌握。
2.findIndex()方法详解
- 语法及定义
findIndex()方法返回数组第一个符合测试条件的元素的下标索引；
findIndex()方法为数组每个元素都调用一次函数执行；
findIndex()方法当数组中的元素在测试条件时返回true时，findIndex()返回符合条件的元素的索引位置，之后的元素不会再调用该测试函数执行,如果没有符合条件的元素则返回-1。
注意：findIndex()对于空数组不会执行，并且不会改变数组的原始值。
语法：
/**
* @param function 必要参数，用于执行每个数组元素的函数
* @param initialValue 可选。 传递给函数的值一般用 "this" 值。
*/
/**
* @param currentValue 必要参数， 必需。当前元素
* @param index 可选参数，当前参数的下标
* @param arr 可选参数，当前元素所属的数组对象
*/
array.findIndex(function(currentValue, index, arr), thisValue)
- 使用方法
（1）根据定义模仿findIndex()方法的实现
//原型添加
Array.prototype.myfindIndex=function(func, context){
const self = this
//对于空数组不做处理
if(self.length=="0"){
return
}
const ctx = context ? context : self
let res = ""//定义返回结果
let isFirst = true//用于区别只返回第一个满足条件的值
for (let i = 0; i < ctx.length; i++) {
if(func(ctx[i]) && isFirst){
isFirst = false
res = i
}
}
return res ? res : "-1"
}
var arr=[0,1,2,3]
var myfunc=(v)=>v>2
console.log(arr.myfindIndex(myfunc))//输出3
（2）判断数组是否存在某个元素
//判断数组种是否存在6
var arr=[1,2,3,4,5]
console.log(arr.findIndex(v=>v==6))//-1 表示数组种不存在值为6的元素
总结
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。最后给大家介绍一款更改VsCode背景图片的插件，直接拓展插件栏搜background-cover。看下我设置之后的效果，是不是感觉每天都是元气满满的一天。
加载全部内容