No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Find y FindIndex

17/28
Recursos

Los m茅todos find y findIndex consisten en encontrar el primer elemento de un array que cumpla con la condici贸n especificada en la funci贸n (callback).

En el caso de find retornar谩 el elemento completo, si cumple con la condici贸n, caso contrario retornar谩 undefined. El m茅todo findIndex retornar谩 el 铆ndice del elemento encontrado, caso contrario retornar谩 -1.

Estos procedimientos reciben dos argumentos:

  • La funci贸n que itera y eval煤a cada elemento del array hasta encuentre uno que cumpla con la condici贸n especificada (obligatorio).
  • Un objeto al que puede hacer referencia el contexto this en la funci贸n. Si se lo omite, ser谩 undefined. Recuerde que this en arrow functions es el objeto global.
array.find(function(), thisArg)
array.findIndex(function(), thisArg)

La funci贸n, que recibe como argumento los m茅todos find y findIndex, utiliza tres par谩metros:

  • El valor actual del elemento iterado. Es decir, si es la primera iteraci贸n, ser谩 el primer elemento, y as铆 sucesivamente.
  • El 铆ndice del elemento iterado. Es decir, si es la primera iteraci贸n, ser谩 el 铆ndice 0, y as铆 sucesivamente.
  • El array que est谩 iterando.
array.find(function(element, index, array))
array.findIndex(function(element, index, array))

Diferencia entre la estructura for y los m茅todos find y findIndex

Los m茅todos de arrays nos permiten realizar algoritmos con una menor cantidad de l铆neas que una estructura for, con un resultado igual o parecido.

Por ejemplo, hagamos un algoritmo que devuelva el primer elemento que sea mayor a 40 de un array.

Si utilizamos la estructura for, necesitaremos una variable con el valor undefined e iterar hasta que se cumpla la condici贸n. La palabra reservada break rompe el ciclo repetitivo.

const numbers = [1, 30, 41, 29, 50, 60]

let respuesta = undefined
for (let i=0; i < numbers.length; i++){
    const element = numbers[i]
    if (element >= 40) {
        respuesta = element
        break
    }
}

console.log(respuesta) // 41

Si se necesita el 铆ndice, en lugar de una variable con el valor de undefined, deber铆a estar un valor de -1. Y tambi茅n cambiar el valor del elemento por el del 铆ndice del for.

Con los m茅todos find y findIndex, solo debemos establecer la funci贸n que indique la condici贸n a cumplir para cada elemento.

const numbers = [1, 30, 41, 29, 50, 60]

const respuesta = numbers.find(item => item >= 40)
const respuesta2 = numbers.findIndex(item => item >= 40)

console.log(respuesta) // 41
console.log(respuesta2) // 2

Recuerda que si los m茅todos find y findIndex no encuentran EL elemento, devolver谩n undefined y -1, respectivamente.

const numbers = ["a", "b", "c"]

const respuesta = numbers.find(item => item >= 40)
const respuesta2 = numbers.findIndex(item => item >= 40)

console.log(respuesta) // undefined
console.log(respuesta2) // -1

Contribuci贸n creada por: Andr茅s Guano.

Aportes 27

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Te dejo el array de objetos para el ejercicio 馃槂

const products = [
  {
    name: "Pizza",
    price: 12,
    id: '馃崟'
  },
  {
    name: "Burger",
    price: 23,
    id: '馃崝'
  },
  {
    name: "Hot dog",
    price: 34,
    id: '馃尛'
  },
  {
    name: "Hot cakes",
    price: 355,
    id: '馃'
  },
];

Filter vs Find

No olviden tener en cuenta que el m茅todo find retorna la referencia al objeto lo que lo har铆a mutable, por ejemplo si modificamos rta3 y le cambiamos el nombre por ejemplo, entonces el arreglo original ser谩 modificado:

rta4.name = 'Delicious Burger';
console.log('modified', products);

Resumen
.
El m茅todo find() devuelve el primer elemento del array que cumpla con la condici贸n dada o no devuelve undefined si es que no encuentra ning煤n elemento que cumpla los requisitos pedidos.
.

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

const found = array1.find(element => element > 10);
console.log(found);
// expected output: 12

En cambio el m茅todo findIndex() es una variante que te devuelve el index o posici贸n donde esta ese primer elemento que encuentra con las caracter铆sticas de la condici贸n dada. De no encontrar ninguno devuelve -1 como respuesta del return del m茅todo.

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

const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber));
// expected output: 3
  • FInd cuando no encuentra un elemento retona: undefine

  • FindIIndex: cuando no encuentra un elemento retorna: -1

Por si a alguien le interesa, no se si es la mejor extension de VSCode pero para usar emojis en el codigo, yo he encontrado la que se llama Emojisense v0.9.0

