Eliminando elementos de un Array

21/22

Lectura

.push()

El método .push() nos permite agregar uno o más elementos al final de un array.

A continuación veremos un ejemplo aplicado con un array que contiene números:

Imagen 1.png

Como podemos ver, al momento de ejecutar la función se agregan los números 6 y 7 al array.

Ahora revisemos un ejemplo con strings:

Imagen 2.png

Como podemos ver, agregamos dos cadenas de strings al ejecutar la función donde tenemos txtArray.push(). Es decir, indico el array al que voy agregar elementos, uso el método .push(), y dentro de .push() indico los elementos que quiero agregar al string. Finalmente, el console.log() lo uso para revisar en la consola si esto sucedió o no.

.shift()

Ahora pasemos a la otra cara de la moneda donde necesitamos eliminar un elemento del array. .shift() eliminar el primer elemento de un array, es decir, elimina el elemento que esté en el índice 0.

Imagen 3.png

Como vemos, luego de aplicar .shift() se eliminó exitosamente el primer elemento del array. ¿Y si quisiéramos eliminar el último elemento? Pasemos al bonus track de esta clase 🙌🏼.

Bonus Track

Si ya entendiste cómo funciona .shift() aplicar .pop() te será pan comido 🍞. El método .pop() eliminará el último elemento de un array. En este sentido, si tenemos un array de 5 elementos, pop() eliminará el elemento en el índice 4. Usemos el mismo ejemplo pero usando este método.

Imagen 4.png

¡Y listo! Ahora que ya conoces todos estos métodos te recomiendo comenzar a experimentar 💪🏼

👉🏾 Link al repositorio de esta clase: https://github.com/aaronpaulgz/push-shift

Aportes 195

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

otro método que sirve para eliminar un arreglo según su índice es splice

var articulos = ['carro', 'celular', 'moto', 'tv', 'libro']; //eliminar moto

articulos.splice(2, 1); //el primer parámetro especifica el índice del elemento que quiero eliminar, en este caso es moto
//y el segundo parámetro especifica cuantos elementos del arreglo quiero eliminar, en este caso solo uno que es moto
//['carro', 'celular', 'tv', 'libro']

también con este método se pueden modificar elementos de un arreglo según su índice

var articulos = ['carro', 'celular', 'moto', 'tv', 'libro']; /modificar moto

articulos.splice(2, 1, 'laptop'); /*se aplican los mismo parámetros, pero esta vez se le agrega el valor al que queremos modificar*/
//['carro', 'celular', 'laptop', 'tv', 'libro']

Resumen:

Agregar al final= .push()
Eliminar al final= .pop()

Agregar al inicio= .unshift()
Eliminar al inicio= .shift()

“--------------“Metodo para eliminar un Array mediante su posición”------------”

<
var frutas = ["pera", "banana", "manzana", "trigo"]
//posicion  	0 		1		 2		 3

frutas.splice(pos,nº de elementos por eliminar) // metodo

//EJM:
frutas.splice(2,1)
frutas // [“pera”, “banana”, “trigo”]

//EJM 2: mismo array
frutas.splice(2,2)
frutas // [“manzana”, “trigo”]
>

.splice(posicion, 1) empieza en la posicion(index) que nos indica el valor
de la variable posicion y elimina 1 elemento
Nº de elementos por eliminar–> Nº de elementos por eliminar a partir de la posición

DOCUMENTACIÓN
Metodo .splice

