Introducción
Tu AS bajo la manga
Fundamentos del manejo de arrays
ForEach
Mutable o Inmutable
Qué es el método map
Playground: multiplica todos los elementos por dos
Map Reloaded
Playground: calcula y agrega nuevas propiedades a un array
Filter
Playground: retorna solo palabras de 4 letras o más
Reduce
Reduce Reloaded
Playground: calcula la suma total de elementos en un array
Métodos en JavaScript
Some
Playground: ¿al menos 1 de los números es par?
Every
Playground: retorna un booleano si todos los elementos son pares
Find y FindIndex
Includes
Playground: buscador de palabras con parámetros de búsqueda
Join
Playground: construye URLs a partir de strings
Concat
Flat
FlatMap
Playground: calcula el total de palabras en un texto
Mutable functions
Sort
Despedida
Despedida
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Las funciones mutables consisten en cambiar el array original. Estos métodos son:
El método push agrega uno o varios elementos al final del array original. El método recibe como argumento los valores a agregar. Retorna el número de elementos del array mutado.
const array = [1,2,3]
array.push(4,5)
console.log(array) // [ 1, 2, 3, 4, 5 ]
El método unshift agrega uno o varios elementos al inicio del array original. El método recibe como argumento los valores a agregar. Retorna el número de elementos del array mutado.
const array = [3,4,5]
array.unshift(1,2)
console.log(array) // [ 1, 2, 3, 4, 5 ]
El método pop extrae el elemento del final del array original. El método no recibe ningún argumento. Retorna el elemento extraído, si no se guarda en una variable, el Garbage Collection{target="_blank"} lo elimina.
const array = [1,2,3,4]
const lastElement = array.pop()
console.log(lastElement) // 4
console.log(array) // [ 1, 2, 3 ]
El método shift extrae el elemento del inicio del array original. El método no recibe ningún argumento. Retorna el elemento extraído, si no se guarda en una variable, el Garbage Collection{target="_blank"} lo elimina.
const array = [1,2,3,4]
const firstElement = array.shift()
console.log(firstElement) // 1
console.log(array) // [ 2, 3, 4 ]
El método splice extrae uno o varios elementos del array original a partir del índice y los reemplaza con otro elemento especificado como argumento. Retorna un array con los elementos extraídos, si no se guarda en una variable, el Garbage Collection{target="_blank"} lo elimina.
El método splice recibe tres argumentos:
array.splice(índice, cantidad, items)
array.splice(índice, cantidad, item1, item2, ..., itemN)
const array = [1,2,3,4]
const elements = array.splice(2,1,"tres")
console.log(elements) // [3]
console.log(array) // [ 1, 2, 'tres', 4 ]
const array = [1,2,3,4]
const elements = array.splice(1,2,"dos", "tres")
console.log(elements) // [ 2, 3 ]
console.log(array) // [ 1, 'dos', 'tres', 4 ]
Contribución creada por: Andrés Guano.
Aportes 120
Preguntas 4
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.
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í.
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
El reto se soluciona simpletemente creando otro array
const otroArray=[…products]
y aplicar todo el codigo sobre el array nuevo .
Eso es todo
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);
El método repeat() devuelve una cadena con un número de copias de una cadena.
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;
});
Cuidado con el “Shallow Copy”, es el que realiza el spread operator, hay varias formas de hacer un “Deep Copy” bueno investigargas (JSON.parse(JSON.stringify()), lodash.clonedeep(), map() …)
const products = [
{title: "Pizza", price: 121, id: "🍕"},
{ name: "Burger", price: 121, id: '🍔' },
{ name: "Hot cakes", price: 121, id: '🥞' },
];
// Shallow copy, el cambio afecta al original
const products2 = [...products]
products2[1].name = "Reburguer"
console.log(1, JSON.stringify(products))
console.log(2, JSON.stringify(products2))
// Deep copy, el cambio no afecta al original
const products3 = products.map(el => ({...el}));
products3[1].name = "Miniburguer"
console.log(3, JSON.stringify(products));
console.log(4, JSON.stringify(products3));
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)
Yo me estaba confudiendo con indexOf() y findIndex() por lo que me hice esta tarjeta para diferenciarlos, lo dejo por si a alguien le sirve:
Aquí, mi solución a la eliminación sin mutación del original:
< //eliminación sin mutar el array original
const productos = [
{ title: "Pizza", price: 121, id: "🍕" },
{ title: "Burger", price: 121, id: "🍔" },
{ title: "Hot cakes", price: 121, id: "🥞" },
];
const nuevoArray = [];
const copia = [...productos];
console.log("products", productos);
console.log("myProducts", nuevoArray);
console.log("-".repeat(10));
const index = productos.findIndex(item => item.id === '🍔');
if (index !== -1) {
nuevoArray.push(productos[index]);
copia.splice(index, 1);
}
console.log("original", productos);
console.log("copia con eliminación", copia);
console.log("nuevoArray", nuevoArray);
console.log("-".repeat(10));>
Aquí, mi solución al reto de modificar sin mutar el array original:
//sin mutar el array original
const productsV3 = [
{ title: "Pizza", price: 121, id: "🍕" },
{ title: "Burger", price: 121, id: "🍔" },
{ title: "Hot cakes", price: 121, id: "🥞" },
];
const updateV3 = {
id: "🥞",
changes: {
price: 200,
description: 'delicioso'
}
}
const productIndexV3 = productsV3.findIndex(item => item.id === updateV3.id);
const copia = [...productsV3];
copia[productIndexV3] = {
...productsV3[productIndexV3],
...updateV3.changes,
};
console.log('original: ',productsV3);
console.log('copia: ',copia);
Esta es mi solución al reto de eliminación sin usar metodos mutables
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 product = products.find(item => item.id === '🍔')
let newProducts;
if (product)
{
myProducts.push(product)
newProducts = products.filter(item => item.id !== product.id);
}
console.log("products", products);
console.log("myProducts", newProducts);
console.log("-".repeat(10));
/* reto 1:
const array = [1, 2, 3, 4, 5];
const array1 = […array]
array1.splice(4, 1, “five”, “six”)
/* reto 2
const ex2 = [1, 2, 3, 4, 5];
const ex22 = […ex2];
ex22.push(2, 3, 4, 5);
Mi solución al segundo desafío: Actualizar el array sin que se modifique el original.
function updateProduct(arr, update) {
let newArr = arr.map(product => {
if (product.id === update.id) {
return { ...product, ...update.changes };
} else {
return product;
}
});
return newArr;
}
let newProducts2 = updateProduct(productsV2, update);
console.log(productsV2);
console.log('newProducts', newProducts2);
console.log('-'.repeat(70));
Mi solución al primer reto: crear un nuevo array sin el elemento que se indique.
function deleteById(arr, idx) {
let newArr = arr.filter(product => product.id !== idx);
return newArr;
}
let newProducts = deleteById(products, "🍔")
console.log('newProducts', newProducts);
Solución reto2:
const productsV3 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const newElements = {
id: '🥞',
changes: {
price: 200,
decription: 'delicioso',
}
};
const updates = (array, key, value, update) => {
const elementIndex = array.findIndex(item => item[key] === value);
console.log(elementIndex);
if(elementIndex!=-1){
let copiaArray = [...array];
copiaArray[elementIndex] = {
...copiaArray[elementIndex],
...update.changes,
};
return console.log(copiaArray);
}else{
console.log('No existe el elemento');
}
};
updates(productsV3,'id', '🥞', newElements);
Solución al reto 1:
const eliminarElemento = (array, key, value) => {
const elementIndex = array.findIndex(item=>item[key]===value);
if(elementIndex != -1){
let copiaArray = [...array];
copiaArray.splice(elementIndex, 1);
return console.log(copiaArray);
}
};
eliminarElemento(products, 'id', '🍔');
mi solucion al reto de eliminar un elemento sin alterar el original
const array = [1,2,3,4]
const newArray = array.reduce((a,b) =>{
if(b !=2){
a.push(b)
}
return a
} ,[])
console.log('array ',array)
console.log('newArray ',newArray)
mi solucion:
const idProduct = '🍔'
const product = products.find(item => item.id === idProduct)
if (product) {
myProducts.push(product)
newProducts = products.filter(product => product.id != idProduct)
}
Esta es mi solución para el primer reto
const nuevoArray = products.filter(item => item.id !=="🍕")
console.log("NuevoArray", nuevoArray);
Sin mutar el original:
Reto 1:
const newProducts = products.filter((item) => item.id !== "🍕");
Reto 2:
const newProducts2 = products.map((item) =>
item.id === update.id ? { ...item, ...update.changes } : item
);
El segundo challenge es más sencillo de lo que parece: utiliza spread operator para sacarle una copia a los valores del objeto original. Ya sobre esa copia puedes hacer lo mismo que se le hizo en clase al objeto original.
Okay… Esto es un montón de código, pero aquí mi solución al challenge: Me di cuenta tarde de que su implementación hubiera sido más sencilla y legible con generator functions… Si alguien entiende lo que quiero decir y puede reescribir mi función en gen functions, estaría genial. Yo la haré cuando tenga tiempo. ¡Saludos!
Solucion a los retos
tambien dejo el codigo
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 !== "🥞");
const myChanges = {
id: "🍔",
changes: {
descriptyion: "it is delicious",
type: "Fast Food"
},
};
const updateMyProducts = products.filter((item) => item)
const myIndex = updateMyProducts.findIndex( item => item.id === '🍔')
updateMyProducts[myIndex] = {
...updateMyProducts[myIndex],
...myChanges.changes
}
console.log(updateMyProducts)
Asumo habrá una forma más sencilla para hacer una modificación, sin alterar el original, pero buena, esta fue mi solución:
//Update / actualización
const productsV2 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
// queremos agregarle esta actualización a productsV
const upDate = {
id: '🥞',
changes: {
price: 200,
description: 'Delicioso'
}
}
let productsV3 = []
const productIndexV2 = productsV2.findIndex(item => item.id ===upDate.id);
productsV3 = [
...productsV2,
]
productsV3[productIndexV2] = {
// usamos spread operator para que no nos reemplace completamente el elemento, sino que respete la información que había anterior y reemplace lo que se repite y agregue información nueva
...productsV3[productIndexV2],
...upDate.changes,
};
console.log('v3', productsV3)
console.log('v2-original', productsV2)
Bueno, para el de eliminar un elemento, yo creé un array vacío, luego lo filtré y le hice push.
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
// eliminar un elemento sin modificar el array original
const myProducts = [];
const products2 = products.filter(item => item.id !== '🍔')
myProducts .push(products2)
console.log("products", products);
console.log("newProducts", newProducts);
console.log("-".repeat(10));
Solutions to the challenge:
.
.
.
//Creating an array without the burger
const newMenu = products.filter(item => item.id !== '🍔')
//create a new array without mutating the original array but with new attributes
const productsV3 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const update2 = {
changes: {
price: 500,
attributes: ['meaty', 'fatty', 'greasy']
}
}
const alteredMenu = productsV3.map(i => {
if(i.id === '🍔'){
return {
...i,
...update2.changes,
}
}else {
return i
}
})
//Inmutable Update const productsV3 = [ {title: 'Pizza', price: 121, id: '🍕'}, {title: 'Burguer', price: 121, id: '🍔'}, {title: 'Hot cake', price: 121, id: '🥞'}, ]; const updateV3 = { id: '🥞', changes: { price: 200, description: 'delicious' } } const newArrayV3 = [...productsV3]; const newArrayV3Index = newArrayV3.findIndex(item => item.id === updateV3.id); newArrayV3[newArrayV3Index] = { ...newArrayV3[newArrayV3Index], ...updateV3.changes, }; console.log('productsV3',productsV3); console.log('newArrayV3',newArrayV3);
Hace una copia nueva en otra referencia de memoria.
const products = [1,2,3,4,5,6,7]; const newArray = [...products];
En ese caso la variable ‘newArray’ es una copia en otra dirección de memoria del array ‘products’, por lo que el origden de los datos no se modifica, es inmutable.
Reto 1:
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const idSearch = '🍔'
const myProduct = products.find(({id}) => id === idSearch)
const products2 = products.filter(({id}) => id !== idSearch )
Reto 2:
const updetedProduct = products.map(product => {
if(product.id === update.id){
return {
...product,
...update.changes
}
}
return product
})
Reto
<code>
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
console.log('Productos Originales',products);
// Eliminando un producto sin alterar el array original
const productCopy = [...products]
productCopy.splice(1,1)
console.log('Elemento eliminado',productCopy);
// Modificando el precio de un producto y agregando una descripcion al producto
const productCopy2 = [...products]
const updatePrduct = {
id: '🍔',
change:{
price: 10,
description: 'Hamburger of meat'
}
}
/*
* Usamos el metodo "findIndex" para encontrar el indice que coincide con el id de "updatePrduct".
*/
const productModifieElement = productCopy2.findIndex(item => item.id === updatePrduct.id);
/*
* productCopy2[productModifieElement] va ser igual al indice que se encontro en productModifieElement
* usamos el Spread Operator para copiar todo de "productCopy2" luego va acceder al elemento que contiene
el indice "productModifieElement" que seria = '🍔'.
* Finalmente tambien usamos el Spread Operator para copiar todo de "updatePrduct" pero solo especificando la propiedad "change".
*/
productCopy2[productModifieElement] = {
...productCopy2[productModifieElement],
...updatePrduct.change
}
console.log('Elemento Modificado', productCopy2);
Mi solución al reto #2 con splice (función mutable), un poco fea pero funciona jeje:
.
const productsV2 = [
{ title: "Pizza", price: 120, id: "🍕" },
{ title: "Burger", price: 160, id: "🍔" },
{ title: "Hot cakes", price: 80, id: "🥞" },
];
const update = {
id: "🍕",
changes: {
price: 250,
description: "X-Large",
},
};
//SOLUCION FABIO
function solution(updt) {
const productIndex = productsV2.findIndex((item) => item.id == updt.id);
const productToUpdate = productsV2.find((item) => item.id == updt.id);
const updatedProduct = { ...productToUpdate, ...updt.changes };
const replacedProduct = productsV2.splice(productIndex, 1, updatedProduct);
return productsV2;
}
console.log(solution(update));
MI solución al reto 1:
Por alguna razón me aferro mucho al forEach
const productsV3 = [];
productsV2.forEach(food => {
if (food.id === update.id) {
food = { ...food, ...update.changes }
}
productsV3.push(food);
})
Tal vez sea media flaite la solución, pero en ambos casos lo solucione copiando el array original y creado otro que iba a ser modificado
Reto 1:
Reto 2:
Reto 1
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const myProducts = [];
const product = products.findIndex(item => item.id === '🍔')
let productsCopy = [...products];
if (product !== -1){
myProducts.push(products[product]);
productsCopy.splice(product,1);
}
console.log('productsCopy', productsCopy);
console.log("products", products);
console.log("myProducts", myProducts);
Reto 2 - Usando método slice para hacer una copia del array(no a la referencia en memoria).
const productsV2= [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const update = {
id: '🥞',
changes: {
price: 150,
description: 'delicious',
}
}
const productV2 = productsV2.findIndex(item => item.id === update.id)
const productsV2Copy = productsV2.slice(0);
productsV2Copy[productV2] = {
...productsV2Copy[productV2],
...update.changes
}
console.log('Original',productsV2);
console.log('Copia modificada', productsV2Copy);
Aquí mi solución:
const products = [{
name: "Pizza",
price: 121,
id: '🍕'
},
{
name: "Burger",
price: 121,
id: '🍔'
},
{
name: "Hot cakes",
price: 355,
id: '🥞'
},
];
const update = {
id: '🍕',
changes: {
price: 200,
description: 'delicius'
}
}
const productIndex = products.findIndex(item => item.id === update.id);
const shop = {
...products[productIndex],
...update.changes,
};
console.log(shop);
console.log(products);
{ name: 'Pizza', price: 200, id: '🍕', description: 'delicius' }
[
{ name: 'Pizza', price: 121, id: '🍕' },
{ name: 'Burger', price: 121, id: '🍔' },
{ name: 'Hot cakes', price: 355, id: '🥞' }
]
Estaba solucionando el JavaScript Hero Challenge para editar un elemento sin mutar el array original y este fue mi output.
function solution(array, index, newValue) {
// Tu código aquí 👈
return [...array.slice(0, index), newValue, ...array.slice(index+1)]
};
Por si a alguien le sirve a futuro :p
Por aqui dejo mis respuestas:
1ra:
function retoMutableNewArray (array, query){
return array.filter(item => item.id !== query)
}
2da:
function retoMutableCopiaAlterada(array,updates){
const index = array.findIndex(item => item.id === updates.id);
const rta = [...array];
rta[index] = {
...rta[index],
...updates.changes,
}
return rta;
}
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: 200,
description: 'delicious'
}
}
const productIndexV2 = productsV2.findIndex(item => item.id === update.id)
const newListV2 = [...productsV2]
newListV2[productIndexV2] = {
...newListV2[productIndexV2],
...update.changes
}
console.log({productsV2})
console.log({newListV2})
Reto 1:
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const myProducts = [];
const newList = [...products];
const productIndex = products.findIndex(item => item.id === ('🍕'))
if(productIndex !== -1){
myProducts.push(products[productIndex])
newList.splice(productIndex, 1)
}
console.log({newList})
console.log({myProducts})
console.log({products})
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
// Reto 1: Eliminar un elemento sin modificar el array original
const myProducts = [];
console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));
const product = products.find(item => item.id === '🍔' );
if (product) {
var productsModificado = [...products];
myProducts.push(product);
productsModificado.splice(products.indexOf(product), 1);
}
console.log("products", products);
console.log("productsModificado", productsModificado);
console.log("myProducts", myProducts);
console.log("-".repeat(10));
// Reto 2: Como hacer una modificacion de array pero sin modificar el original.
const update = {
id: '🥞',
changes: {
price: 200,
description: 'delicioso'
}
}
const productsV2Modificado = [...products];
const productIndex = productsV2Modificado.findIndex(item => item.id === update.id );
productsV2Modificado[productIndex] = {
...productsV2Modificado[productIndex],
...update.changes,
};
console.log("products", products);
console.log("productsV2Modificado", productsV2Modificado);
console.log("-".repeat(10));
El spreed operator nos permite expandir o distribuir los elementos de array u objeto en las partes del código donde admitan estos elementos.
Basicamente nos distribuye los elementos (o expandiendo en un array) en un array nuevo.
¿Que podemos hacer con el SpreedOperator?
Copiar un array:
const lista1 = [1, 2, 3];
const listaResultante = [...lista1]
Resultado
lista [ 1, 2, 3 ]
ListaResultante [ 1, 2, 3 ]
Unir (o fusionar) arrays
const lista1 = [1, 2, 3];
const lista2 = [4, 5, 6];
const listaResultante = [...lista1, ...lista2]
Resultado
ListaResultante [ 1, 2, 3, 4, 5, 6 ]
Tambien podemos añadir otros elementos al mismo array (no necesariamente arrays u objetos)
const listaResultante = [...lista1, ...lista2, 2, 4, 7]
Lo que mas me llamo la atencion es que se pueden llamar funciones con Spread Operator, de la siguiente manera:
Supongamos que tenemos la siguiente funcion:
function suma (n1, n2, n3){
suma = n1 + n2 + n3
return suma
}
Nuestro console.log será asi console.log(suma(...lista1))
y el resultado: 6
Podemos trabajar con objetos, RECORDAR, que esto lo podemos hacer porque los objetos es un conjunto de elementos separados por comas, aunque no podemos realizar las mismas acciones que con arrays.
const persona = {
Nombre: 'Sebastian',
Apellido: 'Romeero',
Direccion: 'Luchiano 123'
}
const trabajo = {
tipo: 'Programador',
tarea: 'Back-end',
compensaciones: {
internet: false,
computadora: true
}
}
const empleado = {
...persona,
...trabajo
}
Resultado:
{
Nombre: 'Sebastian',
Apellido: 'Romeero',
Direccion: 'Luchiano 123',
tipo: 'Programador',
tarea: 'Back-end',
compensaciones: { internet: false, computadora: true }
}
se pueden añadir otros elementos igual que con el array:
const empleado = {
...persona,
...trabajo,
nivel: 'Junior'
}
No esta de mas recordar que lo que hacemos es una especie de copia, por lo tanto, si a nuestro array u objeto original le cambiamos las caracteristicas, este cambio solo se manifestara en el original, mas no en el Spread. Esto se comprendera mejor entre mas se profundice en los objetos mutables e inmutables.
.
.
Codigo:
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const myProducts = [];
let productsMutable = [];
console.log("products", products);
console.log("myProducts", myProducts);
console.log("=".repeat(40));
console.log("=".repeat(40));
function buscarProducto(id){
productsMutable = products.filter(item => item.id !== id);
let product = products.find(item => item.id === id);
myProducts.push(product);
}
buscarProducto("🍕");
console.log("Prodcutos origina: ", products);
console.log("Productos mutados: ", productsMutable);
console.log("Producto seleccionado: ", myProducts);
Paso a dejar mis soluciones:
RETO 1:
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const eliminarProducto = (arr, id) => arr.filter((item) => item.id !== id)
console.log(eliminarProducto(products, '🍔'));// eliminamos el producto con id '🍔'
console.log(products); // verificamos que el array original no muto
RETO 2:
const productsV2 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const cambios = {
id: '🍔',
changes : {
price: 200,
description: "Que deliciosa hamburguesa"
}
};
const actualizarProducto = (arr, obj) => arr.map( item => (item.id === obj.id) ? { ...item, ...obj.changes } : { ...item })
console.log(actualizarProducto(productsV2, cambios))
console.log(productsV2)
Reto 1
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);
Reto 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:'delicioso',
}
}
const updateProduct = [...products.map(item => item.id==update.id? {...item, ...update.changes}:item)]
console.log('update',updateProduct)
Reto 1:
Básicamente lo que hice fue hacer una función que por dentro creaba un array llamado “productsChoose” el cual sí iba a mutar, y con ese trabajé
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 === '🍔');
if(productIndex !== -1) {
foo()
}
function foo() {
const productsChoose = []
products.forEach(item => productsChoose.push(item))
myProducts.push(products[productIndex]);
productsChoose.splice(productIndex, 1);
console.log('foo', productsChoose)
}
console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));
Reto 2:
En este reto hice algo parecido, cree una condicional igual a la que el profesor usó antes. Si el objeto existe, ejecuta el código. Y allí cree el array mutable y por dentro puse los console.log()
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: 'Sweet'
}
}
const productIndexV2 = productsV2.findIndex(item => item.id === update.id)
if(productIndexV2 !== -1) {
const updatedArray = [];
productsV2.forEach(item => updatedArray.push(item))
updatedArray[productIndexV2] = {
...updatedArray[productIndexV2],
...update.changes,
}
console.log('products', productsV2)
console.log('updated', updatedArray)
}
Una solución generalizada
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const myProducts = [];
let updates;
// Challenge 1
// Filter products list according by cart's product list (myProducts)
function productsFiltered(products, productIndexes) {
return products.filter(item => !productIndexes.includes(item.id));
}
// Challenge 2
// Update products list according updates array
function productsUpdates(products, updates) {
if (updates != undefined) {
return products.map(item => {
itemTemp = item;
updates.map(update => {
if (item.id === update.id) {
itemTemp = {
...item,
...update.changes,
}
}
});
return itemTemp;
});
} else {
return products;
}
}
// Show lists status
function printStatus(products, myProducts, updates) {
// Get cart's product indexes
let productIndexes = myProducts.map(item => item.id);
let productsTemp = productsFiltered(productsUpdates(products, updates), productIndexes);
console.log("products", productsTemp);
console.log("myProducts", myProducts);
console.log("-".repeat(10));
}
printStatus(products, myProducts, updates);
const productIndex = products.findIndex(item => item.id === '🍔');
if (productIndex !== -1) {
// Added to cart
myProducts.push(products[productIndex]);
// Mutable erasing
// products.splice(productIndex, 1);
}
printStatus(products, myProducts, updates);
// Update a product
updates = [
{
id: "🥞",
changes: {
price: 30,
description: 'Delicious',
}
},
{
id: "🍕",
changes: {
price: 50,
description: 'Great',
}
}
];
printStatus(products, myProducts, updates);
// Mutables update
/*
const productIndex2 = products.findIndex(item => item.id === update.id);
products[productIndex2] = {
...products[productIndex2],
...update.changes,
}*/
Dejo mi solucion a los retos
//Quiero eliminar de products sin modificar el array de products
if (productIndex) {
myProducts.push(products[productIndex])
}
const newProducts = products.filter(item => item.id != '🍔' );
console.log("products", products);
console.log("myProducts", myProducts);
console.log("newProducts", newProducts);
console.log("-".repeat(10));
const newProduct = products.map(item => {
if (item.id === products[productIndex].id) {
item = {
...products[productIndex],
...update.changes
}
}
return item;
})
console.log('products', products)
console.log('newProduct', newProduct);
update immutable
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 update = {
id: "🥞",
changes: {
price: 200,
description: "delicioso",
},
};
const products2 = [...products];
const productIndex = products2.findIndex((item) => item.id === update.id);
products2[productIndex] = {
...products2[productIndex],
...update.changes,
};
console.log("update products", products2);
console.log("products", products);
spliceInmutable
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));
console.log('Splice Inmutable',spliceInmutable(products,2,1));
console.log("products", products);
function spliceInmutable(array,startIndex,deleteCount){
let newArray=[];
const endIndex=startIndex+deleteCount-1;
array.forEach((value,index) => {
if(!(index>=startIndex && index<=endIndex)){
newArray.push(value);
}
});
return newArray;
}
Reto 1:
const nuevoArray = products.filter(item => item.id !=='🍔');
Reto 2:
const arrayUpdate = productsV2.map(item =>{
if(item.id === update.id){
return {
...item,
...update.changes
}
} else {
return {
...item
}
}
});
Update sin modificar el original :
<code>
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 = [];
const productIndexV2 = productsV2.findIndex(item => item.id === update.id);
if (productIndexV2 != -1){
newProductsV2.push(...productsV2);
newProductsV2[productIndexV2] = {
...productsV2[productIndexV2],
...update.changes,
};
}
console.log('original', productsV2);
console.log('update', newProductsV2);
Crear nuevo array sin el producto seleccionado pero sin eliminarlo del original:
<code
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);
myProducts.splice(productIndex, 1);
}
>
Aqui mi solucion para el problema dos, preferi usar un map, no se si haya otra forma jaja
const productUpdate = productsV2.map((item) =>
item.id === update.id ? (item = { ...item, ...update.changes }) : item
);
console.log(productUpdate, productsV2);
bueno aca estan mis respuestas auque el profe ni lo va a revisar porque veo que muchas respuestas tienen mas de 8 meses,
reto 1
const products = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const myProducts = [];
let itemFilter
const myItem = products.find(item => item.id === '🍔');
(myItem) ?
itemFilter = products.filter(item => item.id != myItem.id):
console.log('item no mach')
console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));
reto 2
const products2 = [
{ title: 'Pizza', price: 121, id: '🍕' },
{ title: 'Burger', price: 121, id: '🍔' },
{ title: 'Hot cakes', price: 121, id: '🥞' },
];
const update = {
id:'🥞',
changes : {
price: 200,
description: 'delicius'
}
}
const findProduct = products2.findIndex(item => item.id === update.id)
const newListProducts = [...products2];
newListProducts[findProduct] = {...products2[findProduct],...update.changes}
console.table(products2)
console.table(newListProducts)
Este fue el código que utilizé, básicamente usé el spread operation para guardar el array dentro de uno nuevo y posteriormente manipularlo, sin tocar el original.
const productIndex = products.findIndex(item => item.id === '🍔')
let newProducts
if (productIndex){
myProducts.push(products[productIndex]);
newProducts = [...products];
newProducts.splice(productIndex, 1);
}
console.log("-".repeat(10));
console.log("myProducts", myProducts);
console.log("-".repeat(10));
console.log('Challenge')
console.log("-".repeat(10));
console.log("newProducts", newProducts);
console.log("Original products", products);
Reto 1:
const products = [
{ title: "Pizza", price: 121, id: "🍕" },
{ title: "Burger", price: 121, id: "🍔" },
{ title: "Hot cakes", price: 121, id: "🥞" },
];
let myProducts = [];
const copyProducts = products.map(element => element);
const index = copyProducts.findIndex(element => element.id === '🥞');
if (index) {
copyProducts.splice(index, 1);
myProducts = copyProducts;
}
console.log('Orignal Array', products);
console.log('Nuevo Array:', myProducts);
Reto 2:
const products2 = [
{ title: "Pizza", price: 121, id: "🍕" },
{ title: "Burger", price: 121, id: "🍔" },
{ title: "Hot cakes", price: 121, id: "🥞" },
];
const update = {
id: '🥞',
changes: {
price: 200,
description: 'New product'
}
};
let updateProducts = products2.map(element => element);
const updateProductsIndex = updateProducts.map(element => element).findIndex(element => element.id === update.id);
updateProducts[updateProductsIndex] = {
...updateProducts[updateProductsIndex],
...update.changes
}
console.log('Productos 2 original', products2);
console.log('Actualización de productos 2', updateProducts);
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);
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.