Métodos de recorridos de Arrays

Descubrí que existe esta pag: https://jsconsole.com/

Interpretando el ejemplo como una tabla, las diferencias de map y filter son return de columnas vs de filas:

.filter : nos permite filtrar solo los elementos que deseamos (según ciertos criterios) y devolverlos en un nuevo array.
.map : crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.

Por si desean entender un poco el uso de esto que estamos aprendiendo que parece ser un poco confuso, les dejo mis apuntes contando una historia, siento que es más fácil entender las cosas así.

// Este ejemplo es imaginando que recibimos una lista de 30 carros diferentes y se nos solicita que se almacene esta información, como estamos aprendiendo a usar js por que es un lenguaje cool y no queremos tipiar todo de manera normal y aburrida, usaremos este lenguaje c: así hacemos un pequeño trabajo de separar todas las marcas, modelos y años respectivamente en distintos arrays para así lograr juntarlos en uno solo usando una función constructiva la cual indicara cada auto ingresado con su marca, modelo y año respectivamente.

var marca = ["Audi", "Subaru", "Lexus", "Porsche", "BMW", "Mazda", "Buick", "Toyota", "Kia", "Honda", "Hyundai", "Volvo", "Mini", "Mercedes-Benz", "Volkswagen", "Ford", "Lincoln", "Scion", "Acura", "Chevrolet", "Nissan", "Infiniti", "GMC", "Cadillac", "Dodge", "Land", "Rover", "Mitsubishi", "Jeep", "Fiat"];
var modelo = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
var annio = [2020,2019,2018,2020,2020,2020,2018,2018,2020,2020,2020,2018,2018,2020,2020,2019,2020,2020,2019,2019,2020,2020,2019,2019,2019,2020,2019,2019,2018,2020];
var listaAutos = [];
function autoN(marca, modelo, annio){
    this.marca = marca;
    this.modelo = modelo;
    this.annio = annio;
} 
for (var i = 0; i<30; i++){   
    var autoNuevo = new autoN(marca[i],modelo[i],annio[i]);
    listaAutos.push(autoNuevo);
}

// Luego se nos solicito que filtremos los carros por medio del año actual, ya que deseaban saber la cantidad de autos nuevos ingresados. Gracias a nuestro trabajo esto se podía saber de la siguiente manera:

var autosFiltrados = listaAutos.filter(function(auto){
    return auto.annio === 2020;
});
console.log(autosFiltrados);

// Así logramos obtener una lista con todos los autos del año 2020 c:

// Posterior a eso, se necesitaba obtener una lista urgentemente de las marcas de los 30 autos que acababan de ingresar por razones ajenas que no nos interesan c: Obviando que nosotros ya tenemos esta lista creada xD y queremos usar js para esto, esta tarea es tan sencilla como hacer: 

var marcasRecientes = listaAutos.map(function(auto){
    return auto.marca;
});
console.log(marcasRecientes);

// Así obtenemos nuestra lista de marcas recientemente ingresadas c:

Aquí les dejo mi pequeño apunte.

var articulos = [
	{ nombre: '📱', precio: 1000 },
	{ nombre: '💻', precio: 1500 },
	{ nombre: '🖥', precio: 2000 },
	{ nombre: '⌨️', precio: 100 },
	{ nombre: '🖱', precio: 70 },
	{ nombre: '🚗', precio: 30000 },
];

// Método Filter
var articulosFiltrados = articulos.filter(function(articulo) {
	return articulo.precio <= 500;
});

// Método Map
var nombreArticulos = articulos.map(function(articulo) {
	return articulo.nombre;
});

articulosFiltrados;
// (2) [{…}, {…}]
//   0: {nombre: "⌨️", precio: 100}
//   1: {nombre: "🖱", precio: 70}

nombreArticulos; // (5) ["📱", "💻", "🖥", "⌨️", "🚗"]

Solo quería pasar por acá a decirles que tenia algo de temor de que mi cabeza no estuviera preparada para asimilar este nuevo conocimiento. Sin embargo, he notado que a medida que pasan los días hay conceptos que se quedan algo así como naturalizados en mi cabeza, y fluyen con facilidad cuando es momento de aplicarlos. Un saludo y animo.

Hay un montón de métodos útiles que harán vuestra vida más sencilla y que vuestro código sea más eficiente!!!

chequéenlos en :
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array

Soy yo o dice “arraiL” en lugar de array?

Resumen 😃
Métodos para recorrer arrays.
**1. .filter **
Este método sirve para filtrar contenido específico de un array, y es muy útil para cuando tenemos una gran cantidad de objetos dentro de ese array.
Para poder utilizarlo, es necesario crear una nueva variable a la cual se le va a asignar la referencia del array y el método precedido por un punto (.).

Ejemplo:

var artículos = [
			{nombre: “compu”, costo: 200},
			{nombre: “TV”, costo: 500},
			{nombre: “bici”, costo: 1000}
];

	Var artículos_Filtrados = artículos.filter();

Dentro del método se puede utilizar una función para obtener los datos específicos que necesitemos. Para esta función, el parámetro será cualquier palabra – esta palabra tiene que ser descriptiva y es importante porque de este elemento extraeremos el dato que necesitamos- para este ejemplo, el parámetro será ‘artículo’, y la tarea será un return artículo.costo >= 500;
Con esta función lograremos extraer los artículos que tengan un costo mayor o igual a 500.
*Vale recalcar que nos regresará los datos en forma de objeto.
La declaración de la nueva variable con el método aplicado quedaría así:

var artículos_Filtrados = artículos.filter(function(articulo){return articulo.costo >= 500;});