Saludos 馃樅

S茅 que probablemente no me van a leer, pero en serio estoy disfrutando mucho este curso. Me agrada mucho el profe, y sus explicaciones son claras, cortas y muy entendibles.
Hoy he le铆do muchas cr铆ticas negativas contra Platzi en Twitter, y sinceramente no entiendo porqu茅. Al final del d铆a, es una empresa que vende cursos. El que los compramos, somos los que decidimos qu茅 hacemos con ese conocimiento, o si nos va a servir.
驴Puedo encontrar este conocimiento en l铆nea y gratis? Seguramente s铆. Pero algo que no valoran es la estructuraci贸n de los cursos, el idear una ruta que te lleve a aprender poco a poco. Si lo haces por tu cuenta, seguramente tambi茅n tendr谩s 茅xito, pero por lo menos para m铆, es muy importante la estructura, la ruta.
En fin, nunca paren de aprender.

Un aporte puede ser que si sabemos que elemento queremos encontrar dentro del array y en que posici贸n podemos usar el m茅todo de array indexOf que devuelve un n煤mero que resulta ser la posici贸n del array del valor, eso si sabemos que valor queremos pero si deseamos encontrar el primer elemento que cumpla una condici贸n como si es mayor que o si tiene cierto parecido conviene m谩s usar findIndex por el hecho de podemos crear un escenario para buscar un elemento en especifico.

Los hot cakes mas caros de mi vida

Asi seria otro ejemplo, bueno con un ID con numeros :

const products = [
    {
        name: 'pizza',
        price: 10,
        id: 1
    },
    {
        name: 'Hotdog',
        price: 1,
        id: 2
    },
    {
        name: 'Hamburger',
        price: 15,
        id: 3
    },
    {
        name: 'Chinesse food',
        price: 100,
        id: 4
    },
];
const respuesta3 = products.find(item => item.id === 4);
console.log('el id del producto es: ',  respuesta3);


Me arm茅 un algoritmo para poder jugar con la constante a buscar, dependiendo de lo que escribas en ella te dir谩 si existe o no 馃槂

const numbers = [1,30,49,29,10,13]

let rta = 'not exist in list';

for (let index = 0; index < numbers.length; index++) {
    const element = numbers[index];
    if (element === 30 ){
        rta = element;
        break;
    }
}
const find = 2

console.log('for', rta);
let rta2 = 'not exist in list';

const find_searcher = numbers.find(item => item === find);
if (find_searcher === find){
    console.log('find', find_searcher)
}else{
    console.log('find', rta2)
}

Interesante el metodo find y findIndex, lo puse juntos:

const products = [
    {
      name: "Pizza",
      price: 12,
      id: '馃崟'
    },
    {
      name: "Burger",
      price: 23,
      id: '馃崝'
    },
    {
      name: "Hot dog",
      price: 34,
      id: '馃尛'
    },
    {
      name: "Hot cakes",
      price: 355,
      id: '馃'
    },
  ];
  
const rta = products.find(element => element.id === '馃崟')
console.log('Find: ', rta)

/* Find index devuelve el index en que se encuentra el elemento */
const rta2 = products.findIndex(element => element.id === rta.id)
console.log('FindIndex: ', rta2)

Hacemos la respues tan concreta como queramos,

const numbers = [1,30,49,29,10,13];
let sum = 0 ;
function fil (num) {
    for (let index = 0; index < numbers.length; index++) {
        const element = numbers[index];
    
        if (numbers[element] ==  num) {
            return console.log('El numero esta en el array, es el numero ' + num) 
            sum += 1
        }
        if (sum == 0) {
            return console.log('El numero No esta, es el numero ' + num) 
        }
    }
}

fil(30)

find() : Recorre el array y retorna la primera coincidencia del elemento que se busca.

findIndex() : Retorna el 铆ndice del primer elemento de un array que cumpla con la funci贸n de prueba proporcionada. En caso contrario devuelve -1.
sort() : Ordena los elementos del array y retorna el arreglo ordenado. Los elementos se ordenar谩n en orden ascendente (de la A a la Z) por defecto.

yo digo que las clases deberian tener la opcion del like

Metodo .find() y .findIndex()

  • Es un metodo similar a filter, con la diferencia de que find retorna un objeto, el que compla con la condicion dada, y findIndex retorna la posicion de dicho objeto.
const numbers = [12, 4, 6, 77, 23, 12, 53];
let rta = undefined;

for (let i = 0; i < numbers.length; i++) {
    const element = numbers[i];
    if (element === 4) {
        rta = element;
        break;
    }
}
console.log('find con loop for: ', rta);

// .find()
const rta1 = numbers.find(number => number === 4);
console.log('rta: ', rta1);

