Mutable functions

Curso de Manipulación de Arrays en JavaScript

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

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Las funciones mutables consisten en cambiar el array original. Estos métodos son:

push
unshift
pop
shift
splice
sort

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:

El índice donde comenzará a cambiar el array.
La cantidad de elementos que serán reemplazados.
Uno o varios elementos que reemplazarán a los originales del array.

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.

Aportes 146

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

JeffUy

hace 3 años

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));

Luis Manuel Morales López

hace 3 años

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.

Captura de Pantalla 2021-09-21 a la(s) 12.52.30.png

Darwing Steven Sánchez Londoño

hace 3 años

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.

Buscamos el index con el findIndex de cecilia tal como el profe nos enseño.
holaMundo.splice(index, 0, ‘Roberto’)

& 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í.

Fredy Daniel Flores Lemus

hace 3 años

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

hace 3 años

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

Kevin Acevedo

hace 3 años

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);

Rodrigo Alex Ayelef Huilipan

hace 3 años

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

Si ya tienes una cuenta,

Curso de Manipulación de Arrays en JavaScript

Mutable functions

Método push

Método unshift

Método pop

Método shift

Método splice

Ejemplos utilizando el método splice

Reto 1

Reto 2

Reto 1

Reto 2

Reto 1

Reto 2

Actualización de un array sin modificar el original:

Spread operator (…)