Introducción
Tu AS bajo la manga
Fundamentos del manejo de arrays
ForEach
Mutable o Inmutable
Map
Desafío: Todos los elementos por dos usando map.
Map Reloaded
Desafío: Agrega la propiedad.
Filter
Desafío: Filtra las palabras de 4 letras y más.
Reduce
Desafío: Calcula el total de un array.
Reduce Reloaded
Métodos en JavaScript
Some
Desafío: ¿Existe algún par?
Every
Desafío: ¿Todos son pares?
Find y FindIndex
Includes
Desafío: Crea un buscador
Join
Desafío: Construye una URL
Concat
Flat
FlatMap
Mutable functions
Sort
Despedida
Despedida
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 64
Preguntas 2
Les dejo el código como está al principio de la clase para los que no quieran escribir…
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const myProducts = [];
console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));
Eliminar un elemento sin borrarlo del la lista original.
Solución: usar filter:
Modificar una nueva lista sin modificar la original.
Solución: copiar solo los elementos para que no tengan la misma dirección de memoria.
Para el segundo reto, solo se utiliza .map con una nueva variable, de esta forma:
const newArray2 = productsV2.map(item => {
if(item.id === update.id){
return {
...item,
...update.changes
}
}else{
return {
...item
}
}
});
Bueno, una de las cosas más reelevantes que saqué del curso es la importancia del spread operator en situaciones clave, y es algo que personalmente no terminé de asimilar como me gustaría, por lo que busqué algo de documentación que me puede servir, y también a ustedes
VIDEO - entendiendo spread operator
How to use spread operator - Medium
Un pequeño aporte que no sabía y quiero compartir.
El metodo .splice(), no solamente sirve para borrar en cierta
forma un elemento sino también para agregarlos al index del array que tu quieres.Ej:
Tenemos el siguiente array:
const holaMundo = [‘Maria’, ‘Andres’, ‘Cecilia’];
Y quizás lo que quieres es añadir a ‘Roberto’ después de Andres y antes de cecilia.
& listo, pones tu index de celcilia, no le ponemos un 1
porque no queremos eliminar ningún elemento hacia la
derecha sino un 0, pones la coma y pones el o los
elementos que quieres agregar allí.
Reto 1:
const products = [
{title: "Pizza", price: 121, id: "🍕"},
{ name: "Burger", price: 121, id: '🍔' },
{ name: "Hot cakes", price: 121, id: '🥞' },
];
const myProducts = [];
let newArray;
const productIndex = products.findIndex(item => item.id === "🍔");
if (productIndex !== -1) {
myProducts.push(products[productIndex]);
newArray = products.filter(item => item != products[productIndex]);
}
console.log("Products:",products);
console.log("MyProducts:", myProducts);
console.log("newArray:",newArray);
console.log("-".repeat(10));
Reto 2:
const productsV2 = [
{title: "Pizza", price: 121, id: "🍕"},
{ name: "Burger", price: 121, id: '🍔' },
{ name: "Hot cakes", price: 121, id: '🥞' },
];
const update = {
id: "🥞",
changes: {
price: 200,
description: "delicious",
},
}
const productIndexV2 = productsV2.findIndex(item => item.id === update.id);
const updatedProductsV2 = productsV2
.filter(item => item.id !== update.id)
.concat({...productsV2[productIndexV2], ...update.changes});
console.log("OriginalList:",productsV2);
console.log("UpdatedList:",updatedProductsV2);
1er Reto
const idx = products.findIndex(({ id }) => id === 'burger');
if (idx === -1) return console.log('Sin id producto');
myProducts.push(products[idx]);
const newProducts = products.filter((_, i) => idx !== i);
2do Reto
const idxV2 = productsV2.findIndex(({ id }) => id === update.id);
if (idxV2 === -1) return console.log('Sin id producto para actualizar');
const newProductsV2 = productsV2.map((product, i) => {
if (i === idxV2) return { ...product, ...update.change };
return product;
});
El reto se soluciona simpletemente creando otro array
const otroArray=[…products]
y aplicar todo el codigo sobre el array nuevo .
Eso es todo
Mi reto:
Visualizo dos formas:
1- Usando el método find() para encontrar el objeto y solo filtrar los productos en un nuevo array que no contenga ese elemento, pero solo funciona cuando se busca por valores únicos (como es este caso)
2- Seguir usando el método findIndex() para encontrár el índice del producto y luego filtrar los productos usando el parámetro opcional “index” en la arrow function como hice a continuación:
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const myProducts = [];
let remindedProducts = [];
const productIndex = products.findIndex(item => item.id === '🍔')
if (productIndex !== -1) {
myProducts.push(products[productIndex])
remindedProducts = products.filter((item, index) => index !== productIndex)
// products.splice(productIndex, 1)
}
console.log('remindedProducts', remindedProducts);
console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));
Esta segunda forma es más precisa porque nos garantizamos de que solo excluimos el índice deseado.
Y visualizo una tercera manera creado un arreglo nuevo usando spread operators de los elementos antes del producto y después del producto, pero creo que por el exceso de código y la complejidad es innecesaria.
const products = [
{title: "Pizza", price: 121, id: "🍕"},
{ name: "Burger", price: 121, id: '🍔' },
{ name: "Hot cakes", price: 121, id: '🥞' },
];
const newProducts = products.filter(item => item.id !== '🍕');
console.log(newProducts);
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const update = {
id: '🥞',
changes: {
price: 200,
description: 'delicioso'
}
};
const productIndex = products.findIndex(item => item.id === update.id);
// Solo agrego esto
const newProduct = [...products]
// Cambio product por newProduct
newProduct[productIndex] = { ...products[productIndex],
...update.changes
};
console.log('---'.repeat(10),'products','---'.repeat(10),products)
console.log('---'.repeat(10),'newProducts','---'.repeat(10),newProduct)
mi solucion de manera reutilizable
function noModificarOriginal(array, itemEncontrar) {
let encontrarItem = array
.filter(item => item.id === itemEncontrar) //encuentra el item
.map(item => {
return {
...item,
...update.changes,
};
}); // modifica el item encontrado
let mewArrayModified = array
.filter(item => item.id !== itemEncontrar) // nuevo array sin el item
.concat(encontrarItem); // agrega el item encontrado y modificado
return mewArrayModified;
}
const arrayModificado = noModificarOriginal(products, update.id);
console.log(arrayModificado); // array modificado
console.log(products); // array original intacto
const products = [
{ title: 'Pizza', price: 121, id: 'pizza' },
{ title: 'Burger', price: 121, id: 'burger' },
{ title: 'Hot cakes', price: 121, id: 'hot cakes' },
];
const productsNotDeleted = products.filter(product => product.id !== 'burger');
console.log('productos no eliminados', productsNotDeleted);
const update = {
id: 'hot cakes',
changes: { price: 200, description: 'delicious' },
};
const updateProducts = products.reduce((previousValue, currentValue) => {
if (currentValue.id === update.id) {
previousValue.push({
...currentValue,
...update.changes,
});
} else {
previousValue.push(currentValue);
}
return previousValue;
}, []);
console.log('productos actualizados', updateProducts);
console.log('productos', products);
Hola esta es mi solución del reto
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const resp = products.filter(item => item.id !== '🍔')
console.log(resp);
console.log(products)
Reto 1
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const myProducts = [];
console.group("Reto1");
console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));
//Reto1
const reto = products.filter(item => item.id !== '🍔');
console.log(reto)
console.groupEnd();
Reto2
const productsV2 = [
{ title: "Pizza", price: 121, id: "🍕" },
{ title: "Burger", price: 121, id: "🍔" },
{ title: "Hot cakes", price: 121, id: "🥞" },
];
const update = {
id: "🥞",
changes: {
price: 200,
description: 'delicioso'
}
}
const products2Original = [...productsV2]
const productIndexV2 = productsV2.findIndex(item => item.id === update.id);
productsV2[productIndexV2] = {
...productsV2[productIndexV2],
...update.changes,
};
console.log(products2Original);
console.log(productsV2);
const arreglo1=[
{nombre:'camilo',
edad:22},
{nombre:'jesus',
edad:19},
{nombre:'pedro',
edad:20}
]
const arreglo2={
...arreglo1.find(persona=>persona.nombre==='camilo'),
edad:24,
nacionalidad:'colombiano'
}
console.log(arreglo2)
console.log(arreglo1)
Para los dos retos la solución es la misma linea.
En este caso se muestra la solución al segundo reto donde la primera linea es donde se tiene que agregar copiando el array con spread operator
Y aquí el resultado en la consola
Reto .
const products = [
{ title: "Pizza", price: 121, id: "🍕" },
{ title: "Burger", price: 121, id: "🍔" },
{ title: "Hot cakes", price: 121, id: "🥞" },
];
const myProducts = [];
const product = products.find((item) => item.id === "🥞");
let newProducts = [];
if (product) {
const indexItem = products.findIndex((item) => item.id === product.id);
console.log(indexItem);
newProducts = [...products];
newProducts.splice(indexItem, 1);
myProducts.push(product);
}
console.log("products", products);
console.log("myProducts", myProducts);
console.log("newProducts", newProducts);
Reto 1
Eliminar un elemento sin borrarlo del la lista original.
const products = [
{ title: "Pizza", price: 121, id: "🍕" },
{ title: "Burger", price: 121, id: "🍔" },
{ title: "Hot cakes", price: 121, id: "🥞" },
];
const newProduct = products.filter(item => item.id !== "🍔");
console.log("newProduct", newProduct);
console.log("products", products);
El método splice retorna un array con los elementos eliminados. Aquí una forma de utilizar ese array retornado:
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const myProducts = [];
const productIndex = products.findIndex(item => item.id === '🍔')
if (productIndex !== -1) {
myProducts.push(...products.splice(productIndex, 1));
}
console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));
solucion al reto de eliminacion:
import { IProducts } from '../../types'
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' }
]
const myProducts: IProducts[] = []
let productsFilter: IProducts[] = []
console.log('products', products)
console.log('myProducts', myProducts)
console.log('-'.repeat(10))
const productIndex = products.findIndex(item => item.id === '🍔')
if (productIndex !== -1) {
myProducts.push(products[productIndex])
// products.splice(productIndex, 1)
productsFilter = products.filter(item => item.id !== products[productIndex].id)
}
console.log('myproducts:', myProducts)
console.log(products)
console.log(productsFilter)
const productsV2 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const updates = productsV2.map(item => {
return {
...item,
description: "The best Food",
price: 150
}
});
console.log(productsV2);
console.log(updates);
const challenge1 = products.filter(item => item.id !== '🍔');
const challenge2 = productsV2.map(item => (item.id === update.id) ? {...item, ...update.changes} : item);
Esta es mi solucion para el segundo reto:D
const products = [
{ title: 'Pizza', price: 121, id: 'Pizza' },
{ title: 'Burger', price: 121, id: 'Burger' },
{ title: 'Hot cakes', price: 121, id: 'Hot Cakes' },
];
const changeProducts = [...products];
const update = {
title: 'Super Burger',
price: 250,
};
const updateProduct = (idProduct) => {
const productIndex = changeProducts.findIndex((i) => i.id === idProduct);
changeProducts[productIndex] = {
...changeProducts[productIndex],
...update,
};
};
updateProduct('Burger');
Challenged no. 2 completed
Le comparto mi soluciones a los retos. 😄
const products =
[
{
title: 'Pizza',
price: 121,
id: '🍕',
},
{
title: 'Burger',
price: 121,
id: '🍔',
},
{
title: 'Hot cakes',
price: 121,
id: '🥞',
},
];
const myProducts = [];
let newProducts = [];
const productIndex = products.findIndex(({id}) => id === '🍔');
if (productIndex !== -1) {
myProducts.push(products[productIndex]);
newProducts = products.filter(({id}) => id !== '🍔');
}
console.log({products, newProducts, myProducts});
function addChanges (item) {
let newItem = {...item};
if (item['id'] === update['id']) {
newItem = {
...item,
...update['changes']
}
}
return newItem;
}
const productsV2 =
[
{
title: 'Pizza',
price: 121,
id: '🍕',
},
{
title: 'Burger',
price: 121,
id: '🍔',
},
{
title: 'Hot cakes',
price: 121,
id: '🥞',
},
];
const update = {
id: '🥞',
changes: {
price: 200,
description: 'Delicioso',
},
}
const newArrayProductV2 = productsV2.map(addChanges(item));
console.log({newArrayProductV2});
Reto 1:
const myProducts = [];
myProducts.push(...products)
myProducts.splice(1,1)
RETO 1:
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
console.log("products", products);
console.log("-".repeat(10));
const newproducts = products.reduce((arr, cur, index) => {
if (cur.id == '🍔') {
arr.splice(index, 1);
}
return arr;
}, [...products]);
console.log("products", products);
console.log("newProducts", newproducts);
console.log("-".repeat(10));
RETO2:
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const update = {
id: '🥞',
changes: {
price: 200,
description: 'delicious'
}
}
const products_update = products.reduce((arr, cur, index) => {
if (cur.id == update.id) {
arr[index] = {
...arr[index],
...update.changes
}
}
return arr;
}, [...products]);
console.log('products', products);
console.log('products_update', products_update);
Espero tu like señor Nicolas
//reto1 eliminar un producto sin modificar el array original
const productsV2 = products.filter(element => element.id !== "🍔")
console.log(productsV2)
//reto2 actualizar un elemnto sin modificar el array original
const update = {
id: "🥞",
changes: {
price: 200,
description: 'delicioso'
}
}
const productsV3 = products.map(element => {
if(element.id === update.id) {
element = {...element, ...update.changes}
}
return element
})
console.log("productsV3",productsV3)
Aprovechando el resultado del método findIndex, donde se obtiene el index respectivo, se podria hacer de la siguiente manera:
const productUpdateV2 = productsV2.map((product, index) => {
if(index !== productIndexV2){
return product;
}else{
return {
...product,
...update.changes
}
}
});
const productsV2 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const update = {
id: '🥞',
changes: {
title: 'Hot cakes',
price: 121,
description: 'Delicious'
}
}
console.log('Products', productsV2);
const newProductsV2 = [...productsV2];
console.log('New Porducts 1', newProductsV2);
const newProductIndex = newProductsV2.findIndex(element => element.id === update.id);
if (newProductIndex != -1) {
newProductsV2[newProductIndex] =
{
...newProductsV2[newProductIndex],
...update.changes,
}
}
console.log('New Porducts 2', newProductsV2);
console.log('Products', productsV2);
Mi solución…
//Delete
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const myProducts = products.filter(item => item.id !== '🍔');
console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));
// Update
const products2 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const ans = products2.map(item => {
if (item.id === '🥞') {
return {
...item,
price: 200,
description: 'pankakes'
}
}
return item
})
console.log("products2", products2);
console.log("ans", ans);
console.log("-".repeat(10));
Solucion
Reto 1 para eliminar el valor que se agrego solo se agrega esta linea de codigo
const newProducts = products.filter(item => item.id !== '🍔');
Reto 2:
const productsV2 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const update = {
id: '🍔',
changes: {
price: 300,
description: 'delisius',
}
};
const productIndex2 = productsV2.findIndex(item => item.id === '🍔');
const productsV3 = productsV2.map(product => {
if(product.id != '🍔' ){
return product;
}else{
product = {
...product,
...update.changes,
}
return product;
}
});
console.log(productsV2);
console.log(productsV3);
Solución a reto
const myProducts = [];
myProducts.push(products[0]);
myProducts.push(products[2]);
Eliminar
if(productIndexDelete !== -1) {
myProducts.push(products[productIndexDelete]);
products.filter(product => product.id !== '🍔');
}>
Editar
const productsV3 = productsV2.map(item => item.id === update.id ? {...update} : {...item});
Reto 1:
Eliminar un elemento sin borrarlo del la lista original.
Solución: usar filter:
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const nuevoArray = products.filter(item => {
return item.id !== '🍔';
})
console.log('Array Original: ', products);
console.log('Array Nuevo: ', nuevoArray);
Reto 2:
Modificar un array pero sin modificar el array original usando map.
const productsV2 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const update = {
id: '🥞',
changes: {
price: 200,
description: 'delicious',
},
}
const productsV2Nuevo = productsV2.map(item => item);
const productIndex2 = productsV2Nuevo.findIndex(item => item.id === update.id);
//Fucion de el estado anterior y los cambios que yo quiero poner
productsV2Nuevo[productIndex2] = {
...productsV2Nuevo[productIndex2],
...update.changes,
};
console.log('Nuevo Array:', productsV2Nuevo);
console.log('Viejo Array: ', productsV2);
Yo solucioné ambos retos usando el spread operator:
const products = [
{title: "Pizza", price: 121, id: "🍕"},
{ name: "Burger", price: 121, id: '🍔' },
{ name: "Hot cakes", price: 121, id: '🥞' },
];
const productIndex=products.findIndex(product => product.id === '🍔');
const productsWithoutBurger = [...products];
if(productIndex != -1) {
productsWithoutBurger.splice(productIndex,1);
}
console.log('Original', products)
console.log('Modified', productsWithoutBurger)
const update = {
id: '🥞',
changes: {
price: 200,
description: 'delicioso'
}
}
const productIndex1 = products.findIndex(product => product.id === '🥞');
const productsHotCakeEdited = [...products];
if(productIndex1 != -1) {
productsHotCakeEdited[productIndex1]= {
...productsHotCakeEdited[productIndex1],
...update.changes,
};
}
console.log('Original', products)
console.log('Hot Cake Modified', productsHotCakeEdited)
Challenge 1
//CHALLENGE 1
const products = [
{ title: "Pizza", price: 121, id: "🍕" },
{ title: "Burger", price: 121, id: "🍔" },
{ title: "Hot cakes", price: 121, id: "🥞" },
];
const newArray = products.filter((item) => {
if (item.id !== "🍕") {
return item;
}
});
console.log("products", products);
console.log("newArray", newArray);
challenge 2
//CHALLENGE 2
const productsV2 = [
{ title: "Pizza", price: 121, id: "🍕" },
{ title: "Burger", price: 121, id: "🍔" },
{ title: "Hot cakes", price: 121, id: "🥞" },
];
const otherArray = [];
const update = {
id: "🍔",
changes: {
price: 200,
descripcion: "delicious",
},
};
productsV2.forEach((item) => otherArray.push(item));
const productIndex = otherArray.findIndex((item) => item.id === update.id);
otherArray[productIndex] = {
...otherArray[productIndex],
...update.changes,
};
console.log(productsV2);
console.log("-".repeat(10));
console.log("new", otherArray);
Mi solucion al reto 1, hay una parte de codigo comentado que fue el de la clase, de resto, muestro 2 posibles soluciones:
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const myProducts = [];
console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));
//utils
const selection = products.findIndex(item => item.id === '🍔');
if(selection !== -1){
myProducts.push(products[selection]);
}
//solution 1
const newList = products.map(item => ({...item}))
newList.splice(selection, 1)
console.log('newList', newList)
//solution 2
const newList2 = [...products]
newList2.splice(selection, 1)
console.log('newList2', newList2)
//class example
// const selection = products.findIndex(item => item.id === '🍔');
// console.log(selection)
// if(selection !== -1){
// myProducts.push(products[selection]);
// products.splice(selection, 1);
// }
console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));
Reto 1:
.
En mi caso, se me ocurrió crear una función que recibiera como parámetros el array, el índice desde el que se desee eliminar, y la cantidad de elementos a eliminar. Esto permitirá eliminar los elementos que se deseen de un array, tal como lo hace splice.
.
Reto 1:
Reto 2:
Hola les dejo mi solución!
const products3 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const newArrayFilter = products3.filter((item) => {
return item.id != '🍔';
});
//reto 1
console.log('newArrayFilter',newArrayFilter);
const update2 = {
id: '🥞',
changes: {
price: 200,
description: 'delicioso'
}
}
const newArrayUpdateMap = products3.map((item) => {
if (item.id === update2.id) {
item = {...item,...update2.changes}
}
return item;
})
//reto 2
console.log('products3',products3);
console.log('newArrayUpdateMap',newArrayUpdateMap);
desafio #1
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
]
const myProducts = [];
const searchIndex = products.findIndex(e => e.id === '🍔')
if (searchIndex !== -1){
myProducts.push(products[searchIndex])
rta = products.filter(e => e.id !== '🍔')
}
console.log("products", products);
console.log("rta", rta)
console.log("myProducts", myProducts);
console.log("-".repeat(10));
desafio #2
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
]
const update = {
id: '🥞',
changes: {
price: 200,
description: '¡delicious!'
}
}
const rta = products.map(e => {
if (e.id === update.id){
return {
...e,
...update.changes,
}
} else {
return {
...e,
}
}
})
console.log(rta)
Reto 1:
const products2 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const myProducts2 = [];
products2.find(product => {
product.id === '🍔' && myProducts2.push(product);
})
console.log('myProducts2:', myProducts2);
const newArray = [...products2];
newArray.splice(newArray.findIndex(product => product.id === '🍔'), 1);
console.log('products2:', products2);
console.log('newArray:', newArray);
Reto 2:
const products3 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const burger = products3.findIndex(product => product.id === '🍔');
const updateBurger = {
id: "🍔",
changes: {
price: 240,
description: 'tasty'
}
}
const newArray3 = [...products3];
newArray3[burger] = {
...newArray3[burger],
...updateBurger.changes
};
console.log('products3:', products3);
console.log('newArray3:', newArray3);
Esta fue mi forma de hacer el ejercicio:
const update = {
id: "🥞",
changes: {
price: 200,
description: 'delicioso'
}
}
const updateArray = products.map(element=>{
if(element.id==='🥞'){
return {
...element,
...update.changes
}
}else{
return element;
}
});
console.log(updateArray);
console.log(products);
Reto 1
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const newProducts = [];
let oldProducts;
const productIndex = products.findIndex(item => {
if(item.id == '🍔'){
oldProducts = products.filter(item => item.id != '🍔')
return item
}
});
if(productIndex != -1){
newProducts.push(products[productIndex])
}
console.log(newProducts)
console.log(oldProducts)
Reto 2
const productsV4 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const productsUpdated = productsV4.map(item => {
if(item.id == update.id){
item = {
...item,
...update.changes,
}
}
return item
})
console.log('Products updated:', productsUpdated)
RETO #2
const newArr = productsV2.map(item => {
if(item.id === update.id){
return {...item, ...update.changes}
}else{
return item;
}
});
console.log(productsV2);
console.log(newArr);
RETO #1 😄
const products = [
{ name: "Pizza", price: 121, id: "🍕"},
{ name: "Burger", price: 121, id: '🍔' },
{ name: "Hot cakes", price: 121, id: '🥞' },
];
const myProducts = [];
let newArray;
const productIndex = products.findIndex(item => item.id === "🍔");
if (productIndex !== -1) {
myProducts.push(products[productIndex]);
newArray = products.filter(item => item != products[productIndex]);
}
console.log("Products:",products);
console.log("MyProducts:", myProducts);
console.log("newArray:",newArray);
RETO #2 😛
const productsV2 = [
{ name: "Pizza", price: 121, id: "🍕"},
{ name: "Burger", price: 121, id: '🍔' },
{ name: "Hot cakes", price: 121, id: '🥞' },
];
const update = {
id: "🥞",
changes: {
price: 200,
description: "Genial",
},
}
const productIndexV2 = productsV2.findIndex(item => item.id === update.id);
const updatedProductsV2 = productsV2
.filter(item => item.id !== update.id)
.concat({...productsV2[productIndexV2], ...update.changes});
console.log("OriginalList:",productsV2);
console.log("UpdatedList:",updatedProductsV2);
CODIGO DEL SEGUNDO RETO.
POR FAVOR DENME SUGERENCIAS Y CORRIJANME
const productsV2 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const update = {
id: '🥞',
changes: {
price: 200,
description: 'delicioso'
}
}
const newProductsV2 = productsV2.map(item=>item)
const productIndexV2 = newProductsV2.findIndex(item => item.id === update.id)
newProductsV2[productIndexV2] = {
...newProductsV2[productIndexV2],
...update.changes,
};
console.log(productsV2)
console.log('-------------------------')
console.log(newProductsV2)
Dejo mi codigo del primer reto! Agradezco sugerencias y correcciones!
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const myProducts = [];
/*
console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));*/
const productIndex = products.findIndex(item => item.id === '🍔' )
let newArr;
if(productIndex !== -1){
myProducts.push(products[productIndex]);
newArr = products.map(item => item)//
newArr.splice(productIndex,1);
}
console.log(products)
console.log(myProducts)
console.log(newArr)
reto 1
const products = [
{ title: "Pizza", price: 121, id: "🍕" },
{ title: "Burger", price: 121, id: "🍔" },
{ title: "Hot cakes", price: 121, id: "🥞" },
];
const productsPass = [...products];
const myProducts = [];
console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));
const productIndex = productsPass.findIndex(item => item.id === '🍔');
if (productIndex !== -1) {
myProducts.push(productsPass[productIndex]);
productsPass.splice(productIndex, 1);
}
console.log("products", products);
console.log("myProducts", myProducts);
console.log("myProductsPass", productsPass);
console.log("-".repeat(10));
Creo que Map debería llamarse godMap:
const products = [
{title: "Pizza", price: 121, id: "🍕"},
{ name: "Burger", price: 121, id: '🍔' },
{ name: "Hot cakes", price: 121, id: '🥞' },
];
const productsV2 = products.filter(product => product.id !== '🍔');
console.log('Original:',products);
console.log('V2:', productsV2);
const update = {
id: "🥞",
changes: {
price: 200,
description: "delicious",
},
}
const productsV3 = products.map(product => {
if(product.id === update.id) return {...product,...update.changes};
return product;
});
console.log('Original:',products);
console.log('newObject:',productsV3);
Les comparto mis soluciones de los retos:
#1
const foods = [
{ title: "Pizza", price: 121, id: "🍕" },
{ title: "Burger", price: 121, id: "🍔" },
{ title: "Hot cakes", price: 121, id: "🥞" },
];
const foodsV2 = foods.filter((food) => food.id !== "🍔")
console.log("foods", foods);
console.log("foodsV2", foodsV2);
#2
const foods = [
{ title: "Pizza", price: 121, id: "🍕" },
{ title: "Burger", price: 121, id: "🍔" },
{ title: "Hot cakes", price: 121, id: "🥞" },
];
const updateFood = {
id: "🥞",
changes: {
price: 200,
description: 'delicioso'
}
}
const updatedProducts = foods.map((food) => ({
...food,
...(food.id === updateFood.id && {
...updateFood.changes,
})
}));
console.log('foods', foods);
console.log('updatedProducts', updatedProducts);
‘Lo hice como una especie de sistema de pedidos online’, obvio se debe hacer de otra forma, pero tiene que ver con el reto
const products = [
{ title: "pizza", price: 121, id: 'p1'},
{ title: "burguer", price: 121, id: 'b2' },
{ title: "hot cakes", price: 121, id: 'c3' },
{ title: "milkShake", price: 100, id: 's4' },
{ title: "Ribbs", price: 121, id: 'r5' },
];
const foodOrders = (id, ib, newOrder) => {
const productIndex = products.findIndex((item) => item.id === id);
const myProduct = { order_Ready: products[productIndex] };
products.splice(productIndex, ib);
newArray = [...products];
newArray.push(newOrder)
console.log(myProduct);
console.log({ Original: products }, { Copia: newArray });
};
foodOrders("s4", 1, {not:'order'});
foodOrders("p1", 1, { not: "order" });
foodOrders("r5", 1, { not: "order" });
foodOrders("b2", 1, { not: "order" });
foodOrders("c3", 1, {esta:'es la copia'});
SOLUCIÓN AL RETO
Sinceramente en un punto me ayude de los comentarios y comprendí las soluciones dadas.
const mealProducts = [
{ title: "Pizza", price: 121, id: "🍕" },
{ title: "Burger", price: 121, id: "🍔" },
{ title: "Hot cakes", price: 121, id: "🥞" },
];
const update = {
id: "🥞",
changes: {
price: 200,
description: 'delicious'
}
}
const i = mealProducts.findIndex(item => item.id === update.id );
console.group('Solución al reto:')
const mapProducts = mealProducts.map(product => {
if (product.id === mealProducts[i].id) {
return {
...product,
...update.changes
}
}
return {...product}
})
console.log(mapProducts);
console.groupEnd();
SOLUCIÓN RETO NUM 1
const products = [
{ title: "Pizza", price: 121, id: "🍕" },
{ title: "Burger", price: 121, id: "🍔" },
{ title: "Hot cakes", price: 121, id: "🥞" },
];
const myProducts = [];
let newProductsArray = [];
const index = products.findIndex(item => item.id === "🍕");
if (index !== -1){
myProducts.push(products[index]);
//products.splice(productIndex, 1);
//Solucion del reto
newProductsArray= products.filter(product => product.id != products[index].id);
}
console.group('Ejercicio 1')
console.log("products", products);
console.log("New products", newProductsArray);
console.log("myProducts", myProducts);
console.log("-".repeat(10));
console.groupEnd();
Uff!! Vaya curso. Creo que la explicación de los métodos a profundidad, nos está ayudando mucho. Sobre todo para ver otras formas de aplicarlos. Gracias.
Reto 1
const products = [
{title: "Pizza", price: 121, id: "🍕"},
{title: "Burger", price: 121, id: "🍔"},
{title: "Hot cakes", price: 121, id: "🥞"},
];
const titleLookedFor = "Burger";
const product = products.find(product => {
return product.title === titleLookedFor
});
let myProducts = products.reduce((arr, value) => {
if (value.title === titleLookedFor) {
return value;
}
return arr;
}, [])
Solución al primer reto:
const newProducts = products.filter(product => product.id != '🍔')
Ese fue fácil el otro me costo mucho mas aquí la solución:
const updaProducts = products.map(item => {
if(item.id===update.id)
{
return {
...item,
...update.changes,
}
}else return item
})
Solución al reto 1.
const productsV2 = [
{ name: "Pizza", price: 12, id: '🍕' },
{ name: "Burger", price: 23, id: '🍔' },
{ name: "Hot dog", price: 34, id: '🌭' },
{ name: "Hot cakes", price: 355, id: '🥞' },
]
// Reto 1. eliminar un elemento, sin mutar el array original
const removeElement = productsV2.filter(prod => prod.id !== '🌭')
console.log('inmutable', removeElement)
console.log('productsV2', productsV2)
El primer reto lo podemos hacer con un map() para no modificar el array original, el segundo reto con la misma lógica pero utilizando una nueva variable para aislar el array original!
console.clear();
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const update = {
id: '🥞',
changes: {
price: 200,
description: 'delicious',
},
};
const myProducts = [];
function printLog() {
console.log('products', products);
console.log('myProducts', myProducts);
console.log('-'.repeat(10));
}
function addProduct(id, products, myProducts) {
const productIndex = products.findIndex((product) => product.id == id);
if (productIndex !== -1) {
myProducts.push(products[productIndex]);
products.splice(productIndex, 1);
}
}
const productV3 = [...products];
const productIndexV3 = productV3.findIndex((product) => product.id == update.id);
productV3[productIndexV3] = { ...productV3[productIndexV3], ...update.changes };
console.log({ products });
console.log({ productV3 });
const products2 = products.filter((product) => product.id != '🍔');
console.log('products', products);
console.log('products2', products2);
printLog();
addProduct('🍔', products, myProducts);
printLog();
const productsV2 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const productIndexV2 = productsV2.findIndex((product) => product.id == update.id);
productsV2[productIndexV2] = { ...productsV2[productIndexV2], ...update.changes };
console.log(productsV2);
No es tan bueno como el de abajo, pero fue un intento 😄
Reto 1:
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const myProducts = [];
let products2 = products.map(item => {
let newProdcuts = []
if (item.id != '🍔') {
newProdcuts.push(item)
}
return newProdcuts
}).flat(1)
console.log(products2)
Reto 2:
const products3 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const update = {
id: '🥞',
changes: {
price: 200,
description: 'delicioso'
}
}
let pIndex = products3.findIndex(item => item.id === update.id)
let products4 = products3.map(item => {
let foo = []
if (item.id != '🥞') {
foo.push(item)
} else {
let item2 = {...item, ...update.changes}
foo.push(item2)
}
return foo
})
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.