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.
$
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.