Filtrar un array

Clase 21 de 55 • Fundamentos de JavaScript 2018

Resumen

En esta clase aprenderemos como filtrar los arrays. Para filtrar siempre necesitamos establecer una condición. En este ejemplo nuestra condición es que la estatura de las personas sea mayor de 1.80mts.

El método filter ( ) crea una nueva matriz con todos los elementos que pasan la prueba implementada por la función proporcionada.

Recuerda que si no hay elementos que pasen la prueba, filter devuelve un array vacío.

Reto: escribe el filtrado de personas bajas.

Erick Lugo

student•

Reto:

var sacha = {
    nombre: 'Sacha',
    apellido: 'Lifszyc',
    altura: 1.72
}

var alan = {
    nombre: 'Alan',
    apellido: 'Perez',
    altura: 1.86
}

var martin = {
    nombre: 'Martin',
    apellido: 'Gomez',
    altura: 1.85
}

var dario = {
    nombre: 'Dario',
    apellido: 'Juarez',
    altura: 1.71
}

var vicky = {
    nombre: 'Vicky',
    apellido: 'Zapata',
    altura: 1.56
}

var paula = {
    nombre: 'Paula',
    apellido: 'Barros',
    altura: 1.76
}

const esAlta = ({altura}) => altura > 1.8
const esBaja = ({altura}) => !esAlta({altura}) //RETO

//declarar un array
var personas = [sacha, martin, dario, vicky, paula]

//metodo para filtrar arreglos (recibe un array como parametro)
var personasAltas = personas.filter(esAlta)
var personasBajas = personas.filter(esBaja)

console.log(personasAltas)
console.log(personasBajas)

josue cieza

student•

gracias por tu aporte

Christian Chang

student•

te faltó agregar la variable "alan" en el array nomás, pero todo bien (Y)

Carlos Mario

student•

Gino Ureta

student•

buen sketch

José Gregorio Block

company_admin•

#Gracias

Jose Augusto Bernaola Gaspar

student•

Reto

const ESTATURA_MINIMA = 1.7
const esBaja = ({ altura }) => altura < ESTATURA_MINIMA

var personaBajas = personas.filter(esBaja)

console.log(personaBajas)

Daniel Ramos

student•

var personasBajas = personas.filter(esBaja = ({altura}) => altura < 1.70)
console.log(personasBajas);

Carlos López Brú

student•

Bien hecho!

Brian Bentancourt

student•

utilizando el ciclo for implemente una funcion que recibe la lista y clasifica cuales son bajas y cuales altas dividiendolos en listas distintas. Implemente el .push que tienen como funcion los Arrays

var personas = [sacha,alan,martin,dario,vicky,paula]
const ALTO = 1.8
var personasAltas = []
var personasBajas = []

const clasificarAltura = (persona) => {
	if(persona.altura > ALTO){
		personasAltas.push(persona)
	}else{
		personasBajas.push(persona)
	}
}

const verificarPersonas = (lista) => {
	for(let i = 0; i < personas.length; i++){
		clasificarAltura(personas[i])
	}
}


verificarPersonas(personas)

Franco Agustín Torres

student•

personas = [sacha, alan, martin, dario, vicky, paula];

for (var i = 0; i < personas.length; i++) {

    console.log(i);
    console.log(`El peso de ${personas[i].nombre} es ${personas[i].altura}`);

}

var filtrar = personas.filter(function (parámetro) {
    parámetro.altura > 1.80 ? console.log(`${parámetro.nombre} es mayor a 1.80 mts`) : console.log(`${parámetro.nombre} es menor a 1.80 mts`);
}
);

ANGEL DAVID SULBARAN CALDERON

student•

FILTRAR UN ARRAY Para filtrar un array usaremos el ejemplo anterior pero sin el ciclo for, por lo que ahora filtraremos a las personas altas, para ello necesitamos dos cosas, el array y una condición, Pa ello crearemos una variable


var personasAltas = personas.filter(condicion)

donde utilizamos el array personas y le colocamos la palabra “filter” y en el paréntesis va la condición que debe ser una función

const esAlta = (persona) => {
    return persona.altura > 1.8
}

var personasAltas = personas.filter(esAlta)

De manera que al hacer el console.log deberían aparecer las personas altas, ahora en internet lo mas probables es que te consigas con el filtro de esta manera;

var personasAltas = personas.filter(function (persona){
    return persona.altura >= 1.8
})

Es equivalente, pero leerlo de la primera manera es más sencillo y entendible. Hay que tener en cuenta que esto nos devuelve un array nuevo no modificamos el original.

Ignacio Martin

