0

Soy novato con JavaScript, y estoy realizando un ejercicio de clases en el que estoy atascado. Tengo un único array que almacena tanto Taxis como Autobuses. Tengo que eliminar del array el primer Taxi (cuando se pulse el botón) y el primer bus (cuando se pulse el botón) sin importar el orden de creación.

No se cómo borrar el primer Taxi y el Primer Autobus. De momento he logrado mostrar en consola lo siguiente:

(4) [Taxi, Taxi, Autobus, Autobus, Taxi]

con un Object.values($vehiculos). La idea que tengo es, bueno, no se como seguir. Yo lo veo claro, buscar el primer Taxi y eliminarlo. Buscar el primer Autobus y eliminarlo.

Adjunto las clases y la app:

APP:

let $vehiculos = [];

function anadeTaxi(){
    let matricula = document.getElementsByName("matricula")[0].value;
    let modelo = document.getElementsByName("modelo")[0].value;
    let potencia = document.getElementsByName("potencia")[0].value;
    let licencia = document.getElementsByName("licenciaPlazas")[0].value;

    let $taxi = new Taxi(matricula,modelo,potencia,licencia);

    $vehiculos.push($taxi);

    listarVehiculos();
}

function quitaTaxi(){

    console.log(Object.values($vehiculos));
    delete Object.values($vehiculos)[Taxi];
    console.log(Object.values($vehiculos));
}

function anadeBus(){
    let matricula = document.getElementsByName("matricula")[0].value;
    let modelo = document.getElementsByName("modelo")[0].value;
    let potencia = document.getElementsByName("potencia")[0].value;
    let plazas = document.getElementsByName("licenciaPlazas")[0].value;

    $autobus = new Autobus(matricula,modelo,potencia,plazas);

    $vehiculos.push($autobus);

    listarVehiculos();
}

function quitaBus(){

}

function listarVehiculos(){

    let $miSpan = document.getElementById("mostrardatos");
    $miSpan.textContent = ``;

    $miSpan.innerHTML = JSON.stringify($vehiculos);
}

VEHICULO:

class Vehiculo{

    constructor(matricula,modelo,potenciaCV){
        this.matricula = matricula;
        this.modelo = modelo;
        this.potenciaCV = potenciaCV;
        //this.misVehiculos = [];
    }
    
    getMatricula(){
        return this.matricula;
    }
    getModelo(){
        return this.modelo;
    }
    getPotencia(){
        return this.potenciaCV;
    }

    setMatricula(matricula){
        this.matricula = matricula;
    }
    setModelo(modelo){
        this.modelo = modelo;
    }
    setPotencia(potenciaCV){
        this.potenciaCV = potenciaCV;
    }
}

AUTOBUS:

class Autobus extends Vehiculo{

    constructor(matricula,modelo,potenciaCV,numeroPlazas){
        super(matricula,modelo,potenciaCV);
        this.numeroPlazas = numeroPlazas;
    }

    getNumeroPlazas(){
        return this.numeroPlazas;
    }

    setNumeroPlazas(numeroPlazas){
        this.numeroPlazas = numeroPlazas;
    }
}

TAXI:

class Taxi extends Vehiculo{

    constructor(matricula,modelo,potenciaCV,numeroLicencia){
        super(matricula,modelo,potenciaCV);
        this.numeroLicencia = numeroLicencia;
    }

    getNumeroLicencia(){
        return this.numeroLicencia;
    }

    setNumeroLicencia(numeroLicencia){
        this.numeroLicencia = numeroLicencia;
    }
}

INDEX

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="js/Vehiculo.js"></script>
  <script type="text/javascript" src="js/Taxi.js"></script>
  <script type="text/javascript" src="js/Autobus.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
  <center>GESTIÓN DE VEHÍCULOS</center>
    <p>
      Matrícula: <input type="text" name="matricula" value="" >
    </p>
    <p>
      Modelo: <input type="text" name="modelo" value="">
    </p>
    <p>
      Potencia: <input type="text" name="potencia" value="" >
    </p>
    <p>
      Licencia/Plazas: <input type="text" name="licenciaPlazas" value="" >
    </p>
    <p>
      <button id="anadeTaxi" onclick="anadeTaxi()">Añadir un taxi</button>
    </p>
    <p>
      <button id="anadeBus" onclick="anadeBus()">Añadir un Autobus</button>
    </p>
    <p>
      <button id="quitaTaxi" onclick="quitaTaxi()">Quitar el primer Taxi</button>
    </p>
    <p>
      <button id="quitaBus" onclick="quitaBus()">Quitar el primer Bus</button>
    </p>

    <span id="mostrardatos"></span>