Para obtener el resultado que necesitamos, solamente tenemos que llamar la variable artículos_Filtrados.

2. Map
Este método permite obtener datos específicos que son retornados en forma de string.
La implementación es similar a la del método .filter.
Primero, tenemos que crear una nuevo array. Después, se manda a llamar el array en donde tenemos el dato que necesitamos y también pasamos el método map precedido por un punto. Como tercer paso, creamos la función que nos regrese el dato específico, y, por último, mandamos a llamar el nuevo array para visualizar los datos.

Ejemplo:

var artículos = [
			{nombre: “compu”, costo: 200},
			{nombre: “TV”, costo: 500},
			{nombre: “bici”, costo: 1000}
			];

++Primero++
Creamos array: 

var nombre_Articulos

++Segundo++
Le asignamos el array de referencia y el método: 

var nombre_Articulos = artículos.map(){};

++Tercero++
Creamos la función dentro del método: 

function(objetivo){return objetivo.nombre;}

++Resultado final.++

var nombre_Articulos = artículos.map(function(objetivo){return objetivo.nombre;});

Esta es una forma de hacerlo con arrow function y notación corta:

    - RECORRER EL CONTENIDO DEL ARRAY:
        - filter: filtra en base a validaciones (genera un nuevo array)
        - map:    regresa un atributo de los objetos (genera un nuevo array)

-Looping with .forEach
-Asserting with .some and .every
-Subtleties in .join and .concat
-Stacks and queues with .pop, .push, .shift, and .unshift
-Model mapping with .map
-Querying with .filter
-Ordering with .sort
-Computing with .reduce, .reduceRight
-Copying a .slice
-The power of .splice
-Lookups with .indexOf
-The in operator
-Going in .reverse

¿por que en la función del método .map() puedo escribir como parámetro “articulo” o “articulos” y obtengo el mismo resultado?
var nombreArticulos = articulos.map(function(articulo){
return articulo.nombre;
});

var nombreArticulos = articulos.map(function(articulos){
return articulos.nombre;
});

Este profesor lo hace todo mas facil, enhorabuena! gracias!

Que tal compañeros, les comparto mis apuntes que describen la logica detras de estos métodos de recorrido, considero que cuando entendemos la logica detras de estas las podremos aplicar de mejor manera. Porque cuando solo las memorizamos tal cual, nos quedaremos cortos al aplicarlas. Espero les sea de ayuda.

El método “filter()”

El método “map()”

Jeje ojalá algún cubero lo vea

var cubos = [
    {nombre: "Valk3", costo: 120000},
    {nombre: "Valk4", costo: 150000},
    {nombre: "AosuGTS", costo: 130000},
    {nombre: "Wushuang", costo: 170000},
    {nombre: "Salil 3x3", costo: 30000},
    {nombre: "M3RFS M", costo: 60000},
    {nombre: "Mirror", costo: 15000}
];

var preciosBajos = cubos.filter(function(articulo){
    return articulo.costo <= 70000;
});

var nombres = cubos.map(function(nombre){
    return nombre.nombre;
});

Si instalan la extensión Code Runner en VsCode, pueden ejecutar su código y ver el OutPut en una ventana en la parte inferior del VSC. En la parte superior aparecerá la opción run code.

MEGA TIP: ¿Comó filtrar un arreglo con elementos repetidos?
Utilizando el objeto Set

	const array = [1,2,3,4,5,1,2,5,4]
	const arrayNoCopies = [...newSet(array)]
	console.log(arrayNoCopies)
	//Expected output: [1,2,3,4,5]

POST-DATA: Guarden este tip bien guardado, de verdad que me lo van agradecer cuando esten desarrollando una App y tengan que filtrar elementos repetidos 👀👀👀

const articulos = [
  { nombre: 'Bici', costo: 800000 },
  { nombre: 'Tv', costo: 2000000 },
  { nombre: 'Radio', costo: 350000 },
  { nombre: 'Movil', costo: 3000000 },
  { nombre: 'Cuaderno', costo: 50000 },
  { nombre: 'PC', costo: 1900000 },
  { nombre: 'Mouse', costo: 30000 },
  { nombre: 'Escoba', costo: 10000 }
];

let articulosFitrados = articulos.filter( ({costo}) => costo < 500000 );
console.log(articulosFitrados);

let nombreFitrados = articulos.map( ({nombre}) => nombre);
console.log(nombreFitrados);

¡Aquí está! - ¡Dejo mi aporte!
Me costó mucho entender algunos aspectos sobre el tema, sin embargo investigué y busqué recursos en internet, y así pude lograrlo. Todo genial porque aprendí de otros temas, como el uso de ‘arrow function / función flecha’ y ‘Callback function’. Espero, de corazón, que les sea útil.

Nota: El mismo procedimiento aplica para el método .filter(), entre otros más.

🤯 Les recomiendo esta página: https://repl.it/
En ella no sólo pueden ejecutar JavaScript, sino también un montón de lenguajes más.
Además, te da la posibilidad de meterle HTML y CSS que nos servirá mucho para cursos posteriores.
Les dejo un capture para que vean como se ve:

Aca les dejo el codigo con comentarios para que sea mas comodo de entender

