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

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

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

丶Serendipity丶   2021-01-31 我要评论
  • 前言

阅读本文前先来思考一个问题,面对一个非空数组,你如何快速对数组进行遍历,如何快速找到数组中第一个我们需要关注的数据元素,并且如何知道该元素在数组中对应的下标索引,可能用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。看下我设置之后的效果,是不是感觉每天都是元气满满的一天。

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们