student•

¿Cuál es la función del return{}? No entiendo como funciona ni a quien afecta.

Vittorio Carlos Toledo Huarez

student•

Lo que hace return es devolver un valor o información que será el resultado de la función o funciones que hayas creado.

Diego Forero

Team Platzi•

El return hace que la función devuelva algo, por lo general las funciones deben hacer algún tipo de procesamiento y luego retornar algo, eso se hace con la palabra reservada return (en la mayoría de lenguajes) ahora al escribir return {} lo que haces es retornar un objeto o vacío, principalmente para que la ejecución del código no se rompa ya que se espera que la función retorne un objeto.

Gonzalo Ariel Rama

student•

Utilizar al “desglose” de un objeto es más rápida la ejecución en comparación a usar el objeto “complejo”?
Osea esto:
const esAlta = ({altura}) => altura > 1.8
es más rápido que esto:
const esAlta = persona => persona.altura > 1.8

David Barreto

student•

Me gustaria saber la respuesta a tu pregunta, ya estoy investigando si alguien de la comunidad nos ayuda por favor?

William Velázquez

student•

También me gustaría saber eso, han encontrado la respuesta a ello? 😮

Emanuel Camarena

student•

var vicky = {
    nombre:'Vicky',
    apellido:'Zapata',
    altura:1.56
}

var luis = {
    nombre:'Luis',
    apellido:'Camarena',
    altura:1.94
}

var carlos = {
    nombre:'Carlos',
    apellido:'Ortega',
    altura:1.79
}

var carlos = {
    nombre:'Carlos',
    apellido:'Ortega',
    altura:1.79
}

var cristian = {
    nombre:'Cristian',
    apellido:'Ortega',
    altura:1.89
}

var emanuel = {
    nombre:'Emanuel',
    apellido:'Camarena',
    altura:1.82
}

var personas = [vicky,luis,carlos,cristian,emanuel];

const esAlta = ({altura}) => altura >= 1.8
const esBaja = ({altura}) => altura < 1.80

var personasAltas = personas.filter(esAlta);
var personasBajas = personas.filter(esBaja);

// TAMBIEN PUEDE SER: 
//var personasAltas = personas.filter(function (persona){ return persona.altura >= 1.80});

console.log(personasAltas);
console.log(personasBajas);

Juan ortiz

student•

Gracias por el aporte excelente forma de resolver el reto

Elio Alejandro Marcano Brito

student•

Mi ejercicio y desafío:

const LOW_HEIGHT = 1.5
const NORMAL_HEIGHT = 1.7
const HIGH_HEIGHT = 1.85

const fBajo = ({ altura }) => altura < LOW_HEIGHT
const fPromedio = ({ altura }) => altura >= NORMAL_HEIGHT && altura < HIGH_HEIGHT
const fAlto = ({ altura }) => altura >= HIGH_HEIGHT

var personasBajas = personas.filter(fBajo)
var personasPromedio = personas.filter(fPromedio)
var personasAltas = personas.filter(fAlto)

console.log(personasBajas)

Mario Moreno Sarmiento

student•

Como podría filtrar por la primera letra y separar por diferentes letras en distintos arreglos.

José Armando Gutiérrez Araujo

student•

Al llamar la función dentro de filter() por qué no hay que pasarle parámetro? se hace de manera implícita al estar iterando sobre el arreglo con el filter()?

Carlos Eduardo Gomez García

teacher•

Hola! Así es, el método filter() implícitamente va a pasarle los parámetros a tu función mientras está iterando sobre tu arreglo, es por eso que nosotros le mandamos la referencia de nuestra función a filter, si te das cuenta no ponemos los paréntesis "()" porque si los ponemos entonces estaríamos ejecutando la función nosotros, y nosotros no debemos ejecutarla, la debe ejecutar filter para que sea el quien pase los parámetros y no nosotros ^^

José Armando Gutiérrez Araujo

student•

Ahora si lo tengo más claro, gracias!!

Julieth Alejandra Medina Calibio

student•

<var persona1 = {
    nombre: 'Leidy',
    apellido: 'Daza',
    altura: 1.82
}
var persona2 = {
    nombre: 'Jula',
    apellido: 'medina',
    altura: 1.60
}
var persona3 = {
    nombre : 'lucy',
    apellido:'Caicedo',
    altura: 1.89
}
//const esAlta=(personas)=>{
  //  return personas.altura > 1.8
//}
const esAlta = ({altura}) => altura > 1.8
const esbaja = ({altura}) => altura < 1.8

