Use and implementation of array find method in js

find method definition

The find() method returns the value of the first element in the array that meets the conditions of the incoming function. Otherwise, undefined is returned.

find method syntax

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

find method parameters

callback
The function executed on each item of the array receives three parameters:
(1)element
The element currently traversed.
(2) index optional
Index currently traversed.
(3) array optional
The array itself that calls the find method.
thisArg optional
The object used as this when the callback callback is executed.

Return value of find method

The value of the first element in the array that satisfies the passed in callback function. Otherwise, undefined is returned.

Detailed description

The find method executes the callback function once for each element in the array until one callback returns true. When such an element is found, the method will immediately return the value of the element, otherwise it will return undefined.
Note that the callback function will be called for each index in the array, that is, from 0 to length - 1, not just those assigned indexes. (this is different from methods such as map and fliter)

The callback function takes three parameters: the value of the current element, the index of the current element, and the array itself.

If the thisArg parameter is provided, it will be used as this every time the callback function is executed. If it is not provided, it will be used as undefined. (this pointing depends on the pointing rule of this)

The find method does not change the original array.

The index range of the element is determined when the callback function is called for the first time, so new elements added to the array after the find method starts execution will not be accessed by the callback function. If the value of an element in the array that has not been accessed by the callback function is changed by the callback function, when the callback function accesses it, its value will be the current value accessed according to its index in the array. The deleted element will still be accessed, but its value is already undefined.

Use example

Query elements greater than 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]

The above code result returns the first element greater than 3. According to the print result, it can be seen that the null value in the original array will also call the callback function, and finally return the element in the original array whose callback return value is true. The original array arr has not changed.

Gets the object in the array

    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"}

The above code returns the object with name 'kat' in the original array. Let's simulate and implement our own find method;

Thinking steps

1. Hang the myFind method to the prototype of the array
2. Gets the length of the original array
3. Use the call method to call and change this of the callback function
4. Judge the return value of acllback function and return the current element

Implementation code

    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]
      }
    }

Test verification

    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"}

It can be seen from the print results that the verification results are consistent with the original method.