var celulares = [
    {marca: "Xiaomi", modelo:"Redmi 8", color: "Negro", precio: 3800},
    {marca: "Samsung", modelo:"A20", color: "Azul", precio: 4500},
    {marca: "Xiaomi", modelo:"Redmi 9s", color: "Blanco", precio: 5800},
    {marca: "Huawei", modelo:"P30 Lite", color: "Azul", precio: 4840},
    {marca: "Huawei", modelo:"Y9", color: "Dorado", precio: 5199},
    {marca: "Apple", modelo:"Iphone 11", color: "Negro", precio: 17999},
    {marca: "Apple", modelo:"Iphone Xr", color: "Rojo", precio: 13499},
    {marca: "Motorola", modelo:"moto g8", color: "Blanco", precio: 4699},
    {marca: "Motorola", modelo:"Motorola Edge + ", color: "Negro", precio: 19999},
];
//Creamos una nueva variable que nos va ayudar a filtrar los celulares
//que sean de la marca Huawei utilizando el metodo filter
var celularesHuawei = celulares.filter(function(celular){
    //Esta funcion regresa el objeto del arreglo de celulares cuyo valor
    //en la porpiedad marca sea igual a "Huawei"
    return celular.marca == "Huawei";
});
//Creamos otra variable y esta nos va  a permitir obtener el valor
//de todos valores de la propiedad modelo de los objetos que se 
//encuentren dentro de nuestro arreglo
var ModelosCelulares = celulares.map(function(celular){
    return celular.modelo;
});

Filter: Genera un nuevo array sobre la base de un parámetro otorgado (costo menor a x).
Map: Genera un nuevo array y extrae una característica de los artículos en el array (nombres).

Note que si al filtrar por algún valor de tipo string si en el return solo dejas un símbolo =, el arreglo original cambia todos sus campos de la propiedad que estas filtrando por el valor que intentas filtrar. Por ejemplo, aquí cambio todos los valores de marca en el array original por Kia

var marcaFiltrada = listaAutos.filter(function(company){
    return company.marca = "Kia"
});

En cambio con los dos símbolos de == ya hace el filtro correctamente y no cambia nada en el array original.

var tipoFiltrado = listaAutos.filter(function(datos){
    return datos.tipo == "Sedan";
});

Por si a alguien le pasa XD

var autos = ['Audi','BMW','Chevrolet','Ford'];
var objetoAutos = [];
var modelos = [
  ['A5','A3','A4','A6','S3','Q5','Q3','Q2','A1','TTS'],
  ['Serie 6','Serie 7','Z4','M6','Serie 1','Serie 3','Serie 5','Serie 8','Serie 4','Serie 2'],
  ['Alto','Astra','Bel Air','Camaro','Aveo','Cavalier','Celebrity','Citation','Corsa','Chevy'],
  ['Fusion','Crown','Victoria','Falcon','Festiva','Fiesta','Focus','Granada','Laser','Mustang']
];

function auto(marca,modelo,anio){
  this.marca = marca;
  this.modelo = modelo;
  this.anio = anio;
}