//const esAlta = personas => personas.altura > 1.8
//ce¡reamos el arreglo
var personas = [persona1, persona2, persona3]
var personasAltas= personas.filter(esAlta)
var personasbajas= personas.filter(esbaja)
//var personasAltas = personas.filter(function(persona){
  //  return personas.altura > 1.8
//})
console.log(personasAltas)
console.log(personasbajas)
>

Rulo Code

student•

Filtrar un array

Digamos que soy un entrenador de baloncesto que le gusta sorprender al mundo y que quiere formar un nuevo equipo con jugadores menores de 16 años y 1.7 mts para ganar el campeonato

Para ello tengo que crear primero mis dos condiciones ganadoras !
Luego crear un array con todos los jugadores inscritos en mi escuela, luego creo una función que reciba como parametro dicho array

y listo ! tengo a mis jugadores estrella

Rulo Code

student•

carlos melgarejo

student•

var esBaja = ({altura}) => altura < 1.8

var personasBajas = personas.filter(esBaja)
console.log(personasBajas)

Wilmar Yoan Malaver Malaver

student•

quede qu poco confundido cuando crea const esAlta = persona => persona.altura > 1.8

persona es un parametro nuevo para ser utilizada dentro de const o de donde salio.

Kevin malaver

student•

sí, es un parámetro de esa arrow function

Carlos Guillermo Coello Valenzuela

student•

Hola, la traducción a lenguaje humano sería: "crea una constante que sea igual a una función que reciba como parametro persona y diga si la altura de la persona es mayor a 1.8.

Juan Mercado

student•

Cuando nos referimos a "Filtrar" es poder sacar un elemento del array que quiéranos?

Mayra Lopez

student•

Si, es seleccionar bajo un criterio y hasta crear uno nuevo array con ese criterio.

Tomas Mansilla

student•

por que al momento de ejecutar la función "esAlta" no le puso paréntesis?

Enrique Devars

teacher•

¡Hola! :D

Al ser una arrow function no es necesario.

¡Nunca pares de aprender! 💚

Andrés Argote

student•

No es necesario cuando simplemente es un parametro y solo retorna un valor

Max Aguirre Omonte

student•

porque poner el parametro persona, si no esta declarado ?

Max Aguirre Omonte

student•

se le podría poner cualquier nombre, verdad ? esto se puedo con cualquier función?

Enrique Devars

teacher•

Si, le puedes poner cualquier nombre y esto aplica tanto para filter y map :)

Daniela Arroyo Ortega

student•

Porqué invoca la función dentro de filter como esAlta y no como esAlta()

Sebastian Lomas

student•

Porque la función esta almacenada en una variable llamada esAlto.

Sebastian Lomas

student•

Y la funcion filter, reduce y map posicionan los valores en donde detectan que debe ir un parametro.

Espero haberme explicado

Filtrar un array

Introducción al curso

¡Alto! Tenemos una nueva versión de este curso para ti

Bienvenidos al Curso de Fundamentos de JavaScript

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

Variables

Variables: Strings

Variables: Números

Funciones

El alcance de las funciones

Objetos

Desestructurar objetos

Parámetros como referencia o como valor

Comparaciones en JavaScript

Estructuras de Control y Funciones

Condicionales

Funciones que retornan valores

Arrow functions

Estructuras repetitivas: for

Estructuras repetitivas: while

Estructuras repetitivas: do-while

Condicional múltiple: switch

Arrays

Introducción a arrays

Filtrar un array

Transformar un array

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

Cómo funcionan las clases en JavaScript

Modificando un prototipo

El contexto de las funciones: quién es this

La verdad oculta sobre las clases en JavaScript

Clases en JavaScript

Asincronismo

Funciones como parámetros

Cómo funciona el asincronismo en JavaScript

Cómo funciona el tiempo en JavaScript

¿Qué pasó con swapi.co?

Callbacks

Haciendo múltiples requests

Manejando el Orden y el Asincronismo en JavaScript

Manejo de errores con callbacks

Promesas

Promesas Encadenadas

Múltiples promesas en paralelo

Async-await: lo último en asincronismo

Juego de HTML

Comenzando el juego

Generando una secuencia de números

Iluminando la secuencia de colores

Obteniendo el input del usuario

Agregando la verificación del color elegido

Agregando los estados finales del juego

Conclusiones del curso

Complementos

Diferencias entre var, let y const

Memoización: ahorrando cómputo

¿Hace cuántos días naciste?

Funciones recursivas

Entiende los closures de JavaScript

Estructuras de datos inmutables

Cambiando de contexto al llamar a una función

¿Cuándo hace falta poner el punto y coma al final de la línea?