Array.prototype.find()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨septiembre de 2015⁩.

El métodofind() devuelve elvalor delprimer elemento del array que cumple la función de prueba proporcionada.

Pruébalo

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, utilizafindIndex().
Si necesitas encontrar elíndice de un elemento,Array.prototype.indexOf(). (Es similar afindIndex(), pero comprueba la igualdad de cada elemento con el valor en lugar de usar una función de prueba.)
Si necesitas encontrar si un valorexiste en un array, utilizaArray.prototype.includes().
Si necesitas encontrar si algún elemento cumple la función de prueba proporcionada, usaArray.prototype.some().

Sintaxis

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

Parámetros

callback

Función que se ejecuta sobre cada valor en el array, tomando tres argumentos:_element_ : El elemento actual que se está procesando en el array.

indexOpcional: El índice (posición) del elemento actual que se está procesando en el array.
arrayOpcional: El array desde el que se llama al métodofind.

thisArgOpcional

Objeto a usar comothis cuando se ejecutacallback.

Valor devuelto

Elvalor delprimer elemento del array que cumple la función de prueba proporcionada; de lo contrario, devuelveundefined.

El métodofind ejecuta la funcióncallback una vez por cada índice del array hasta que encuentre uno en el que elcallback devuelva un valorverdadero. Si es así,find devuelve inmediatamente el valor del elemento. En caso contrario,find devuelveundefined.

callback se invoca con tres argumentos: el valor del elemento, el índice del elemento y el objetoArray que está siendo recorrido.

Si un parámetrothisArg es proporcionado al métodofind, este será utilizado comothis para cada invocación del callback. Si no se proporciona el parámetro, entonces se utilizaundefined.

El métodofind no transforma el array desde el cual es llamado, pero la función proporcionada encallback sí. En ese caso, los elementos procesados porfind son establecidosantes de la primera invocación decallback. Por lo tanto:

callback no visitará ningún elemento añadido al array después de que comience la llamada afind.
Si un elemento existente no visitado del array es modificado porcallback, su valor que se pasa alcallback que lo visita será el valor en el momento en quefind visita ese índice del elemento.
Los elementos que seandeleted (eliminados) aún 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 número primo en un array

El siguiente ejemplo encuentra un elemento en un array que sea un número primo (o devuelveundefined si no hay un número 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 encontradoconsole.log([4, 5, 8, 12].find(isPrime)); // 5

Los siguientes ejemplos muestran cómo elementos no existentes o eliminados son visitados y el valor pasado acallback es su valor cuando son visitados.

// Declarar un array sin elementos en los índices 2, 3 y 4const array = [0, 1, , , , 5, 6];// Muestra todos los índices, no sólo aquellos que tienen valores asignadosarray.find(function (value, index) {  console.log("Visited index " + index + " with value " + value);});// Mostrar todos los índices, incluyendo los eliminadosarray.find(function (value, index) {  // Eliminar el elemento 5 en la primera iteración  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 método ha sido añadido a la espeficicación ECMAScript 2015 y puede no estar disponible en todas las implementaciones de JavaScript aún. Sin embargo, puedes utilizar el siguiente polyfill deArray.prototype.find:

// https://tc39.github.io/ecma262/#sec-array.prototype.findif (!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 soportanObject.defineProperty, es mejor no utilizar el polyfill para los métodosArray.prototype, ya que no podrás hacerlos no enumerables.