</body>
</html>

Muchas gracias por la ayuda que podáis proporcionarme.

5
  • Y si manejas los arreglos por separado? let taxis = [] | let autobuses = []; ¿? De todas maneras es meramente una sugerencia. En definitiva podrías usar el método splice para eliminar el primer elemento. Considera que esté método modifica el arreglo original. Commented el 9 jun. a las 1:16
  • Te recomiendo: dev.to/gdcodev/… Si vas a usar una lista en general, te recomendaria ponerla como estatica en tu clase, asi todas ingresan a esa lista ---> static vehiculos = []; A partir de tener esta lista, aplica un metodo dentro de tu clase que se llame "borrar vehiculo" o como quieras llamarlo. Para borrar el primer elemento usa lista.pop() y el primer lista.shift().
    – Alan Stone
    Commented el 9 jun. a las 1:23
  • Hola Oscar, bienvenido, lo que necesitas es recorrer $vehiculos con un bucle, y en cada item, verificas si se corresponde a la clase buscada, si lo es, eliminas, si no, sigues iterando. Commented el 9 jun. a las 6:02
  • Hola Paulo, obligatoriamente debo usar sólo un array para guardar tanto Taxi como Autobus. No puedo usar más :-( Commented el 9 jun. a las 16:25
  • Una recomendación, ya que dices que eres novato en Javascript, evita usar $ como parte del nombre de la variable (algo típico de PHP). La razón: existen frameworks y librerías que dan un significado semántico, como convención, a las variables que empiezan o terminan con dicho carácter. Por ejemplo, JQuery usa $ como alias, para que puedas usarlo así : $( "button.continue" ).html( "Next Step..." ). En Angular, una variable que termina con $ se refiere por convención a un Observable. Commented el 11 jun. a las 18:17

3 respuestas 3

1

Tu dices:

Yo lo veo claro, buscar el primer Taxi y eliminarlo. Buscar el primer Autobus y eliminarlo.

Por lo que veo, tu problema es identificar cuando es Taxi o Autobus, para esto usas instanceof en conjunto con alguna función find

Nota: Simplificaré tus clases para eliminar el ruido de otro código que no aporta al problema

/*
 Ejemplo que busca el primer vehiculo según su tipo
*/
class Vehiculo{
    constructor(matricula){
        this.matricula = matricula;
    }
}

class Autobus extends Vehiculo{
}

class Taxi extends Vehiculo{
}

const Vehiculos = [new Autobus("bus_A"), new Taxi("Taxi_A"), new Taxi("Taxi_B"),new Autobus("bus_B")];


function buscarPrimerVehiculoSegunTipo(tipo){
  return Vehiculos.find(v => v instanceof tipo);
}

console.log("El primer Autobus", buscarPrimerVehiculoSegunTipo(Autobus));
console.log("El primer Taxi",buscarPrimerVehiculoSegunTipo(Taxi))

La función find del ejemplo anterior retorna el primer elemento que satisface la condición entregada, análogamente existe findIndex que retorna el índice de ese objeto, que al utilizarlo en conjunto con la función splice te permitirá borrar el primer objeto según su tipo

class Vehiculo{
    constructor(matricula){
        this.matricula = matricula;
    }
}

class Autobus extends Vehiculo{}

class Taxi extends Vehiculo{}

const Vehiculos = [new Autobus("bus_A"), new Taxi("Taxi_A"), new Taxi("Taxi_B"),new Autobus("bus_B")];


function borrarPrimero(tipo){
  const index = Vehiculos.findIndex(v => v instanceof tipo);
  if(index !== -1){
     Vehiculos.splice(index,1);
  }
}

borrarPrimero(Taxi);
console.log(Vehiculos);

Entonces para borrar:

  • El primer Taxi -> borrarPrimero(Taxi);
  • El primer Autobus -> borrarPrimero(Autobus);
  • El primero (se cual sea) -> borrarPrimero(Vehiculo);
1
  • Muchas gracias Yussef por tu ayuda. Entre todos he aprendido un buen par de trucos.... Muchas Gracias Compi!!! :-) Commented el 11 jun. a las 9:21
0

Si solo buscas eliminar el primer y ultimo elemento, entonces, dentro de una funcion:

function tuFuncion(){
   tuListaDeVehiculos.shift(); // Elimino el primero
   tuListaDeVehiculos.pop(); // Elimino el ultimo
}