function generarAuto(){
  for(var i = 0; i < autos.length; i++){
    for(var j = 0; j < modelos[i].length; j++) {
      var autoObj = new auto(autos[i],modelos[i][j],2020);
      objetoAutos.push(autoObj);
      console.log(autoObj);
    }
  }
}```

var articulos = [
	{nombre:'Bici',costo:800000},
	{nombre:'Tv',costo:2000000},
	{nombre:'Radio',costo:350000},
	{nombre:'Movil',costo:3000000},
	{nombre:'Cuaderno',costo:50000},
	{nombre:'PC',costo:1900000},
	{nombre:'Mouse',costo:30000},
	{nombre:'Escoba',costo:10000}
];
var filtraArticulos = articulosComprados.filter(function(articulo){
    return articulo.costo <= 500000;
});
var mapearArticulos = articulosComprados.map(function(articulo){
    return articulo.nombre;
});
var mapeaFiltro = filtraArticulos.map(function(articulo){
    return articulo.nombre;
});
console.log(`Los articulos comprados son ${mapearArticulos} y los que tienen un valor menor a 500 mil son ${mapeaFiltro}.`);

Estoy repasando Platzi gracias a que acabo de renovar mi suscripción en un nuevo contexto de vida, despues de casí tres años de pandemia, siendo Front End Developer Jr.

Esta Clase fue muy interesante por que el profe explico estos dos Métodos de una forma muy sencilla.

FILTER(): Nos ayuda a filtar cosas especificas de este array.
MAP() : Nos ayuda a mapear el contenido del array y nos trae lo que necesitamos.

Les recomiendo Jsbin para desarrollar HTML,CSS y Js. Les puede servir compañeros, cuenta con consola y output.
https://jsbin.com/?html,output

Esas funciones map y filter se ven muy poderosas.

En Java este sería un tema avanzado. A lo mejor de pronto no se ve la utilidad de filter pero por ejemplo nos pueden ahorrar mucho código.

Si por ejemplo hubiésemos leído números desde un archivo de texto y tenemos que mostrar aquellos valores que por ejemplo sean menores a 2, pudiéramos resolver de forma iterativa el problema (con ciclos) o de forma declarativa:

Dado el arreglo.

let arreglito = [ 1.2, 1.3, 1.4, 1.5, 2, 3, 4, 5];

En forma iterativa:

• Genero un arreglo donde pondre el resultado.
• Itero el arreglo de los datos.
• Pongo un if donde valide si el valor es menor a 2.
• Si cumple agrego al arreglo resultante.

En forma imperativa con filter resulta mucho más corto:

let menores = arreglito.filter( function( num){
       return num < 2;
});

console.log( ` los menores son: ${menores}`);

Incluso existe una forma más corta que seguramente se verá más adelante donde se enseñara que eso de arriba es equivalente a:

let menores = arreglito.filter( num => num < 2 );
console.log( ` los menores son: ${menores}`);

Estas tres son soluciones al mismo problema pero esta última es más corta, más fácil de entender y por supuesto más fácil de recibir mantenimiento.

Logre hacer una analogía a la respuesta de ¿Cómo usamos en .filter una variable que esta declarada? en si lo comparo con la manera del ciclo de for…of ya que en la clase nos dice que en la parte de tenemos una que es individual y la otra que esta en plural en esta parte es lo mismo tenemos a .filter que el parámetro de la función es un objeto individual y que este .filter pasa por cada objeto individualmente de nuestro array en plural donde articulo toma el valor de cada objeto individual de todos los objetos del array artículos

Tuve la duda de por que se llama .map y encontré que un mapa es una estructura de datos en la que puedes acceder a sus valores a través de una clave, entonces entiendo que funciona de esta manera:

var nombreArticulos = articulos.map(function(articulo){
	return articulo.CLAVE // <----- y esto regresará el VALOR de ese elemento del mapa 
})

en donde en ese momento articulo es tratado como un mapa:

articulo = { 
	nombre: "bici",
	costo: "300"
}

usando .filter entiendo que ocurre lo mismo con el elemento actual “articulo”, la diferencia es que este se usa para cuando el/los elementos deben de cumplir una condición dada para ser filtrados.

Cada vez que creo un nuevo array, mi mente sigue luchando por tratar de no pensar como pronuncia el profesor Arrays … plop!

Llegando a esta clase, aunque es básica me doy cuenta que JavaScript es igual a Java, o quizas sea Kotlin que se parece a Java y que al mismo tiempo se parezca a JavaScript pero solo cambian algunos conceptos, y no me vengan a decir que no porque no! jaja

• **Método filter **–> Filtrar cosas. Valida si algo es true o false. No modifica el array principal sino que nos va a generar uno nuevo.

• **Método map **–> nos ayuda a mapear elementos. Tampoco modifica el array original sino que generamos uno nuevo

Desde que unas clases mas atrás pusieron la imagen de Chayanne, ya me siento recibiendo clase de Chayanne!

Cuando se dice que una función es inmutable, se quiere decir que no modifica el estado de los objetos que le pasas como argumento. En otras palabras, la función no cambia el valor de ningún elemento del array original, sino que crea y retorna un nuevo array con los elementos filtrados.

Por ejemplo, en el siguiente código se usa el método filter para crear un nuevo array que contiene solo los números pares del array original:

const numbers = [1, 2, 3, 4, 5];

// filtrar solo los números pares
const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // [2, 4]
console.log(numbers); // [1, 2, 3, 4, 5]

Como puedes ver, el array numbers no ha sido modificado. En su lugar, se ha creado un nuevo array llamado evenNumbers que contiene solo los números pares. Esto significa que la función filter es inmutable, ya que no modifica el array original sino que crea y retorna un nuevo array.

Por favor ya no digas “arreil” 😦

Mis apuntes de este curso en Notion

//Métodos de recorridos de Arrays

//Array con diferentes objetos adentro


//primero generamos el array con la palabra reservada "var"

var articulos []

//Ahora construimos los objetos usando las llaves

var articulos [
    {}
]

//Comensamos a construir nuestros objetoscon las propiedades que llevará:
var articulos = [
    {nombre: "Bicicletta", costo: 3000 },]

    //para agregar más objetos, agrgamos una coma y agregamos el siguiente objeto:

var articulos = [
    {nombre: "Bicicletta", costo: 3000 },
    {nombre: "Tv", costo: 2500 },
    {nombre: "Libro", costo: 320 },
    {nombre: "Celular", costo: 1000 },
    {nombre: "Laptop", costo: 2500},
    {nombre: "Teclado", costo: 500},
    {nombre: "Audifonos", costo: 1700},
];
    
// Le damos enter en la consola para grabarlo. Y vamos a empezar a usar los métodos para recorrer el contenido del array. 

//MÉTODO FILTER
//Filter nos ayuda a validar si algo es verdad o falso y lo mete dentro de un nuevo array. Este método no va a modificar el array original, "articulos"


//generamos una nueva variable y vamos a generar el  nombre de ese nuevo array

var articulosFiltrados = articulos.filter();

//Dentro de este método tenemos que trabajar una función 

var articulosFiltrados = articulos.filter(function(){

} ) 

//Como parámetro a esta función le damos el artículo que vamos a filtrar

var articulosFiltrados = articulos.filter(function(articulo){
    return articulo.costo <= 500

} ); 

//MÉTODO MAP

//El método map me ayudará a mapear ciertos artículos. Este método de map, va a crear un nuevo array sin modificar el original.

var nombreArticulos =  articulos.map(function(articulo){
    return articulo.nombre

});

En la bash de linux pueden ejecutar la consola de JavaScript corriendo el comando “gjs”. Cuando quieran salir de la misma pueden usar Ctrl + Z para interrumpir la consola de JavaScript y volver a la bash de Linux

Dando continuidad al ejercicio anterior. Utilizo el metodo (filter) que me genera un nuevo array trayendo solo los objetos que pasaron el filtro que le indique la funcion. Con el metodo (map) se obtiene un nuevo array solo con los parametros que le estamos solicitando en la funcion.
Ambos metodos generan un nuevo array pero no modifican el array original, y ambos funcionan como loops que iteran por cada uno de los objetos del array original.

Un método es una función asociada a un objeto.

var myObj = {
  myMethod: function(params) {
    // ...hacer algo
  }
}

Leer más: mdn web docs

📌 .filter() nos permite filtrar contenido específico dentro de un array.

Bueno, no se si en algun comentario ya lo escribieron, pero lo utilizo de esta forma:

let articulosFiltrados = articulos.filter(filter => filter.costo <= 500);
let nombreArticulos = articulos.map(map => map.nombre);

function moto(marca, modelo, ano) {
    this.marca = marca;
    this.modelo = modelo;
    this.ano = ano;
    this.llantas = 'BridgeStone';
    this.maxVelocidad = 205;
    this.velActual = 0;
    this.acelerar = function() {
        for (i = 1; i < 5; i++) {
            console.log(`Acelerando..`);
            console.log('Velocidad Actual: ' + String(40 * i)) + 'Km/h';
        }
    };
}
motosNuevas = [];
for (j = 0; j < 30; j++) {
    motosNuevas[j] = new moto('Kawasaki No.' + (j + 1), 'Ninja 40' + (j + 1), String(1990 + j));
}
moto {marca: "Kawasaki No.30", modelo: "Ninja 4030", ano: "2019", llantas: "BridgeStone", maxVelocidad: 205, …}acelerar: ƒ ()ano: "2019"llantas: "BridgeStone"marca: "Kawasaki No.30"maxVelocidad: 205modelo: "Ninja 4030"velActual: 0__proto__: Object
console.log(motosNuevas);
VM2947:1 

var articulo =[

{    nombre : "ENZO" , costo:65},
{    nombre : "PSS4" , costo:350},
{    nombre : "XBOX X " , costo:450},
{    nombre : "TVBOX " , costo:35},
{    nombre : "FERRARI ENZO" , costo:500000},

];



var filtroholdhiden=articulo.filter(function(articulo){

return articulo.costo < 250

});



var namearticulos=articulo.map(function(articulo){

    return articulo.nombre
    
    });```

