"这个 Array.prototype.find() 是如何工作的？"

Question

What I do not understand is the function and its parameter fruit , because it's not being passed anything.

var inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
];

function findCherries(fruit) { 
  return fruit.name === 'cherries';
}

console.log(inventory.find(findCherries));

Answer 1

...because it's not being passed anything.

It is being passed something, you just don't see the code doing it, which is inside the Array.prototype.find method's code. Remember, this line:

console.log(inventory.find(findCherries));

...passes the value of findCherries (a function reference) into find , it doesn't call findCherries . find does that, once for each entry in the array, supplying three arguments (only one of which findCherries uses). The first of those arguments is the array entry for that call.

The full polyfill for Array.prototype.find makes for tricky reading, so let's do something similar but simpler so you can see the calls:

// A bit like Array.prototype.find, but **not** the same; much simplified
function fakeFind(callback) {
  for (var index = 0; index < this.length; ++index) {
    var entry = this[index];
    //  vvvvvvvvvvvvvvvvvvvvvvvvvvvv---- This is where findCherries is called
    if (callback(entry, index, this)) {
      return entry;
    }
  }
  return undefined;
}

Live copy:

 // A bit like Array.prototype.find, but **not** the same; much simplified function fakeFind(callback) { for (var index = 0; index < this.length; ++index) { var entry = this[index]; // vvvvvvvvvvvvvvvvvvvvvvvvvvvv---- This is where findCherries is called if (callback(entry, index, this)) { return entry; } } return undefined; } Object.defineProperty(Array.prototype, "fakeFind", { value: fakeFind }); var inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 5} ]; function findCherries(fruit) { return fruit.name === 'cherries'; } console.log(inventory.fakeFind(findCherries)); 

Answer 2

If you expand the function so that it uses an anonymous function, it kind of makes more sense..

If you look at the code snippet below, it kind of explains it a bit more..

 var inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 5} ]; function findCherries(fruit) { return fruit.name === 'cherries'; } //this kind of does the same, apart from the extra anonymous function //but here you can see this `item` that's getting passed console.log(inventory.find( function (item) { return findCherries(item); } )); //because in the above the anonymous function has the same //signature, it's made redunant, so we may as well //call findCherries direct.. console.log(inventory.find(findCherries)); 

Answer 3

The find() method returns a value in the array, if an element in the array satisfies the provided testing function. Otherwise undefined is returned. Array.prototype.find()

In your code snippet fruit is an item from your original array, i its value is an item in your array. findCherries will be compare each element in your array for a match with property name (this is the provided testing function).

Your findCherries callback will be executed on each value in the array. When a match is found a result is returned.

Answer 4

Implementation of Array find method.

 Array.prototype.MyFind = function(callback) { for (let i = 0; i < this.length; i++) { if(callback(this[i])){ return this[i]; } } } const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10 & element > 30 & element < 50); console.log(found);