Array.prototype.find()

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since septiembre de 2015.

Learn more
See full compatibility

El mtodo find() devuelve el valor del primer elemento del array que cumple la funcin de prueba proporcionada.

Prubalo

const array1 = [5, 12, 8, 130, 44];

const found = array1.find((element) => element > 10);

console.log(found);
// Expected output: 12

Si necesitas el ndice del elemento encontrado en el array, utiliza findIndex().
Si necesitas encontrar el ndice de un elemento, Array.prototype.indexOf(). (Es similar a findIndex(), pero comprueba la igualdad de cada elemento con el valor en lugar de usar una funcin de prueba.)
Si necesitas encontrar si un valor existe en un array, utiliza Array.prototype.includes().
Si necesitas encontrar si algn elemento cumple la funcin de prueba proporcionada, usa Array.prototype.some().

Sintaxis

arr.find(callback(element[, index[, array]])[, thisArg])

Parmetros

callback

Funcin que se ejecuta sobre cada valor en el array, tomando tres argumentos:_ element _ : El elemento actual que se est procesando en el array.

index Opcional: El ndice (posicin) del elemento actual que se est procesando en el array.
array Opcional: El array desde el que se llama al mtodo find.

thisArg Opcional

Objeto a usar como this cuando se ejecuta callback.

Valor devuelto

El valor del primer elemento del array que cumple la funcin de prueba proporcionada; de lo contrario, devuelve undefined.

El mtodo find ejecuta la funcin callback una vez por cada ndice del array hasta que encuentre uno en el que el callback devuelva un valor verdadero. Si es as, find devuelve inmediatamente el valor del elemento. En caso contrario, find devuelve undefined.

callback se invoca con tres argumentos: el valor del elemento, el ndice del elemento y el objeto Array que est siendo recorrido.

Si un parmetro thisArg es proporcionado al mtodo find, este ser utilizado como this para cada invocacin del callback. Si no se proporciona el parmetro, entonces se utiliza undefined.

El mtodo find no transforma el array desde el cual es llamado, pero la funcin proporcionada en callback s. En ese caso, los elementos procesados por find son establecidos antes de la primera invocacin de callback. Por lo tanto:

callback no visitar ningn elemento aadido al array despus de que comience la llamada a find.
Si un elemento existente no visitado del array es modificado por callback, su valor que se pasa al callback que lo visita ser el valor en el momento en que find visita ese ndice del elemento.
Los elementos que sean deleted (eliminados) an se visitan.

Ejemplos

Encontrar un objeto en un array por una de sus propiedades

const inventario = [
  { nombre: "manzanas", cantidad: 2 },
  { nombre: "bananas", cantidad: 0 },
  { nombre: "cerezas", cantidad: 5 },
];

function esCereza(fruta) {
  return fruta.nombre === "cerezas";
}

console.log(inventario.find(esCereza));
// { nombre: 'cerezas', cantidad: 5 }

Utilizando funciones flecha y destructuring

const inventario = [
  { nombre: "manzanas", cantidad: 2 },
  { nombre: "bananas", cantidad: 0 },
  { nombre: "cerezas", cantidad: 5 },
];

const resultado = inventario.find((fruta) => fruta.nombre === "cerezas");

console.log(resultado); // { nombre: 'cerezas', cantidad: 5 }

Encontrar un nmero primo en un array

El siguiente ejemplo encuentra un elemento en un array que sea un nmero primo (o devuelve undefined si no hay un nmero primo).

function isPrime(element, index, array) {
  let start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].find(isPrime)); // undefined, no encontrado
console.log([4, 5, 8, 12].find(isPrime)); // 5

Los siguientes ejemplos muestran cmo elementos no existentes o eliminados son visitados y el valor pasado a callback es su valor cuando son visitados.

// Declarar un array sin elementos en los ndices 2, 3 y 4
const array = [0, 1, , , , 5, 6];

// Muestra todos los ndices, no slo aquellos que tienen valores asignados
array.find(function (value, index) {
  console.log("Visited index " + index + " with value " + value);
});

// Mostrar todos los ndices, incluyendo los eliminados
array.find(function (value, index) {
  // Eliminar el elemento 5 en la primera iteracin
  if (index == 0) {
    console.log("Deleting array[5] with value " + array[5]);
    delete array[5];
  }
  // El elemento 5 se visita aun habiendo sido eliminado
  console.log("Visited index " + index + " with value " + value);
});
// expected output:
// Deleting array[5] with value 5
// Visited index 0 with value 0
// Visited index 1 with value 1
// Visited index 2 with value undefined
// Visited index 3 with value undefined
// Visited index 4 with value undefined
// Visited index 5 with value undefined
// Visited index 6 with value 6

Polyfill

Este mtodo ha sido aadido a la espeficicacin ECMAScript 2015 y puede no estar disponible en todas las implementaciones de JavaScript an. Sin embargo, puedes utilizar el siguiente polyfill de Array.prototype.find:

// https://tc39.github.io/ecma262/#sec-array.prototype.find
if (!Array.prototype.find) {
  Object.defineProperty(Array.prototype, "find", {
    value: function (predicate) {
      // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
      if (typeof predicate !== "function") {
        throw new TypeError("predicate must be a function");
      }

      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
      var thisArg = arguments[1];

      // 5. Let k be 0.
      var k = 0;

      // 6. Repeat, while k < len
      while (k < len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kValue be ? Get(O, Pk).
        // c. Let testResult be ToBoolean(? Call(predicate, T,  kValue, k, O )).
        // d. If testResult is true, return kValue.
        var kValue = o[k];
        if (predicate.call(thisArg, kValue, k, o)) {
          return kValue;
        }
        // e. Increase k by 1.
        k++;
      }

      // 7. Return undefined.
      return undefined;
    },
    configurable: true,
    writable: true,
  });
}

Si necesitas dar soporte a motores de JavaScript realmente obsoletos que no soportan Object.defineProperty, es mejor no utilizar el polyfill para los mtodos Array.prototype, ya que no podrs hacerlos no enumerables.