var articulos = [
    { nombre: "Bici", costo: 3000 },
    { nombre: "TV", costo: 2500 },
    { nombre: "Libro", costo: 320 },
    { nombre: "Celular", costo: 10000 },
    { nombre: "Laptop", costo: 20000 },
    { nombre: "Teclado", costo: 500 },
    { nombre: "Audifonos", costo: 1700 }
]; 

var articulosFiltrados = articulos.filter(function(articulo){
	return articulo.costo <= 500
});

articulosFiltrados

*************************

var nombreArticulos = articulos.map(function(articulo){
	return articulo.nombre
});

nombreArticulos

let productList = [
    { name: "TV", cost: 1500},
    { name: "Bike", cost: 1200},
    { name: "Books", cost: 320},
    { name: "Laptop", cost: 15000},
    { name: "Teclado", cost: "250"},
    { name: "Audifonos", cost: "1500"}
];

let filerProduct = productList.filter(function (articulo) {
    return articulo.cost <= 500;
});

let productName = productList.map(function (articulo) {
    return articulo.name;
});

console.table(filerProduct);
console.table(productName);

let data =[
    {nombre: "Valk3", costo: 120000},
    {nombre: "Valk4", costo: 150000},
    {nombre: "AosuGTS", costo: 130000},
    {nombre: "Wushuang", costo: 170000},
    {nombre: "Salil 3x3", costo: 30000},
    {nombre: "M3RFS M", costo: 60000},
    {nombre: "Mirror", costo: 15000}
];

let filter = (element) => {return element.costo >= 15000}
let map = (element) => {return element.nombre}
data.filter(filter).map(map);

Método filter

var articles = [
    { name: 'Cycle', cost: 3000 },
    { name: 'Tv', cost: 2500},
    { name: 'Book', cost: 320},
    { name: 'Phone', cost: 10000},
    { name: 'Laptop', cost: 20000},
    { name: 'Board', cost: 500},
    { name: 'Earpods', cost: 1700}
];

//Método filter
var filterArticles = articles.filter(function(article){
    return article.cost <= 500;
});

Este método crea un nuevo Array en el que guarda propiedades de los objetos según lo que se vaya necesitando, en éste caso, se esta creando un Array en el que se guardan los ‘articulos’ (objetos) que tengan un costo menor o igual a 500.

Método map

var articles = [
    { name: 'Cycle', cost: 3000 },
    { name: 'Tv', cost: 2500},
    { name: 'Book', cost: 320},
    { name: 'Phone', cost: 10000},
    { name: 'Laptop', cost: 20000},
    { name: 'Board', cost: 500},
    { name: 'Earpods', cost: 1700}
];

//Método map
var articlesName = articles.map(function(article){
    return article.name
});

Este método al igual que el anterior, también crea un Array, pero lo que hace este es devolver un arreglo con el listado de uno de los atributos del Array principal. En este caso, esta devolviendo un Array de los nombres (Atributos o propiedades del objeto) de los articulos.

Me parecio gracioso jaja
Creo que nos falto ver la parte de reduce

Recordar:
La funcion de callback que produce un nuevo array de Filter(), map(), forEach(), find(), every(), etc, recibe 3 argumentos en el siguiente orden:

1. currentValue : El elemento actual del array que se está procesando.
2. index: El índice del elemento actual dentro del array.
3. array: El array sobre el que se llama filter, map, find, etc.

Ahora con estos conceptos veamos algunos ejercicios sobre el siguiente array:

let articles = [
    { name: 'bike', price: 1600},
    { name: 'book', price: 14},
    { name: 'laptop', price: 5000},
    { name: 'keyboard', price: 400}
];

//

• FILTER(): retorna un nuevo array con los elementos que cumplen alguna condición, los elementos no son modificados.

Escoger un número aleatorio de artículos del array.

articles.filter(function(){ return Math.round( Math.random() )} );

Escoger artículos que cumplen alguna restricción en algunos de sus atributos:

