数组中find和findIndex方法

2,072 阅读2分钟
  • findfindIndex 是 ES6 中 Array.prototype 的两个查询方法。

  • 他们都是数组中遍历类型的方法,能够通过遍历找到数组中符合条件的元素或符合条件的元素的下标。

  • // 这里声明一个对象数组, 供下面例子使用
    var objArr = [
        {
            id: 1,
            name: 'HELLO',
            gender: 0,
            age: 19
        }, 
        {
            id: 2,
            name: 'Bye',
            gender: 1,
            age: 20
        },
        {
            id: 3,
            name: 'IOLIU',
            gender: 0,
            age: 21
        }
    ] 
    
  • find

    • 通过遍历找到数组中符合条件的元素

    • find 方法中传递一个函数作为参数

    • Array.find(function (item) { 
          retrun 条件 
      })
      
      eg: objArr.find(function (item) {
          return item.id === 2
      })
      
    • 传递的函数中的参数 item 表示的是遍历项,每一个遍历项是通过 find 函数内部拿到的

    • return 的作用是:向 find 方法中传递一个条件判断的式子

    • 由此可见方法中,函数作为参数的目的就是可以让程序员编写该方法中一个函数的内容,进而实现该方法的功能

    • 因为 find 中的函数参数返回的是一个条件判断式,所以我们可以认为在 find 中有一个 conditionFunc 条件函数(用来返回一个条件的函数)

    • 试着自己封装一下 find 方法的实现过程:

    • // 因为 find 是 ES6 中的 Array 原型链的方法,因此:
      Array.prototype.myFind = function (conditionFunc) {
          /*
         	在调用 find 方法时传递函数作为参数,其实就是在 find 内部编写了如下代码:
         	var conditionFunc = function (item) {
         		return item.xxx === xxx // 因为这里的 xxx 是根据程序员的需求而改变的,因此需要从外部传进一个函数来实现
         	}
          */
          // 循环遍历该数组中的所有元素
          for (let i = 0; i < this.length; i++) {
              if (conditionFunc(this[i])) {
                  return this[i]
              }
          }
      }
      
  • findIndex

    • findIndex 的原理与 find 一模一样,只不过在 find 方法内部,符合条件返回的是 i,这里不再赘述。