js中数组find方法的使用和实现

js中数组find方法的使用和实现

find方法定义

find() 方法返回数组中满足传入函数条件的第一个元素的值。否则返回 undefined。

find方法语法

arr.find(callback(element [, index[, selfArr]]) {} [, thisArg])

find方法参数

callback
在数组每一项上执行的函数，接收 3 个参数：
（1）element
当前遍历到的元素。
（2）index可选
当前遍历到的索引。
（3）array可选
调用find方法的数组本身。
thisArg可选
执行callback回调时用作this 的对象。

find方法返回值

数组中第一个满足所传入callback函数的元素的值，否则返回 undefined。

详细描述

find方法对数组中的每一项元素执行一次 callback 函数，直至有一个 callback 返回 true。当找到了这样一个元素后，该方法会立即返回这个元素的值，否则返回 undefined。
注意 callback 函数会为数组中的每个索引调用即从 0 到 length - 1，而不仅仅是那些被赋值的索引。（这点是区别于map和fliter等等方法的）

callback函数带有3个参数：当前元素的值、当前元素的索引，以及数组本身。

如果提供了 thisArg参数，那么它将作为每次 callback函数执行时的this ，如果未提供，则使用 undefined。（this指向取决于this的指向规则）

find方法不会改变原数组。

在第一次调用 callback函数时会确定元素的索引范围，因此在 find方法开始执行之后添加到数组的新元素将不会被 callback函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到，但是其值已经是undefined了。

使用示例

查询大于3的元素

    let arr = [0, 1, , , 4]
    const reasult = arr.find((m, index) => {
      console.log({m, index})
      return m > 3
    })
    console.log(reasult)
    // {m: 0, index: 0}
    // {m: 1, index: 1}
    // {m: undefined, index: 2}
    // {m: undefined, index: 3}
    // {m: 4, index: 4}
    // // 4  [0, 1, empty × 2, 4]

上述代码结果返回大于3的第一个元素。根据打印结果可以看出原数组里面的空值也会进行callback函数调用，最后返回callback返回值为true的那个原数组中的元素。原数组arr没有任何改变。

获取数组中的对象

    let arr2 = [
      {
        name: 'kat'
      },
      {
        name: 'dog'
      }
    ]
    const reasult2 = arr2.find((element, index) => {
      console.log({element, index})
      return element.name === 'kat'
    })
    console.log(reasult2)
    // {element: {name: "kat"}, index: 0}
    // {name: "kat"}

上述代码返回原数组中name为 ‘kat’的对象。下面来模拟实现自己的find方法；

思路步骤

1、将myFind方法挂到数组的原型上
2、获取原数组的长度
3、利用call方法调用并改变callback函数的this
4、判断acllback函数的返回值，返回当前元素

实现代码

    Array.prototype.myFind = function(callback, thisArg) {
      let length = this.length
      for (let index = 0; index < length; index++) {
        if (callback.call(thisArg, this[index], index, this)) return this[index]
      }
    }

测试验证

    Array.prototype.myFind = function(callback, thisArg) {
      let length = this.length
      for (let index = 0; index < length; index++) {
        if (callback.call(thisArg, this[index], index, this)) return this[index]
      }
    }

    let arr = [0, 1, , , 4]
    const reasult = arr.myFind((element, index) => {
      console.log({element, index})
      return element > 3
    })
    console.log(reasult, arr)
    // {m: 0, index: 0}
    // {m: 1, index: 1}
    // {m: undefined, index: 2}
    // {m: undefined, index: 3}
    // {m: 4, index: 4}
    // 4  [0, 1, empty × 2, 4]

    let arr2 = [
      {
        name: 'kat'
      },
      {
        name: 'dog'
      }
    ]
    const reasult2 = arr2.myFind((element, index) => {
      console.log({element, index})
      return element.name === 'kat'
    })
    console.log(reasult2)
    // {element: {name: "kat"}, index: 0}
    // {name: "kat"}

从打印结果可以看，验证结果和原方法一致。