Les comparto mis apuntes, también:

  • filter () genera un array sobre un parámetro verdadero o falso. “Quiero los valores que cuesten menos de 600 euros y me los pones con todos los campos”. Nos devuelve Var articulos = [{nombre: “bici”, costo: 100}, {nombre: “tv”, costo: 500},]
  • map() genera un nuevo array con la condición que se le ponga dentro de la función. Es la más versatil, se puede simplemente que devuelva el campo costo todos, o que sume el ipc al costo y genere un array.
  • find() devuelve el valor del primer elemento del array que cumple la función de prueba proporcionada. Si es un array simple devuelve el valor, si es un array objeto devuelve todos los campos del objeto encontrado. . “Quiero los valores que cuesten menos de 600 euros y me los pones con todos los campos”. Nos devuelve Var articulos = [{nombre: “bici”, costo: 100}]
  • forEach() recorre el array y ejecuta la funcion que se le indica pero sin crear un nuevo array, sino que modifica éste. Para un array = [10, 20, 50] “una función que multiplique por 2” devolvería array = [20, 40, 100].
  • some() comprueba si al menos un elemento del array cumple con la condición implementada por la función proporcionada. La salida será “true” o “false”.
  • push() nos permite agregar uno o más elementos al final de un array. Pop() elimina el último elemento del array.
  • Unshift() para agregar al incio. Shift() para eliminar el elemento del inicio.
    ¿Cómo lo aplicamos? Con la sintaxis:
    nuevoArray = arrayInicial.map(funcion(parámetro){
    return parametro*2;}
    O cualquier operación dentro de la función como “return parametro.valor” o < 500 etc…

Los casos mas comunes en entornos reales son objetos. Por ejemplo se agregaría un item así:

var articulos = [
  { nombre: 'Bici', stock: 20, costo: 3000 },
  { nombre: 'TV', stock: 30, costo: 2500 },
  { nombre: 'Libro', stock: 24, costo: 320 },
  { nombre: 'Celular', stock: 4, costo: 10000 },
  { nombre: 'laptop', stock: 13, costo: 20000 },
  { nombre: 'teclado', stock: 33, costo: 500 },
  { nombre: 'audifonos', stock: 50, costo: 1700 }
];

//PUSH(). agrega item al final del array
articulos.push({ nombre: 'mouse', stock: 100, costo: 180});

/*
articulos
0: {nombre: "Bici", stock: 20, costo: 3000}
1: {nombre: "TV", stock: 30, costo: 2500}
2: {nombre: "Libro", stock: 24, costo: 320}
3: {nombre: "Celular", stock: 4, costo: 10000}
4: {nombre: "laptop", stock: 13, costo: 20000}
5: {nombre: "teclado", stock: 33, costo: 500}
6: {nombre: "audifonos", stock: 50, costo: 1700}
7: {nombre: "mouse", stock: 100, costo: 180}
*/

Comparto los códigos 😄
.
.push
El método .push() nos permite agregar uno o más elementos al final de un array.
A continuación veremos un ejemplo aplicado con un array que contiene números:
Array de números

let numArray = [1,2,3,4,5]

function newNum(){
  numArray.push(6,7)
}

newNum()  

// resultado [1,2,3,4,5,6,7]

Array de String


let txtArray = ["ana", "carlos", "karina", "luz"]

addCharacters();

function addCharacters(){
    txtArray.push("alex", "gaby")
    console.log(txtArray)
};

// resultado ["ana", "carlos", "karina", "luz","alex", "gaby")]

Eliminando elementos del Array
.
.shift()

Borra el 1er elemento de nuestro array

let array = ["ana", "carlos", "karina", "luz"]

let shiftArray = array.shift();
console.log(array);

// resultado [carlos", "karina", "luz"]

.pop()

Borra el ultimo elemento de nuestro array

let array = ["ana", "carlos", "karina", "luz"]

let shiftArray = array.pop();

console.log(array);
// resultado ["ana", "carlos", "karina"]

Falto el método splice que recibe la posición del elemento y cuantos elementos desde la posición desean eliminar y lo elimina ejemplo:

var articulos = ['Teclado','mouse','audífonos'];
var eliminarArticulo = articulos.splice(2, 1)
console.log(articulos);

En este caso elimina los audífonos ya que están en posición 2 de el arreglo y solo 1 elemento del arreglo de artículos

Al hacer un console.log al shftArray sabremos que elemento fue borrado

por ejemplo:

let array = [1,2,3,4,5]

console.log(array)
// Array (5)[ 1,2,3,4,5 ]

let shiftArray = array.shift()

console.log(shiftArray)
// 1
Hola @alejoriosrivas creo que hay una leve confusion con algunas funciones:
.filter(); devuelve un array con los elementos que cumplen la condición.
.map();  Devuelve un array con algún cambio, usualmente se usa para mutar los objetos de un arreglo que cumplan con la condición.
.find(); Devuelve el primer elemento del array que cumpla con la condición.
.forEach(); se puede usar para recorrer y hasta mutar el array actual pero no retorna uno nuevo.
.some(); devuelve un verdadero o falso, si al menos un elemento cumple la condición solicitada.
.push(); agrega elementos al final del array.
.pop(); elimina el último elemento del array.
.shift(); elimina el primer elemento del array.
.unshift('elemento'); agrega un elemento al comienzo de una array.

Y si quiero eliminar un registro que no es ni el primero y tampoco el último?

Para eso podemos utilizar la combinación de funciones indexOf (Ya la mostraron en clases anteriores, esta nos permite encontrar el índice del elemento que buscamos eliminar en el Array) y splice (Nos permite borrar X índice de un array).

Ejemplo:

`
var listaNumeros = [“uno”,“dos”,“tres”];
var indiceEliminar = listaNumeros.indexOf(“dos”); // nos devuelve 1
listaNumeros.splice(indiceEliminar,1); // El primer parámetro que enviamos es el indice a eliminar, el segundo el número de registros que vamos a eliminar.

console.log(listaNumeros); // Imprime [“uno”,“tres”]

`

alert(¡Perfecto!)

Al contrario de shift()esta el método unshift() que agrega uno o más elementos al inicio del array.

Los métodos se pueden llamar solo así sin variable. Por ejemplo, con el array de articulos de los ejercicios pasados.

var articulos = [
  { nombre: "bici", costo: 3000 },
  { nombre: "TV", costo: 1500 },
  { nombre: "libro", costo: 320 },
  { nombre: "celular", costo: 10000 },
  { nombre: "Laptop", costo: 20000 },
  { nombre: "Teclado", costo: 500 },
  { nombre: "Audifono", costo: 1700 },
];

si ejecutamos

articulos.shift();

nos va a devolver

articulos
(6) [{…}, {…}, {…}, {…}, {…}, {…}]
0: {nombre: "TV", costo: 1500}
1: {nombre: "libro", costo: 320}
2: {nombre: "celular", costo: 10000}
3: {nombre: "Laptop", costo: 20000}
4: {nombre: "Teclado", costo: 500}
5: {nombre: "Audifono", costo: 1700}
length: 6

Que buen Curso, aunque me hubiera gustado experimentarlo con el html por ejemplo que nos enseñaras a realizar ese juego de papel piedra o tijera juntandolo con html, pero se que mas adelante lo podré hacer, estoy muy animado a nunca para de aprender.

Ya veo porque la gente le encanta tanto JS, por la simpleza de su sintaxis. Al menos, yo que vengo de lenguajes fuertemente tipados como C, C++ o Java. Me esta encantando esto.

ELIMINAR UN ELEMENTO ESPECÍFICO

var element = [1,2,3,4,5,6]
let borrar_element = element.splice(n,1);

n:es el índice del elemento n. en otras palabras la posición, comenzando de 0, del elemento a eliminar
■ Felicitaciones por llegar hasta aquí, sigue aprendiendo y no te rindas, estamos para ayudarnos

esto ya se habia explicado en una clase anterior…

Recordar que también existe unshift, que hace lo inverso a shift -> en vez de eliminar el primer elemento, agrega un elemento pero en la primera posición, a diferencia de push que agrega pero en la ultima posición.

Con este item del curso me quedo fue la duda de cual era el uso de let. Sobre el cual no hicimos uso durante el trayecto del curso. Pero leyendo documentación encontre esto:

"let te permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando. Lo anterior diferencia let de la palabra reservada var , la cual define una variable global o local en una función sin importar el "ámbito del bloque."
Algo confuso que seria importante aclarar.

S

Un uso muy útil para el método .pop es para obtener la extensión de un archivo, si combinan el método .split() y .pop() sobre el nombre de un archivo pueden obtener su extensión fácilmente ^^

Los utilice así sin función y también corren me gusto mucho este curso

//Quitar el primer elemento del array solo que la podemos manejar con una funcion tambien
articulos.shift();

//Quitar el ultimo elemento del array solo que la podemos manejar con una funcion tambien
articulos.pop();

Esta Documentación resume todo lo que hemos visto acerca de arrays
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array

Si explicaron estos métodos creo que pudieron agregar también el reduce(), slice(), splice() y el sort()

var miComentario = “Amo Platzi”;

alert("Estoy emocionado por aprender más de JavaScript :)");

Un curso básico que termino dejándonos en un nivel semi-pro!

Por si alguno no lo ha notado, los métodos .shift(), y .pop(), no solo eliminan el elemento en cuestión, además de eso retornan el elemento que eliminemos, por lo que podríamos guardar ese elemento en una variable, ejemplo:

var elementoEliminado = array.pop()

💚 Este apartado permite, complementar la manipulación de un array.

//Array es un estructura de datos o lista de datos tipo Objecto
var frutas = [“Manzana”, “Platano”, “Cereza”, “Fresa”];

console.log(frutas);
console.log(frutas.length);
console.log(frutas[0]);
console.log(frutas.forEach(Element=> console.log(Element)));

var masFrutas = frutas.push(“Uvas”); //agrega al final

var ultimo = frutas.pop(“Uvas”); //elimina el ultimo elemento

var nuevaLongitud = frutas.unshift(“Patilla”); // agrega al inicio

var borrarFruta = frutas.shift(“Platano”); //elimina el primer elemento

var posicion = frutas.indexOf(“Cereza”); //trae la posición del Elemento

Basandome en los aportes del compañero @drosander, salieron estos apuntes, espero les sirvan.

Método splice para eliminar

var articles = ['car', 'phone', 'moto', 'TV', 'book']

articles.splice(2,1);

resultado [ 'car' , 'phone' ,  'TV' , 'book' ]

articles.splice(2,2);

resultado [ 'car' , 'phone']

Este método recibe 2 parametros, el primero es para identificar el indice del Array en el que nos vamos a ubicar, y el segundo es decir cuántos elementos se van a elminar.

Método splice para modificar

var articles = ['car', 'phone', 'moto', 'TV', 'book']

articles.splice(2,1,'laptop');

resultado [ 'car' , 'phone' , 'laptop' , 'TV' , 'book' ]

articles.splice(2, 2, 'desktop');

resultado [ 'car' , 'phone' , 'desktop' , 'book' ]

Cuándo queremos modificar un elemento de un Array vamos a utilizar este método pero con un 3er parámetro , que es el que va a determinar por que valor va a ser reemplazado el anterior. En caso que el segundo parametro sea mayor a 1, se va a modificar el elemento que se pidio, pero ademas se eliminan la cantidad de elementos descritos en el segundo parámetro.

seria bueno tener un reto practico con las herramientas explicadas.

A seguir aprendiendo 🦾

Excelente explicación.
Aquí podemos encontrar mas sobre Javascript: https://www.w3schools.com/js/

¿Porqué “let” en lugar de “var”?

Miren ésto ! Lo explica sencillo, digerible y agradecidamente bien:
.
LINK ACÁ push-pop-shift-unshift-array-methods

También tenemos el método .unshift() que agrega un elemento pero al inicio del arreglo (el nuevo elemento pasaría a ser el índice 0).

Completado exitosamente, cuando vienes de aprender otros lenguajes conocer nuevos es más sencillo 😄

Faltó:
.unshift: Agrega elementos al comienzo del array

shift() vs pop() → elimina al principio vs final del array
unshift() vs push() → agrega al principio vs al final del array

mas claro que nunca :v

Gracias, quedo muy claro la explicación.

Tan claro como el agua! 😄

Soy yo, o esto lo vimos en el módulo de array ?

Espero que hayan finalizado muy bien el curso, les comparto mi resumen de este ultimo nodo.

  • Filter

Va a filtrar, va a a validar si algo es true or false y lo va a meter en un nuevo array sin modificar la original

var artiFiltrados = articulos.filter(function(articulo){

return articulo.costo ≤ 500 //Esto hace que regrese los valores dela array original que cumplan la condicion

});

  • Map

Genera un nuevo array en el cual puede quedar mapeado el dato que pidamos por ejemplo que nos de solo los nombres.

var nombreArticulos = articulos.map (function(articulo){
return articulo.nombre ;//trae la lista de valores relacionados a esa palabra clave.

  • Find

Devuelve el primer valor que coincide de la colección. Una vez que coincida con el valor en los resultados, no verificará los valores restantes en la colección de matriz.

var encuentraArticulo = articulos.find(function(articulo){

return articulo.nombre === “Laptop”

}

  • forEach

No genera un nuevo array, Ejecuta lo que le definamos una vez por cada elemento de nuestro array.

articulos.forEach(function(articulo);{

console.log(articulo.nombre);

});

  • some

Valida un true or false

var articulosBaratos = articulos.some(function(articulo){

return articulo.costo ≤ 700;//esta es la pregunta a responder solo nos dirá true or false

});

  • splice

Elimina un elemento según su posición

articulos.splice(2, 1)//Elimina el elemento de la posición 2 y solo elimina un elemento.

Buena información y muy bien explicada 😄

Graciass, eres muy buen profesorr!!

¡Excelente Diego!, me gustó mucho éste curso, me llevó todo lo bueno de él

profe muchas gracias excelente curso

Gracias, la verdad ha sido un excelente curso

Gracias, excelente curso básico. Yo vengo trabajando con JS hace rato ya. Me tomé el curso como si fuera nuevo y siempre hay cosas que se aprenden 😃.

gracias

Dale corazón a este comentario si leíste todo esta clase con la voz del profesor

que es “let”?

Muy bien!
Aunque ya se habían explicado en clase la verdad había olvidado que lo habíamos visto.
Gracias platzi ❤️

Observo que este artículo presenta lo visto en la clase 14.

🐱‍💻

Mis apuntes del curso

Tambien tenemos el metodo .splice()

funciona de la siguiente forma
x=posicion desde donde se va a empezar a eliminar
y=cuantos elementos se va a eliminar
z=lo que se va apregar “El z es opcional”
.splice(x,y,z);

Documentacion

Dato curioso, al almacenar en una variable los métodos shift() o pop(), se almacena lo que devuelve, lo cual es un 1 en caso de el método sea ejecutado con éxito y el cambio se ve en el array original.

Entendido! 😄

Hola tengo una duda y si se quiere eliminar algún dato que este en medio del array, como se puede hacer?

Repasando:

shift()     -> Elimina el elemento al principio del arreglo
pop()      -> Elimina el elemento al final del arreglo
unshift() -> Agrega el elemento al principio del arreglo
shift()     -> Agrega el elemento al final del arreglo

Para los nuevos como yo dejo mi aporte comentado

// metodo .push() este metodo agrega un elemento al final del array
let array = [1, 2, 3, 4, 5];
// agrega un elemento al final del array

//funcion
function newNum() {
    //agrega un elemento al final del array
    numArray.push(6, 7, 8, 9, 10);
    // reviso el array que ahora tiene los numeros agragados
    console.log(numArray);
}
// llamo a la funcion
newNum(); // resultado: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// metodo .pop() este metodo elimina el ultimo elemento del array
// array inicial
let array = [1, 2, 3, 4, 5];
// elimina el ultimo elemento del array
let shiftArray = array.pop();
// reviso el array que ahora tiene los numeros eliminados
console.log(array); // resultado: [1, 2, 3, 4]

// metodo .shift() // este metodo elimina el primer elemento del array
// array inicial
let array = [1, 2, 3, 4, 5];
// elimina el primer elemento del array
let shiftArray = array.shift();
// reviso el array que ahora tiene los numeros eliminados
console.log(array); // resultado: [2, 3, 4, 5]

// metodo .unshift() // este metodo agrega un elemento al inicio del array
// array inicial
let array = [1, 2, 3, 4, 5];
// agrega un elemento al inicio del array
let unshiftArray = array.unshift(0);
// reviso el array que ahora tiene los numeros agragados
console.log(array); // resultado: [0, 1, 2, 3, 4, 5]```

/*
Creamos un array de estudiantes
*/

let estudiantes = [“Andres”, “Jesus”, “Maria”, “William”, “Adriana”, “Paulo”]

/*
Se crean los metodos para agregar estudiantes
*/

function agregarEstudiante(){
//estudiantes.push = prompt(“agrege el estudiante”,"");
estudiantes.push(“Alvaro”,“Daniel”);
console.log(estudiantes);
}

function agregarEstudianteInicio (){
//estudiantes.unshift = prompt(“Agregar estudiante al inicio del arreglo”,"");
estudiantes.unshift(“Joaquin”);
console.log(estudiantes);
}

/*
Se crean los metodos para eliminar estudiantes
*/

function eliminarUltimoEstudiante (){
//estudiantes.pop = prompt(“elimine el ultimo estudiante del arreglo”);
estudiantes.pop(“Paulo”);
console.log(estudiantes);
}

function eliminarEstudianteInicio (){
//estudiantes.shift = prompt(“Eliminar estudiante al inicio del arreglo”,"");
estudiantes.shift(“Andres”);
console.log(estudiantes);
}

buena explicacion

let array = [1,2,3,4];
console.log(array);

let shifArray = array.pop()
console.log(array);

var masFrutas6 = frutas.splice(2, 1); // elimina un elemento del array
var masFrutas7 = frutas.slice(1, 3); // crea un nuevo array con los elementos del array original

muchisimas gracias la practica hace al maestro as que aqui vamos

Es importante tener en cuenta que tanto shift() como pop() no sólo eliminan el primer y último elemento del array respectivamente, sino que estos métodos usualmente se usan acompañados por variables que al final tendrán el valor del elemento eliminado.

No encuentro la diferencia con la clase 14. Arrays en donde explicaba:
.push añade elementos al final de la lista
.pop elimina el último elemento agregado
.unshift añade elementos al inicio de la lista
.shift elimina el primer elemento de la lista
.indexof nos ayuda a saber el index de un elemento para llamar y hacer algo con él. Es para arrays grandes.

Arrays

Ya lo habíamos visto, pero gracias.

Les dejo una muy buena lectura sobre muchos otros métodos con sus explicaciones, como la explicación de slice:

//Creo un array
var comida=["pera","comida","espinaca","manzana"];
//Lo que hace slice es según el índice imprimir o regresar los elementos contenidos entre 1 a 3, sin regresar el elemento que tiene el índice 3.
console.log(comida.slice(1,3));
//El resultado es:
(2)[ comida,espinaca ]

https://es.javascript.info/array-methods

//Reto Crear una funcion que agregue productos al final de mi Array
// Declarar mi Array de objetos en este caso Productos

let productos = [
    { nombre: "Chifles", costo: 1 },
    { nombre: "Rompope", costo: 10 },
    { nombre: "Queso", costo: 3 },
    { nombre: "Dulces", costo: 2 },
    { nombre: "Salprieta", costo: 4 },
    { nombre: "Mani", costo: 6 },
    { nombre: "Mantequilla", costo: 3 },
];

// Declaro la función para agregar productos con los datos ingresados por el usuario al final del Array

function nuevoProducto() {
    let nombredelProducto = prompt("Ingresa el nombre del producto");
    let costodelProdcuto = prompt("Ingresa el costo del producto");
    productos.push({nombre: nombredelProducto, costo: costodelProdcuto });
    console.log(productos)
}

nuevoProducto(); // Igresamos las variables que son el Nombre del producto y el costo y obtenemos los elementos del Array productos más el producto agregado.

Excelente clase como un abrebocas para comenzar en javascript, vamos por mas

Gracias por el repaso 👍

😃

Gracias

Slice

Sería genial que tambien hablaran de Slice y reduce.

Gracias!!

Gracias excelente curso =D

Por si alguno vió raro que en este caso usaron let en vez de var
https://www.youtube.com/watch?v=bvkY9ey83yY&ab_channel=LaCocinadelCódigo

Uff excelente curso ❤️ me ha ayudado a sentar bases

excelente!!

😎😎😎😀😀😀

Muy completo, excelente

Muchas gracias, estos cursos me han ayudado mucho a comprender JavaScript 😃

Muchas gracias.💚🚀

Muy bien!

sift primero, pop ultimo y push para agregar al final

Gracias !!
Buena informacion 😃

Buen recorderis y genial curso

Algo interesante, con shift nuestro array se comporta como una cola, con pop nuestro array se comporta como una pila.

Muchas gracias, estoy aprendiendo mucho y tomando notas claro!

Muy clara la explicación