const products = [
    {
        name: "Pizza",
        price: 12,
        id: '馃崟'
    },
    {
        name: "Burger",
        price: 23,
        id: '馃崝'
    },
    {
        name: "Hot dog",
        price: 34,
        id: '馃尛'
    },
    {
        name: "Hot cakes",
        price: 355,
        id: '馃'
    },
];

const rta2 = products.find(element => element.id === '馃');
console.log('rta2: ', rta2);

const rta3 = products.findIndex(element => element.id === '馃');
console.log('rta3: Index:', rta3);

Siempre ayuda mucho comentar el c贸digo para que vayamos entendiendo que hace cada cosa,
Aqu铆 mi aporte 馃槂

const numbers = [1, 30, 49, 29, 56, 10, 13];

const answer = numbers.find((number) => number == 30);
console.log(answer);

//con objetos

const products = [
  {
    name: "Pizza",
    price: 12,
    id: "馃崟",
  },
  {
    name: "Burger",
    price: 23,
    id: "馃崝",
  },
  {
    name: "Hot dog",
    price: 34,
    id: "馃尛",
  },
  {
    name: "Hot cakes",
    price: 355,
    id: "馃",
  },
];

//devuelve el primer objeto que cumple con la condicion
const answer2 = products.find((product) => product.id == "馃");
//me dice la posicion del primer objeto que cumple con la condicion
const answerIndex = products.findIndex((product) => product.id == "馃");

console.log("answer2", answer2);
console.log("findIndex", answerIndex);

Muuy bueno el curso hasta ahora. Justo lo que necesitaba. Gracias 馃槃

En el caso en que el resultado de find sea un objeto (como en el ejercico de la clase) este ser谩 una referencia al objeto original dentro del array products. Es decir, si modificamos ese objeto encontrado por find entonces se estaria modificando el objeto original tambien 馃槳.

Para mantener inmutabilidad, sabiendo que el metodo find lo que se nos va a retornar es un objeto, se puede hacer uso en este caso, al ser un objeto sencillo, el shallow copy 馃懃 con ayuda del spread operator:

const product  = {...products.find(product => product.id === '馃崟')};

Recordar que si el objeto tiene nested objects o incluso funciones dentro esto no funcionar铆a 馃. Para eso si se tendria que hacer un deep copy 馃槑.

find encontrar谩 el primer elemento del arreglo que cumpla la condici贸n y retornar谩 ese valor, algo importante es que a diferencia de . filter que crea un arreglo con todos los valores que cumplen una condici贸n, en el caso de . find solo extraer谩 el valor del primero que cumpla la condici贸n.

const winners = [
{name: 鈥淣orma鈥,
age: 23,
numberOfPrize: 1,
},
{name: 鈥淕uadalupe鈥,
age: 21,
numberOfPrize: 2,
},
{name: 鈥淎ntonio鈥,
age: 28,
numberOfPrize: 3,
},
];

const answ = winners.find(item => item.numberOfPrize === 1)
console.log(answ);

const answF = winners.filter(item => item.numberOfPrize === 1);
console.log(answF)

//OUTPUT
// { name: 鈥楴orma鈥, age: 23, numberOfPrize: 1 }
//[ { name: 鈥楴orma鈥, age: 23, numberOfPrize: 1 } ]

Mis apuntes 馃槄

//find-findIndex-9

const claves = ['permi', 'Nopermi'];



let rtz = undefined

for (let index = 0; index < claves.length; index++) {
    const element = claves[index];
    if (element === 'permi') {
        rtz = element
        break;
    }
}

console.log('for', rtz);

const rtz2 = claves.find(item => item === 'permi');
console.log('find', rtz2);


const rtz3 = claves.findIndex(item => item === 'permi')
console.log('rtz3', rtz3);

Esta es la forma en la que yo hice el Ejercicio

const search = products.find(item => item.id === '馃崝');
const searchIndex = products.findIndex(item => item.id === '馃崝');

search !== undefined?
console.log(`Se encontr贸 su ${search.name}`):
console.log('No se encontr贸 su pedido');
console.log(`Su pedido se encuentra en la orden ${searchIndex + 1}`);

FindIndex: retorna el indice del elemento (regresa la posicion del elemento en el array) y que cumpla con la condicion de busqueda al igual que find

Find: retorna el primer elemento que cumple con la condicion

  • A diferencia de Filter, Find retorna el objeto / elemento directamente y Filter retorna un Array con el / los elementos

  • Find retorna solo el primer elemento que cumple la condicion

  • Si no encuentra un elemento que cumple la condificon retorna undefined

M茅todo find: Evalua el array y retorna un objeto (no un array)

const numbers = [1, 30, 49, 29,10,13];

let rta2 = numbers.find(item => item === 30)
console.log('Find:', rta2);