articles.filter(function(article){ return article.price > 2000; } );

Escoger artículos en posiciones pares, con respecto a las posiciones del array: 0_based:

articles.filter(function(_, i){ return i%2 == 0; });

• MAP(): retorna un nuevo array con los resultados de la función que le pasamos y que es aplicada a cada uno de los elementos del array.

Devolver en array solo el atributo name por cada elemento de articles:

articles.map(function(value, index){return {name: value.name}; });

//si solo quisiéramos el contenido de -> name
articles.map(function(value, index){return value.name; });

Devolver en array la concatenación de los valores de name y price en un string separado por un espacio.

articles.map(function(value){return `${value.name} ${value.price}`; });

Me parece que el nombre “filter” puede inducir a un error. Aquí les dejo una definición sencilla: “El método filter() crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada.”
 
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Es como una conslta a sql 😮

https://www.google.com/search?q=array+google+traduction&rlz=1C1CHBF_esAR970AR970&oq=array+goo&aqs=chrome.8.0i512j69i57j0i512j0i22i30l7.9053j0j7&sourceid=chrome&ie=UTF-8

Perdón… me desespera que diga ARRAIL

En este lenguaje no sé porqué se me ha complicado tanto la sintaxis. Me sentía más cómodo con Python, fue hermoso.

FILTER Y MAP

Estos dos métodos sirven para trabajar ARRAYS o listas, y están muy relacionados con la programación funcional (además de REDUCE, el tercer método). Como están declarados dentro de Array.prototype() los podemos invocar desde cualquier array.
El método filter() crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada. Filter evalúa la condición como falsa o verdadera y devuelve el elemento del array en cuestión.
El método map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.
En ambos casos hay que asegurarse siempre de incorporar una declaración return para la función, ya que sino la función devolverá un undefined. En el caso de FILTER, nos debemos asegurar que la respuesta sea un valor booleano, pues sino, Javascript utilizará sus reglas de coerción para definir el booleano, lo que obviamente producirá un error.

Veamos un ejemplo. Declaramos un array con objetos dentro.

var autos = [
{marca: "Toyota", modelo: "Corolla"},
{marca: "Toyota", modelo: "Etios"},
{marca: "Ford", modelo: "Focus"},
{marca: "Fiat", modelo: "Argo"},
{marca: "Toyota", modelo: "Hilux"}];

Así aplicaríamos filter, para obtener un nuevo array que tenga los elementos del array cuya marca sea “Toyota”:

var autosFiltrados = autos.filter(function(auto){return auto.marca == "Toyota"});

Y la consola nos muestra el nuevo array:

(3) [{…}, {…}, {…}]
0: {marca: "Toyota", modelo: "Corolla"}
1: {marca: "Toyota", modelo: "Etios"}
2: {marca: "Toyota", modelo: "Hilux"}

Si aplicamos map, por ejemplo, para obtener todos los modelos que están en el array no importa la marca escribiríamos:

var modelos = autos.map(function(auto){return auto.modelo;});

La consola nos muestra así el nuevo array:

(5) ["Corolla", "Etios", "Focus", "Argo", "Hilux"]
0: "Corolla"
1: "Etios"
2: "Focus"
3: "Argo"
4: "Hilux"

Una ventaja que tenemos con estos métodos (filter, map, reduce) es que podemos concatenarlos. Así por ejemplo, podemos obtener una lista de todos los modelos de autos solamente de la marca Toyota así:

var modelosToyota = autos.filter(function(auto){return auto.marca == "Toyota";}).map(function(auto){return auto.modelo;});

Nuestro array devuelto en la consola:

(3) ["Corolla", "Etios", "Hilux"]
0: "Corolla"
1: "Etios"
2: "Hilux"

Por último, algo interesante, es que a partir de ECMASCRIPT 6, podemos usar Arrow Functions, por lo que la sintaxis es más simple todavía:

var conArrowFunctions = autos.filter((auto) => auto.marca == "Toyota").map((auto) => auto.modelo);

Y con la consola obtenemos el nuevo array… que es igual al anterior:

(3) ["Corolla", "Etios", "Hilux"]
0: "Corolla"
1: "Etios"
2: "Hilux"

Espero que les sirva amigos! Saludos!

MÉTODOS DE RECORRIDOS DE ARRAYS

Método filter:
Aprenderemos a recorrer un arreglo. Primero haremos un arreglo que contenga objetos, luego los filtraremos por un parámetro en específico.

En este ejemplo, vamos a generar el arreglo y cada elemento del arreglo va a contener un objeto:

var articulos = [
    {nombre: "Bicicleta", costo:3000},
    {nombre: "TV", costo: 2500},
    {nombre: "Libro", costo: 320},
    {nombre: "Celular", costo:10000},
    {nombre: "Laptop", costo: 20000},
    {nombre: "Teclado", costo: 500},
    {nombre: "Audífonos", costo: 1700}
];

Para filtrar los objetos en en arreglo en base a uno de sus parámetros haremos un nuevo arreglo por medio del método filter. Ya que filter generará un arreglo, necesitaremos almacenar los objetos que genere dentro de otro arreglo:

var articulosFiltrados=articulos.filter(function(articulo){
    return articulo.costo<=500;
});

Método map:
Con este método vamos de igual forma generar un arreglo que nos devolverá la lista de los parámetros de nuestros objetos del arreglo original.

var articulos = [
    {nombre: "Bicicleta", costo:3000},
    {nombre: "TV", costo: 2500},
    {nombre: "Libro", costo: 320},
    {nombre: "Celular", costo:10000},
    {nombre: "Laptop", costo: 20000},
    {nombre: "Teclado", costo: 500},
    {nombre: "Audífonos", costo: 1700}
];

