js--数组的find()和findIndex()方法的使用介绍

• 前言

阅读本文前先来思考一个问题，面对一个非空数组，你如何快速对数组进行遍历，如何快速找到数组中第一个我们需要关注的数据元素，并且如何知道该元素在数组中对应的下标索引，可能用for循环遍历，然后判断元素是否符合条件，逐个遍历查找到需要的元素即可，实现起来也没有多么麻烦，本文就来介绍一个高阶一点的方法，直接拿到结果。

• 正文

1. 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。看下我设置之后的效果，是不是感觉每天都是元气满满的一天。