Una forma mas genérica según el vehículo que tu quieras borrar: Dentro de tu clase o como método fuera, como gustes, yo prefiero en la clase:

//función flecha 
const buscarVehiculoLista(vehiculo) => { 
   return tuListaDeVehiculos.indexOf(vehiculo); 
   //retorna el index del vehiculo que deseas en la lista. 
} 
Ahora: 

const borrarVehiculo(vehiculo) => { 
    const index = buscarVehiculoLista(vehiculo);// retorno el indice que obtuve en la funcion buscarVehiculoLista
    if(index > -1) { tuListaDeVehiculos.splice(1, index); } 
} 

Con splice eliminas [desde, hasta] --> con lista.splice(1,index) solo eliminas ese elemento en si.

Tener en cuenta que el parametro "vehiculo" es un objeto. Podria ser un titulo, id, lo que sea, pero deberias usar un map con la lista. Un ejemplo es:

const buscarVehiculoLista(matricula) => { 
   const listaMatriculas = tuListaDeVehiculos.map(vehiculo => vehiculo.matricula); //accedo a la matricula del objeto.
   return s.indexOf(matricula);
   //retorna el index del vehiculo que tenga tal matricula. Como el map no altera los indices, entonces me da igual esto, siempre y cuando mi matricula coincida con el vehiculo que tengo. Claramente la matricula es unica por vehiculo, es decir, no se repite.
} 
Ahora: 

const borrarVehiculo(matricula) => { 
    const index = buscarVehiculoLista(matricula);
    const listaMatriculas = tuListaDeVehiculos.map(vehiculo => vehiculo.matricula);
    if(index > -1) { listaMatriculas .splice(1, index); } 
} 
// Claramente el map para evitar repetirlo podrias ponerlo como una funcion aparte que retorne directamente esa lista nueva.
// Nota importate: el map retorna una lista copia, no altera la original.

Claro, el map úsalo si tu lista es de objetos, si fuera una lista de nombres y quiere cambiarla por matricula, no tendría sentido. En este caso, solo accedí a un atributo de tu instancia de objeto de la clase Vehiculos.

Suerte!

3
  • Hola compi. El Taxi o Autobus que borre tiene que ser el primero del array de objetos, no el segundo, el 10 o el último. O borro el primer taxi, o borro el primer autobus de los que haya en el array. Commented el 9 jun. a las 16:24
  • Ya ya, pues usa el ejemplo que te di de indexOf + splice, el indexOf al pasarle taxi o autobus te devolvera el primero que encuentre en la lista y con el splice lo quitas. Si quisieras el ultimo de taxi o autobus usa lastIndexOf, misma logica que el indexOf
    – Alan Stone
    Commented el 9 jun. a las 17:43
  • Muchas gracias Alan Stone por tu ayuda. Entre todos he aprendido un buen par de trucos.... Muchas Gracias Compi!!! :-) Commented el 11 jun. a las 9:20
0

Acá te dejo un ejemplo de como lograrlo, he simplificado las clases para no hacerlo muy extenso.

class Vehiculo {
  constructor( nombre ) {
    this.nombre = nombre;
  }
}

class Autobus extends Vehiculo {    }

class Taxi extends Vehiculo {      }

let vehiculos = [ new Taxi( "taxi1" ), new Autobus( "bus1" ), new Taxi( "taxi2" ) ];

function removerTaxi() {
    for( let i = 0; i < vehiculos.length; i++ ) {
        if( vehiculos[ i ] instanceof Taxi ) {
            vehiculos.splice( i, 1 );
            return;
        }
    }
}

function removerAutobus() {
    for( let i = 0; i < vehiculos.length; i++ ) {
        if( vehiculos[ i ] instanceof Autobus ) {
            vehiculos.splice( i, 1 )( i );
            return;
        }
    }
}

removerTaxi();

for( let i = 0; i < vehiculos.length; i++ ) {
    console.log( vehiculos[ i ].nombre ); 
}

Las funciones removerTaxi y removerAutobus, se pueden unificar, pasandole un parámetro, y en base a este, eligiendo el tipo de objeto a eliminar.

2
  • Muchas gracias, tu y todos los demás me habéis ayudado mucho. El truco ese de usar el return para salir del bucle me ha encantado!!! Me faltaba ese truco. Estoy muy contento y agradecido. Hasta la próxima!!! Commented el 11 jun. a las 9:19
  • @OscarMoratoPrieto, un placer haberte ayudado!! Commented el 13 jun. a las 13:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.