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。看下我設置之后的效果，是不是感覺每天都是元氣滿滿的一天。