Creamos el nuevo arreglo que contendrá como elementos los parámetros que estemos mapeando:

var nomcbreArticulos=articulos.map(function(articulo){
    return articulo.nombre;
});

No hay que olvidar que filter genera un arreglo con objetos dentro mientras que map genera un arreglo con cadenas de textos en su interior.

Apuntes completos en Notion

Cómo usar filter: Primero hay que entender, que filter funciona tal como su nombre lo indica. Filtra objetos según unas características definidas arbitrariamente por el desarrollador. Como filter es un método que utilizamos en los objetos de tipo array, signfica entonces que lo utilizamos sobre un array: miArray.filter(); Ahora bien, como filter es una High order function, tenemos que invocar a definir una función sobre él, para que funcione: miArray.filter(function(miArray){ return miArray.nombre = "Miguel"});

Para usar la otra gran High order function, map, simplemente necesitamos definir o invocar una función dentro de map, para que este ejecute una acción, lo más importante es recordar que map, recorre el array y dependiendo de la función que le asignes, te devolverá los valores.

Por fin aprendí algo nuevo y eso me emociona!

La linea de funcion se puede cambiar por una funcion de flecha, lo que la hace mas simplificada

var lista_articulos = [
    { nombre: "monitor",     costo: 1200 },
    { nombre: "motherboard", costo: 4000 },
    { nombre: "ram",         costo: 1500 },
    { nombre: "procesador",  costo: 7000 },
    { nombre: "gpu",         costo: 9000 },
    { nombre: "fuente",      costo: 1000 },
];

var filtrados = lista_articulos.filter(a = lista => lista.costo<=2000);

Les dejo el código:

//creo un array con varios elementos

var articulos = [
    {nombre: "Bici", costo: 3000 },
    {nombre: "Tv", costo: 2500 },
    {nombre: "Libro", costo: 320 },
    {nombre: "Celular", costo: 10000 },
    {nombre: "Laptop", costo: 20000 },
    {nombre: "Teclado", costo: 500 },
    {nombre: "Audifonos", cosot: 1700 },
];

//crea un nuevo array con los filtros que le pida

var articulosFiltrados = articulos.filter(function(articulo){
    return articulo.costo <= 500
});

//crea un nuevo array solo con los nombres (o lo que le pida)

