tengo este codigo que la verdad se repite solo cambia los nombres ya que hacen lo mismo pero la diferencia es que mando a llamar diferente dato y me gustaria reducir ese codigo
const times = truck["Fase 1"]; const [h, m, s] = times.split(":"); const minutes = parseInt(h) * 60 + parseInt(m) + s / 60; const time = minutes; const color = time <= 18 ? "#0CC234" : time < 30 ? "#FACE5A" : "#FF0101"; const Fase2 = truck["Fase 2"]; console.log({ Fase2 }); const [hs, ms, ss] = Fase2.split(":"); const minutesF2 = parseInt(hs) * 60 + parseInt(ms) + ss / 60; const time2 = minutesF2; const colors = time2 <= 18 ? "#0CC234" : time2 < 30 ? "#FACE5A" : "#FF0101";Siento que el código se repite mucho y que se puede reducir, pero no sé cómo
Puede mover la parte repetida a la función:
const truck = { 'Fase 1': '11:22:33', 'Fase 2': '11:22:33', }; function getColor (fase) { const [h, m, s] = truck[fase].split(':'); const timeInMinutes = parseInt(h) * 60 + parseInt(m) + s / 60; const color = timeInMinutes <= 18 ? "#0CC234" : timeInMinutes < 30 ? "#FACE5A" : "#FF0101"; return color; } console.log(getColor('Fase 1')); console.log(getColor('Fase 2'));Divida los datos compartidos en sus propias funciones: getTime , getMinutes y getColor . A continuación, puede acceder a ellos para cada camión.
function getTime(time) { return time.split(":"); } function getMinutes([h, m, s]) { // I had to adjust this calculation so that // it returns a number that correlates to the // conditions in `getColors` return Math.round((parseInt(h) * 60 + parseInt(m) + parseInt(s)) / 60); } function getColor(minutes) { if (minutes <= 18) return '#0CC234'; if (minutes <= 30) return '#FACE5A'; return '#FF0101'; } const time = getTime('3:45:12'); const minutes = getMinutes(time); const color = getColor(minutes); console.log(color) const time2 = getTime('34:12:00'); const minutes2 = getMinutes(time2); const color2 = getColor(minutes); console.log(color2); También podrías usar una class :
class Truck { constructor(name, time) { this.name = name; this.time = this.getTimes(time); this.minutes = this.getMinutes(this.time); console.log(this.minutes) this.color = this.getColor(this.minutes); } getTimes(time) { return time.split(":"); } getMinutes([h, m, s]) { return Math.round((parseInt(h) * 60 + parseInt(m) + parseInt(s)) / 60); } getColor() { if (this.minutes <= 18) return '#0CC234'; if (this.minutes <= 30) return '#FACE5A'; return '#FF0101'; } } const fase1 = new Truck('Fase1', '12:2:12'); console.log(fase1.name); console.log(fase1.time); console.log(fase1.minutes); console.log(fase1.color);Hay algunas variables innecesarias.
const [h, m, s] = truck["Fase 1"].split(":"); const minutes = parseInt(h) * 60 + parseInt(m) + s / 60; const color = minutes <= 18 ? "#0CC234" : minutes < 30 ? "#FACE5A" : "#FF0101"; const [hs, ms, ss] = truck["Fase 2"].split(":"); const minutesF2 = parseInt(hs) * 60 + parseInt(ms) + ss / 60; const colors = minutesF2 <= 18 ? "#0CC234" : minutesF2 < 30 ? "#FACE5A" : "#FF0101";