Lección 9 · 9 de 20

Añadir, quitar y buscar · JavaScript

Los métodos básicos de los arrays en JavaScript: push, pop, shift, unshift, includes, indexOf, slice y splice, con una lista de la compra y una cola.

JavaScript · Añadir, quitar y buscar en DMarlon Studio: el código del ejemplo y su salida en la terminal

Los arrays traen métodos para cambiar la lista sin tocar los índices a mano. `push()` añade al final y `pop()` quita el último y lo devuelve: por eso last vale "cheese".

Por el principio funcionan igual `unshift()`, que añade, y `shift()`, que quita el primero y lo devuelve. Son los métodos de una cola: se entra por un extremo y se sale por el otro.

Para buscar, `includes()` responde true o false, y `indexOf()` da la posición del elemento, o -1 si no está, como pasa con "tea".

`slice(inicio, fin)` copia un trozo, desde inicio hasta antes de fin, sin cambiar el original; sin el segundo número, copia hasta el final. `splice(posición, cuántos)`, en cambio, modifica el array: queue.splice(1, 2) quita dos personas desde la posición 1, y queue.splice(1, 0, "Fran") inserta a Fran sin quitar a nadie.

Recuerde la diferencia: push, pop, shift, unshift y splice cambian el array; slice, includes e indexOf solo lo leen.

Código · main.js

// A shopping list that changes as we go.const list = ["bread", "milk", "eggs"];list.push("cheese");        // add at the endconsole.log("push:   ", list);const last = list.pop();    // remove from the endconsole.log("pop:    ", list, "removed", last);list.unshift("coffee");     // add at the startconsole.log("unshift:", list);const first = list.shift(); // remove from the startconsole.log("shift:  ", list, "removed", first);// includes and indexOf: is it there, and where?console.log("Has milk?", list.includes("milk"));console.log("Position of eggs:", list.indexOf("eggs"));console.log("Position of tea:", list.indexOf("tea")); // -1: not found// slice copies a part and leaves the original as it was.const queue = ["Ana", "Ben", "Carla", "David", "Eva"];console.log("First three:", queue.slice(0, 3));console.log("From the third on:", queue.slice(2));// splice changes the original: it removes and/or inserts.const removed = queue.splice(1, 2); // remove 2 from index 1console.log("splice removed", removed, "->", queue);queue.splice(1, 0, "Fran");         // insert at index 1, remove noneconsole.log("After inserting:", queue);

Salida · node main.js

push:    [ 'bread', 'milk', 'eggs', 'cheese' ]
pop:     [ 'bread', 'milk', 'eggs' ] removed cheese
unshift: [ 'coffee', 'bread', 'milk', 'eggs' ]
shift:   [ 'bread', 'milk', 'eggs' ] removed coffee
Has milk? true
Position of eggs: 2
Position of tea: -1
First three: [ 'Ana', 'Ben', 'Carla' ]
From the third on: [ 'Carla', 'David', 'Eva' ]
splice removed [ 'Ben', 'Carla' ] -> [ 'Ana', 'David', 'Eva' ]
After inserting: [ 'Ana', 'Fran', 'David', 'Eva' ]

Para recordar

push/pop trabajan por el final; unshift/shift, por el principio.
indexOf devuelve -1 si no encuentra el elemento.
slice copia sin cambiar el original.
splice quita e inserta en el propio array.

Ejercicio

Simule la cola de una panadería: entran tres clientes con push, se atiende a dos con shift y una persona se cuela en la posición 0 con splice; escriba la cola en cada paso.