var nombreArticulos = articulos.map(function(articulo){
    return articulo.nombre
})```

var listAutos = [
    {brand: "Mazda", model: "2", year: 2017, qDoors: 5},
    {brand: "Toyota", model: "Trackter", year: 2010, qDoors: 7},
    {brand: "Tesla", model: "X", year: 2022, qDoors: 3},
    {brand: "Audi", model: "R8", year: 2025, qDoors: 4},
    {brand: "Marcedes Benz", model: "AMG", year: 2020, qDoors: 2},
]

var autosFiltrados = listAutos.filter(function(carro){
    return carro.qDoors <= 5;
});
console.log(autosFiltrados);  //Aqui me traera solo los objetos que tengan qDoors <=5 (FILTRO)

var mapeoAutos = listAutos.map(function(marca){
    return marca.brand;
});
console.log(mapeoAutos); //Aqui solo me traera la marca de los autos (MAPEO marcas para este caso)

Be ware of :
El nombre de la variable dentro de la función debe ser la misma que se usa en el return statement

//Filter forma 1
var ArticulosMenoresDe500 = articulos.filter(function(articulo){
  return articulo.costo<=500;
})
//Filter forma 2
var artMayor10000 = articulos.filter(articulo=>articulo.costo>=10000);

//metodo 1
var nombreArticulo = articulos.map(function(articulo){
	return articulo.nombre;
});

//metodo 2
var artName = articulos.map(articulo=>articulo.nombre);

Aporte de arrays

Otra forma tambien valida de usar el filter es la siguiente:

var articulosFiltrados = articulos.filter(articulo =>articulo.costo <=500);

Es la misma forma pero un poco mas recortada.

//Y asi filtramos los nombres por la cantidad de caracteres.
var nombresCortos = articulos.filter(function(articulo) {
    return articulo.nombre.length <= 4
});

const articulosFiltrados = articulos.filter((articulo)=>(articulo.costo < 500));
¿con función flecha que ventajas hay?

Otra manera de hacerlo:

let articulosFiltrados= articulos.filter(x => (x.costo<=500));

Para entender un poco más de estos métodos o conocer otras funciones de ellos, recomiendo el siguiente video: https://www.youtube.com/watch?v=zRuSVDLx8kE

var articulos = [
    { nombre: "Bici", costo: 3000 },
    { nombre: "TV", costo: 2500 },
    { nombre: "Libro", costo: 320 },
    { nombre: "Celular", costo: 10000 },
    { nombre: "Laptop", costo: 20000 },
    { nombre: "Teclado", costo: 500 },
    { nombre: "Audifonos", costo: 1700 },
  ];


// Metodo FILTER
  var articulosFiltrados = articulos.filter(function(articulo){
    return articulo.costo <=500
  })

//   En la consola:

//   articulosFiltrados
// (2) [{…}, {…}]
// 0:{nombre: 'Libro', costo: 320}
// 1:{nombre: 'Teclado', costo: 500}
// length: 2
________________________________________________________________________________
//Metodo MAP

var nombreArticulos = articulos.map(function (articulo) {
    return articulo.nombre 
})
//   En la consola:

// nombreArticulos
// (7) ['Bici', 'TV', 'Libro', 'Celular', 'Laptop', 'Teclado', 'Audifonos']

ARRAYS DE OBJETOS: CREAR, RECORRER Y ACCEDER
Crear el array

var articulos = [
{nombre: "Bici", costo: 3000},
{nombre: "Libro", costo: 10900}
];

Métodos

1. Obtener un array nuevo con los elementos de articulos que tengan un costo menor o igual a 500

var articulosFiltro = articulos.filter( function(articulo){
return articulo.costo <= 500;
} );

1. Obtener la propiedad nombre de todos los objetos

var nombreArticulos = articulos.map( function(articulo){
return articulo.nombre;
} );

muy interesante la clase

let articulos =[
   {name: "iphone14", cost: 1000},
    {name: "galaxys21", cost:700},
   {name: "pixel4a", cost:2000},
    {name: "honor19", cost:10},
   {name: "redmi 11 lite", cost:20},
    {name: "redmi note 6 pro", cost: 20000},
   {name: "tab4a", cost: 200},
    {name: "redmibuds3pro", cost:340},
   {name: "galaxyfamelite", cost:10},
 ];
 const articulosflitro = articulos.filter(function(articulo){
   return articulo.cost == 10 
 })
articulosflitro
const namearticle = articulos.map(function(articuloz){
  return articuloz.name
})
namearticle

some, nos permite filtrar y hacer una búsqueda para determinar si existe o no un valor de nuestro array o array de objetos.

• Tenemos un array de números enteros
• Queremos validar si dentro de este array hay un número par o en su defecto si esta el número 5

const array = [1, 2, 3, 4, 5];

// Option 1
const numberEvent = (element) => element % 2 === 0;   /// función flecha

array.some(numberEvent);   // return true or false 

//  Option 2
array.some( function(item) {  return item % 2 });

//////// Validar si esta el número 5

// Option 1
array.some((item) => item === 5 );   // función en flecha 

// Option 2

array.some( function(item) {  return item === 5 });

Visto en clase:

var articulos = [
    {nombre: "Bici", costo: 3000},
    {nombre: "Tv", costo: 2500},
    {nombre: "Libro", costo: 320},
    {nombre: "Celular", costo: 10000},
    {nombre: "Lapto", costo: 20000},
    {nombre: "Teclado", costo: 500},
    {nombre: "Audifonos", costo: 1700}

];
 //Metodo Filter
var articulosFiltrados = articulos.filter(function(articulo) {
    return articulo.costo <= 500;

});

//Metodo Map
var nombreArticulos = articulos.map(function(articulo) {
    return artticulo.nombre
});
    

porque lo hace de diferentes maneras a veces usa llaves y corchetes cuadrados no entiendo

para comprar piezas de pc 😃

// Cargamos la lista de piezas que deseamos comprar
var articulosPc = [
    {nombre: "Procesador", costo: 185},
    {nombre: "Placa", costo: 100},
    {nombre: "Ram", costo: 80},
    {nombre: "M2", costo: 35},
    {nombre: "Hdd", costo: 35},
    {nombre: "Video", costo: 280},
    {nombre: "Fuente", costo: 65},
    {nombre:"Case", costo:85 },
];

//como nos falta dinero queremos comprar solo algunas piezas
var comprarPiezas = articulosPc.filter(function(pieza) {
    return pieza.nombre == "Procesador" || pieza.nombre == "Placa" || pieza.nombre == "Ram"
});
console.log(comprarPiezas)

//los costos de esas piezas son
var costoPiezas = comprarPiezas.map(function(pieza) {
    return pieza.costo
});
console.log(costoPiezas)

//sumamos para obtener el total a pagar
var costoTotal = 0
for (let i = 0; i < costoPiezas.length; i++) {
    costoTotal = costoTotal + costoPiezas[i]
}
console.log("Costo total: " + costoTotal + " Sus");

var articulos = [
     {nombre: "Bici", costo: 3000},
     {nombre: "Televisor", costo: 2500},
     {nombre: "Libro", costo: 120},
     {nombre: "Celular", costo: 1500},
     {nombre: "Laptop", costo: 3000},
     {nombre: "Teclado", costo: 100},
     {nombre: "Audifonos", costo: 130},

];

var articulosFiltrados = articulos.filter(function(articulo){
    return articulo.costo <= 500
});

var nombreArticulos = articulos.map(function(articulo){
    return articulo.nombre
});

var articulos = [
    { nombre: "Bici", costo: 3000 },
    { nombre: "TV", costo: 2500 },
    { nombre: "Libro", costo: 320 },
    { nombre: "Celular", costo: 10000 },
    { nombre: "Laptop", costo: 20000 },
    { nombre: "Teclado", costo: 500 },
    { nombre: "Audifonos", costo: 1700 },
  ];

  var articulosFiltrados = articulos.filter(function(articulo){
        return articulo.costo <= 500
  });

  var nombreArticulos = articulos.map(function(articulo){
    return articulo.nombre;
  });

var articulos = [
  { nombre: "Bici", costo: 3000 },
  { nombre: "TV", costo: 2500 },
  { nombre: "Libro", costo: 320 },
  { nombre: "Celular", costo: 10000 },
  { nombre: "Laptop", costo: 20000 },
  { nombre: "Teclado", costo: 500 },
  { nombre: "Audifonos", costo: 1700 },
]
// filter filtra los arrays 
var articulosFiltrados = articulos.filter (function(articulo){
    return articulo.costo >= 1500

});

//  map me trae la parte del arrays  que quiera 

var costoArticulos = articulos.map (function(articulo){
    return articulo.costo

});