German Cavani
Stephany Plaza
GRACIAS!
Rafael Martínez Rodríguez
Muchas gracias.
Las funciones mutables consisten en cambiar el array original. Estos métodos son:
Método push
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 ]
Método unshift
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 ]
Método pop
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 ]
Método shift
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 ]
Método splice
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)
Ejemplos utilizando el método splice
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.
German Cavani
Stephany Plaza
GRACIAS!
Rafael Martínez Rodríguez
Muchas gracias.
Luis Manuel Morales López
Reto 1
Eliminar un elemento sin borrarlo del la lista original. Solución: usar filter:
Reto 2
Modificar una nueva lista sin modificar la original. Solución: copiar solo los elementos para que no tengan la misma dirección de memoria.
Nicolas Molina
ProfesorLuis Manuel Morales López
Es un solución mucho más simple, gracias.
Darwing Steven Sánchez Londoño
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í.
Sebastián Arredondo Posada
Good appreciation man, thanks for sharing it with us.
Stephany Plaza
voy a leer mas sobre esto, gracias
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 } } });
Nazareno Aznar Altamiranda
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
Sintaxis Spread - MDN
How to use spread operator - Medium
Spread Operator - Medium (español)
Practical usages of spread operator
Stephany Plaza
muchas gracias por este aporte , vale oro!
Markin Piero Pulache Guarniz
buen aporte
Kevin Acevedo
Woldev S.A.S
¿Cómo metes tu código así en un comentario de platzi? Gracias por la respuesta.
Rodrigo Alex Ayelef Huilipan
El reto se soluciona simpletemente creando otro array const otroArray=[...products] y aplicar todo el codigo sobre el array nuevo . Eso es todo
John Orellana
El método repeat() devuelve una cadena con un número de copias de una cadena.
Francisco Javier Rodriguez Gomez
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));
Bruno Rosso
hola! una consulta, porque el solo se puede pasar con {} y no deja como []
Daniel José Suárez Parra
Joel Moises Boada Velasquez
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; });
Aloy Foxy
Eduardo Nicolas Martinez Adrianza
Matias SANCHEZ
Reto 2. Que opinan sobre esta solucion?
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 productIndex = productsV2.findIndex(item => item. id == update. id);
const newArr = [...productsV2];
newArr[productIndex] = {...newArr[productIndex],...update.changes}
console.log(productsV2, newArr);
Sergio Javier Lopez Olivera
Excelente Matias, ahora prueba hacerlo con los métodos inmutables que vimos en clases pasadas y te queda todavía mejor
Gustavo Gonzalez Montero
Sebastián Arredondo Posada
Excellent exercise.
Carlos Mazzaroli
Aloy Foxy
En el código, productIndex !== -1 se utiliza para verificar si un producto fue encontrado en el array. El método findIndex retorna el índice del elemento si se encuentra; de lo contrario, devuelve -1. Así, el uso de esta condición en el if asegura que solo se intente eliminar el producto si realmente existe en el array, evitando errores que podrían ocurrir al intentar operar sobre un índice inválido. Este enfoque es fundamental para garantizar la integridad del array y evitar mutaciones innecesarias.
Daniel Flores
No entiendo el porqué del if (productIndex !== -1), alguien podría explicarme?.
Christopher Andrés Guano Valencia
¡Hola! ¿Ya sabes la respuesta? Bueno te la explico de igual manera,
Los índices negativos, en JavaScript, significan que el elemento no existe (hasta este momento que escribo este comentario jajaj). Por ende, está comprobando que el elemento exista con ese if.
¡Nunca pares de aprender! 💚
Daniel Flores
Muchas gracias! 😁
Juan Antonio Delgadillo Carrillo
me gustaria hacer un proyecto habra una curso practico haciendo un sitio web utlizando los metosdos de array
Brandon Lee Aguero Fernandez
En la ruta de backend con node.js se usa bastante, pero también en la ruta de angular
Christopher Sánchez García
cual era la funcion del .changes en el update?
Brandon Lee Aguero Fernandez
Función🤔? Yo veo que es un objeto
Alexis Daniel Sanchez Arias
Lo que ocurre es que en el objeto "update" que creó el profe const update = {...} pone el id, para referenciar, dentro tiene otro objeto que tiene la KEY o llave "changes" .changes entonces cuando llamas a la variable update y le agregas el .changes lo que haces es decirle exactamente que es lo que quieres
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));
Hola, gran solución sin embargo para el caso del update lo puedes hacer con un array y queda más limpio mira:
products.map(item => { if (item.id === update.id) { return { ...item, ...changes, } } return {...item}; })
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);
Aquí mi solución a los dos retos :
const products2 = [ { title: 'Pizza', price: 121, id: '🍕' }, { title: 'Burger', price: 121, id: '🍔' }, { title: 'Hot cakes', price: 121, id: '🥞' }, ]; const myProducts2 = products2.filter(item => item.id !== '🍔') console.log("products", products2); console.log("myProducts", myProducts2); console.log("-".repeat(10)); // Reto #2 const products4 = [ { title: 'Pizza', price: 121, id: '🍕' }, { title: 'Burger', price: 121, id: '🍔' }, { title: 'Hot cakes', price: 121, id: '🥞' }, ]; const update1 = { id:'🥞', changes: { price:200, description: 'delicioso' } } const newArray = products4.map(item => ( item.id === update1.id ? {...item, ...update1.changes} : item )) console.log('original',products4) console.log('nuevo', newArray)
Yo hice el reto de la actualización sin mutar de esta forma:
// Reto de actualizar un producto sin modificar el original const productsV3 = [ { title: 'Pizza', price: 121, id: '🍕' }, { title: 'Burger', price: 121, id: '🍔' }, { title: 'Hot cakes', price: 121, id: '🥞' }, ] const updateProductV3 = { id: '🥞', changes: { price: 200, description: 'delicious', } } const newProductsV3 = productsV3.map(item => { if(item.id === updateProductV3.id){ console.log('item', item) return { ...item, ...updateProductV3.changes, } } return item }) console.log('newProductsV3', newProductsV3) console.log('productsV3', productsV3)
Mi consola:
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.
Reto 1
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);
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 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)